Sujet Précédent Sujet Suivant

Popup Javascript contenant du html sur une image map

Résolu/Fermé
gallagally Messages postés 7 Date d'inscription mercredi 10 septembre 2008 Statut Membre Dernière intervention 18 novembre 2013 - 15 nov. 2013 à 15:20
gallagally Messages postés 7 Date d'inscription mercredi 10 septembre 2008 Statut Membre Dernière intervention 18 novembre 2013 - 18 nov. 2013 à 15:20
Bonjour à tous,

Je suis sur un petit projet de carte interactive qui me demande hélas des compétences que je ne maitrise pas mais que j'aimerais bien apprendre !
J'essaie de faire une carte interactive (type image map, réalisée avec GIMP) permettant d'afficher, en glissant la souris sur ses différentes zones, des popup contenant du html, avec du texte et des images. En faisant cela, j'espérais éviter d'avoir à créer des pages html indépendantes pour chaque zone, éviter d'alourdir l'arborescence de mon site et faire quelque chose de "propre et simple".

Pour le moment, j'ai trouvé du code que j'ai adapté et qui me permet d'afficher des popup contenant des textes différents, vous pouvez voir ce que ça donne ici : http://42.meup.org/BKS4h9ae.html

Je me croyais presque rendue, mais chaque fois que j'essaie d'insérer du html à la place du texte j'ai, au mieux, l'adresse en bête texte qui s'affiche et rien de plus...
J'ai tenté d'adapter ma fonction "open_new_window" pour qu'elle accepte autre chose que tu texte mais sans succès. Je sens qu'il y a un truc qui m'échappe.

Ceci étant posé, je me demande si je suis dans la bonne voie et qu'il me suffit d'une petite adaptation pour atteindre mon but, ou bien s'il est tout simplement impossible d'insérer du html dans les popup créées de cette manière... Dans la mesure où je ne suis qu'une bidouilleuse de code sans connaissances spécifiques en Javascript, je crains d'être en train d'essayer d'utiliser un tournevis pour enfoncer un clou...

Ci-dessous, le code de mon exemple. Merci par avance pour vos avis éclairés :) 

<script language="JavaScript">



function open_new_window(text) { //now your func expects variable, which stipulates the text to write in the new win

new_window = open("","hoverwindow","width=1300,height=200,left=10,top=10");



new_window.document.open();



new_window.document.write("<html><title>JavaScript New Window</title>");

new_window.document.write("<body bgcolor=\"#FFFFFF\">");

new_window.document.write(text);

new_window.document.write("</body></html>");



new_window.document.close();

}





function close_window() {

new_window.close();

}



</script>

<img

src="http://monsite.fr/uploads/RTEmagicC_carte.jpg.jpg"

usemap="#map" border="0" height="522" width="705"><map name="map">

<!-- #$-:Image map file created by GIMP Image Map plug-in -->

<!-- #$-:GIMP Image Map plug-in by Maurits Rijk --><!-- #$-:Please do not edit lines starting with "#$" --><!-- #$VERSION:2.3 --><!-- #$AUTHOR:m--><area

shape="poly" coords="675,337,675,324,683,320,698,322,698,338,687,343"

onmouseover="open_new_window('this is the text to appear in pop-up window 1 this is the text to appear in pop-up window 1 this is the text to appear in pop-up window 1 this is the text to appear in pop-up window 1')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="504,252,505,263,511,272,525,270,527,252,518,248,511,248"

onmouseover="open_new_window('this is the text to appear in pop-up window 2')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="240,400,242,413,249,417,263,415,263,400,256,396,245,394"

onmouseover="open_new_window('this is the text to appear in pop-up window 3')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="269,367,269,377,277,387,286,383,289,368,277,361"

onmouseover="open_new_window('this is the text to appear in pop-up window 4')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="354,371,355,384,364,387,374,385,377,375,373,370,362,368"

onmouseover="open_new_window('this is the text to appear in pop-up window 5')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="362,284,362,296,369,302,376,302,383,296,383,287,377,280,370,280"

onmouseover="open_new_window('this is the text to appear in pop-up window 6')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="293,265,293,275,301,279,313,276,313,264,306,261,298,261"

onmouseover="open_new_window('this is the text to appear in pop-up window 7')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="249,277,249,290,253,296,267,294,270,290,270,277,265,272,257,272"

onmouseover="open_new_window('this is the text to appear in pop-up window 8')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="210,264,210,277,219,281,232,276,232,265,225,260,214,258"

onmouseover="open_new_window('this is the text to appear in pop-up window 9')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="159,271,159,284,168,290,183,283,183,270,177,264,163,264"

onmouseover="open_new_window('this is the text to appear in pop-up window 10')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="118,263,118,275,124,282,135,279,139,267,136,260,126,257"

onmouseover="open_new_window('this is the text to appear in pop-up window 11')"

onmouseout="close_window()" nohref="nohref">

<area shape="poly"

coords="49,238,49,252,60,257,75,249,74,237,62,233,57,233"

onmouseover="open_new_window('this is the text to appear in pop-up window 12')"

onmouseout="close_window()" nohref="nohref">

</map>

A voir également:

3 réponses

Réponse 1 / 3
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
15 nov. 2013 à 17:23
Salut

ca ne passera pas comme cela , les pop seront bloque !

tu peu le faire avec un document.getElementById qui rend visible un elemeny mis en hidden dans le css !

ta page avec cette methode , il y a une image et meme un swf dans les tooltip ! 

<!DOCTYPE html>

<html>

  <head>

    <title>

      tempo-carte-2

    </title>

    <style type="text/css">

<!--

     #info1 , #info2, #info3, #info4, #info5, #info6 , #info7 , #info8 , #info9 , #info10, #info11 , #info12 {

    position: absolute;

    width: 350px; /* longueur de la tooltip */

    top: 50px;     /* place de la tooltip sur image  */

    left: 150px;  /*  place de la tooltip sur image   */

    visibility: hidden;   /* cacher les info */

    z-index: 1;

    color: #c8ddda;

    background-color: #242424;

    border: solid 2px #222;

    border-radius: 50px 0px 50px 0px;

    -webkit-border-radius: 50px 0px 50px 0px;

    -moz-border-radius: 50px 0px 50px 0px;

    filter: alpha(opacity=75);

    -moz-opacity: 0.75;

    opacity: 0.75;

    font-weight: bold;

    text-align: center;

    font-family: Courier, "Courier New", monospace;

    }

    -->

    </style>

  </head>

  <body>

    <img src="http://media.ville-gentilly.fr/login" usemap="#map" border="0" height="522"

    width="705" alt="img"><map name="map" id="map">

      <!-- #$-:Image map file created by GIMP Image Map plug-in -->

      <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --><!-- #$-:Please do not edit lines starting with "#$" -->

      <!-- #$VERSION:2.3 --><!-- #$AUTHOR:mvacherot -->

      <area shape="poly" coords="675,337,675,324,683,320,698,322,698,338,687,343" onmouseover="afficher('info1')"

      onmouseout="masquer('info1')" href="#" alt="inf1">

      <area shape="poly" coords="504,252,505,263,511,272,525,270,527,252,518,248,511,248" onmouseover=

      "afficher('info2')" onmouseout="masquer('info2')" href="#" alt="inf2">

      <area shape="poly" coords="240,400,242,413,249,417,263,415,263,400,256,396,245,394" onmouseover=

      "afficher('info3')" onmouseout="masquer('info3')" href="#" alt="inf3">

      <area shape="poly" coords="269,367,269,377,277,387,286,383,289,368,277,361" onmouseover="afficher('info4')"

      onmouseout="masquer('info4')" href="#" alt="inf4">

      <area shape="poly" coords="354,371,355,384,364,387,374,385,377,375,373,370,362,368" onmouseover=

      "afficher('info5')" onmouseout="masquer('info5')" href="#" alt="inf5">

      <area shape="poly" coords="362,284,362,296,369,302,376,302,383,296,383,287,377,280,370,280" onmouseover=

      "afficher('info6')" onmouseout="masquer('info6')" href="#" alt="inf6">

      <area shape="poly" coords="293,265,293,275,301,279,313,276,313,264,306,261,298,261" onmouseover=

      "afficher('info7')" onmouseout="masquer('info7')" href="#" alt="inf7">

      <area shape="poly" coords="249,277,249,290,253,296,267,294,270,290,270,277,265,272,257,272" onmouseover=

      "afficher('info8')" onmouseout="masquer('info8')" href="#" alt="inf8">

      <area shape="poly" coords="210,264,210,277,219,281,232,276,232,265,225,260,214,258" onmouseover=

      "afficher('info9')" onmouseout="masquer('info9')" href="#" alt="inf9">

      <area shape="poly" coords="159,271,159,284,168,290,183,283,183,270,177,264,163,264" onmouseover=

      "afficher('info10')" onmouseout="masquer('info10')" href="#" alt="inf10">

      <area shape="poly" coords="118,263,118,275,124,282,135,279,139,267,136,260,126,257" onmouseover=

      "afficher('info11')" onmouseout="masquer('info11')" href="#" alt="inf11">

      <area shape="poly" coords="49,238,49,252,60,257,75,249,74,237,62,233,57,233" onmouseover="afficher('info12')"

      onmouseout="masquer('info12')" href="#" alt="inf12">

    </map> <!-- LES DIV INFO -->

    <div id="info1">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info2">

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="225" id="pf">

        <param name="movie" value="http://rad2.free.fr/ccm/aides_CCM/Exemples%20aides%20et%20outils/getElementById%20avec%20swf%20pour%20alain/rz.swf">

        <param name="quality" value="high">

        <param name="wmode" value="transparent">

        <!--[if !IE]>-->

        <object type="application/x-shockwave-flash" data="http://rad2.free.fr/ccm/aides_CCM/Exemples%20aides%20et%20outils/getElementById%20avec%20swf%20pour%20alain/rz.swf" width="300" height="225">

          <param name="quality" value="high">

          <param name="wmode" value="transparent">

          <!--<![endif]-->

          <a href="https://get.adobe.com/flashplayer/"><img src=

          "https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a>

          <!--[if !IE]>-->

        </object> <!--<![endif]-->

      </object>

      <p>

        Meme un FLASH avec Transparence

      </p>

    </div>

    <div id="info3">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info4">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p><img src=

      "data:image/gif;base64,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"

      alt="img">

    </div>

    <div id="info5">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info6">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info7">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info8">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info9">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info10">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

      </div>

    <div id="info11">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info12">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

      </div><!-- LES DIV INFO -->

    <!-- getElementById -->

    <script type="text/javascript">

//<![CDATA[



    function afficher(info)

    {

        var tooltip = document.getElementById(info);

        tooltip.style.visibility = "visible";

        run= true ;

    }

    function masquer(info)

    {

        var tooltip = document.getElementById(info) ;

        tooltip.style.visibility = "hidden";

        run= false ;

    }

    //]]>

    </script> <!-- getElementById -->

  </body>

</html>


a+
3
Réponse 2 / 3
RAD ZONE Messages postés 5230 Date d'inscription samedi 20 janvier 2007 Statut Contributeur Dernière intervention 17 août 2024 1 360
15 nov. 2013 à 17:30
Salut

ca ne passera pas comme cela , les pop seront bloque !

pour faire simple

tu peu le faire avec un document.getElementById qui rend visible un element mit en hidden dans le css !

ta page avec cette methode , il y a une image et meme un swf dans les tooltip ! 

<!DOCTYPE html>

<html>

  <head>

    <title>

      tempo-carte-2

    </title>

    <style type="text/css">

<!--

     #info1 , #info2, #info3, #info4, #info5, #info6 , #info7 , #info8 , #info9 , #info10, #info11 , #info12 {

    position: absolute;

    width: 350px; /* longueur de la tooltip */

    top: 50px;     /* place de la tooltip sur image  */

    left: 150px;  /*  place de la tooltip sur image   */

    visibility: hidden;   /* cacher les info */

    z-index: 1;

    color: #c8ddda;

    background-color: #242424;

    border: solid 2px #222;

    border-radius: 50px 0px 50px 0px;

    -webkit-border-radius: 50px 0px 50px 0px;

    -moz-border-radius: 50px 0px 50px 0px;

    filter: alpha(opacity=75);

    -moz-opacity: 0.75;

    opacity: 0.75;

    font-weight: bold;

    text-align: center;

    font-family: Courier, "Courier New", monospace;

    }

    -->

    </style>

  </head>

  <body>

    <img src="http://media.ville-gentilly.fr/login" usemap="#map" border="0" height="522"

    width="705" alt="img"><map name="map" id="map">

      <!-- #$-:Image map file created by GIMP Image Map plug-in -->

      <!-- #$-:GIMP Image Map plug-in by Maurits Rijk --><!-- #$-:Please do not edit lines starting with "#$" -->

      <!-- #$VERSION:2.3 --><!-- #$AUTHOR:mvacherot -->

      <area shape="poly" coords="675,337,675,324,683,320,698,322,698,338,687,343" onmouseover="afficher('info1')"

      onmouseout="masquer('info1')" href="#" alt="inf1">

      <area shape="poly" coords="504,252,505,263,511,272,525,270,527,252,518,248,511,248" onmouseover=

      "afficher('info2')" onmouseout="masquer('info2')" href="#" alt="inf2">

      <area shape="poly" coords="240,400,242,413,249,417,263,415,263,400,256,396,245,394" onmouseover=

      "afficher('info3')" onmouseout="masquer('info3')" href="#" alt="inf3">

      <area shape="poly" coords="269,367,269,377,277,387,286,383,289,368,277,361" onmouseover="afficher('info4')"

      onmouseout="masquer('info4')" href="#" alt="inf4">

      <area shape="poly" coords="354,371,355,384,364,387,374,385,377,375,373,370,362,368" onmouseover=

      "afficher('info5')" onmouseout="masquer('info5')" href="#" alt="inf5">

      <area shape="poly" coords="362,284,362,296,369,302,376,302,383,296,383,287,377,280,370,280" onmouseover=

      "afficher('info6')" onmouseout="masquer('info6')" href="#" alt="inf6">

      <area shape="poly" coords="293,265,293,275,301,279,313,276,313,264,306,261,298,261" onmouseover=

      "afficher('info7')" onmouseout="masquer('info7')" href="#" alt="inf7">

      <area shape="poly" coords="249,277,249,290,253,296,267,294,270,290,270,277,265,272,257,272" onmouseover=

      "afficher('info8')" onmouseout="masquer('info8')" href="#" alt="inf8">

      <area shape="poly" coords="210,264,210,277,219,281,232,276,232,265,225,260,214,258" onmouseover=

      "afficher('info9')" onmouseout="masquer('info9')" href="#" alt="inf9">

      <area shape="poly" coords="159,271,159,284,168,290,183,283,183,270,177,264,163,264" onmouseover=

      "afficher('info10')" onmouseout="masquer('info10')" href="#" alt="inf10">

      <area shape="poly" coords="118,263,118,275,124,282,135,279,139,267,136,260,126,257" onmouseover=

      "afficher('info11')" onmouseout="masquer('info11')" href="#" alt="inf11">

      <area shape="poly" coords="49,238,49,252,60,257,75,249,74,237,62,233,57,233" onmouseover="afficher('info12')"

      onmouseout="masquer('info12')" href="#" alt="inf12">

    </map> <!-- LES DIV INFO -->

    <div id="info1">

      <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="300" height="225" id="pf">

        <param name="movie" value="http://rad2.free.fr/ccm/aides_CCM/Exemples%20aides%20et%20outils/getElementById%20avec%20swf%20pour%20alain/rz.swf">

        <param name="quality" value="high">

        <param name="wmode" value="transparent">

        <!--[if !IE]>-->

        <object type="application/x-shockwave-flash" data="http://rad2.free.fr/ccm/aides_CCM/Exemples%20aides%20et%20outils/getElementById%20avec%20swf%20pour%20alain/rz.swf" width="300" height="225">

          <param name="quality" value="high">

          <param name="wmode" value="transparent">

          <!--<![endif]-->

          <a href="https://get.adobe.com/flashplayer/"><img src=

          "https://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player"></a>

          <!--[if !IE]>-->

        </object> <!--<![endif]-->

      </object>

      <p>

        Meme un FLASH avec Transparence

      </p>

    </div>

   <div id="info2">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p><img src=

      "data:image/gif;base64,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"

      alt="img">

    </div>

     <div id="info3">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    <div id="info4">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    </div>

    <div id="info5">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info6">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info7">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info8">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info9">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info10">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

      </div>

    <div id="info11">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

    </div>

    <div id="info12">

      <p>

        Lorem ipsum dolor sit amet consectetuer Vestibulum tortor eleifend Suspendisse tellus.

      </p>

      </div><!-- LES DIV INFO -->

    <!-- getElementById -->

    <script type="text/javascript">

//<![CDATA[



    function afficher(info)

    {

        var tooltip = document.getElementById(info);

        tooltip.style.visibility = "visible";

        run= true ;

    }

    function masquer(info)

    {

        var tooltip = document.getElementById(info) ;

        tooltip.style.visibility = "hidden";

        run= false ;

    }

    //]]>

    </script> <!-- getElementById -->

  </body>

</html>

a+
0
Réponse 3 / 3
gallagally Messages postés 7 Date d'inscription mercredi 10 septembre 2008 Statut Membre Dernière intervention 18 novembre 2013 1
18 nov. 2013 à 15:20
Merci Rad Zone, pour ton conseil et la solution que tu proposes :) C'est plus que je n'espérais, il ne me reste plus qu'à adapter ta solution à ma situation !
0

Discussions similaires

calcule nombre des pixels "noir" dans un image (noir/blanc)
neji55 -
nath84150 -

3 réponses
PIX
plart -
jordane45 -

1 réponse
Dechiffrer une image caché
JACQUE -
Otomec -

1 réponse
image ?
youness -
Utilisateur anonyme -

11 réponses
la balise <br> ou <br />
faamugol -
rwaness -

8 réponses