Texte sur une image
Résoluvoilà mon interrogation, sur un site que je fabrique "à la main" avec html edit, j'ai une photo de mariage familiale, 70 personne datant de 50 ans environ.
par la balise MAP et circle, j'ai pu faire en sorte qu'en passant qon curseyr de souris sur un visage le visage devient cliquable et renvois vers une page html identifiant la personne,
je souhaiterai que sur cette photo en plaçant le curseur de la souris en plus que le visage soit cliquable il y ait une "bulle" info ou une zone dans laquelle pourrait apparaitre une info texte simple lié à chaque visage et donc variant en fonction des différent visage,
avez vous une astuce simple, pour moi à faire pour y arriver ?
merci à tous par avance
Configuration: Windows XP Firefox 3.0.7
42 réponses
La discussion porte sur l’ajout d’une bulle d’information et d’une zone texte associée à chaque visage sur une photo intégrée via une image map et des cercles cliquables. Plusieurs réponses proposent d’utiliser des divs info reliés par des zones image map, avec des scripts simples qui affichent ou cachent les bulles au passage du curseur et au survol des visages. Les exemples évoquent des versions HTML 4.01 Transitional et XHTML 1.0 Strict, des balises map et area de type cercle, et des fonctions JavaScript nommées afficher/masquer pour piloter la visibilité des infos. En pratique, les contributeurs présentent des pages avec les lieux et textes associés, laissant à l’utilisateur ajuster les bulles pour chaque visage.
-
ContributeurALLEZ
un bon geste :_))
voila ta page avec les survol et tooltip !
je n ai fais que les 5 premiere (l infos ne corespond pas pour la 5 , tu mettra le bon texte !) a toi de faire les autres , mais tout est pres !!
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>Le site de la famille IDOT </title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"> <meta name="description" content="Le site de la famille IDOT"> <meta name="Copyright" content="® 2008 philippe IDOT"> <meta name="ROBOTS" content="all"> <meta name="Publisher" content="IDOT"> <meta name="keywords" content="idot,goudspide,hisse-et-oh,hisseo,heoblog,blog,bonnevitesse,greffe de rein,rein,donneur vivant,don,don d'organe,organe,bricolage,aviation,construction,systÞme D,+criture,nouvelle,essais,po+sie,moto,harley davidson"> <link rel="shortcut icon" href="favime.gif"> <style type="text/css" > <!-- html { padding:0px; margin:0px; } body { background-color: #e1ddd9; font-size: 12px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#564b47; padding:0px 20px; margin:0px; } p, h2 { padding:10px; margin:0px } h1 { font-size: 11px; text-transform:uppercase; text-align: right; color: #564b47; background-color: #90897a; padding:5px 15px; margin:0px } h2 { font-size:14px; padding-top:10px; text-transform:uppercase; color: #564b47; background-color: transparent; } a { color: #ff66cc; font-size: 11px; background-color:transparent; text-decoration: none; } #menu { position: absolute; width: 200px; left: 20px; background-color: #ffffCC; padding:0px; margin:0px } #content { margin-left: 200px; background-color:#fff; overflow: auto; } img { margin:10px; border:none; } /*RAJOUTER LES DIV INFO ICI AUSSI*/ #info1 ,#info2, #info3, #info4, #info5{ position: absolute; left: 400px; top: 250px; width: 350px; z-index: 1; color: #c8ddda; background-color: #242424; visibility: hidden; border: solid 2px #222; filter:alpha(opacity=75); -moz-opacity:0.75; opacity: 0.75; font-weight: bold; text-align: center; font-family: Courier, "Courier New", monospace;} </style> <script type="text/javascript"> 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> </head> <body> <div id="menu"> <h1>PAGE d'ACCUEIL</h1> <p>Ce site est en construction, la construction évoluera au fur et à mesure de mon temps disponible et de la "matière première" que je pourrai y mettre.<br> <img src="travaux.gif"><br></p> <hr> <p>Pour vous mettre un peu l'eau à la bouche voici la photo du mariage de Michel et Colette IDOT (Née LECAT) je vous laisse découvrir qui est qui, la réponse viendra plus tard ;-)</p> </div> <hr> <div id="content"> <p>Pour vous mettre un peu l'eau à la bouche voici la photo du mariage de Michel et Colette IDOT (Née LECAT) je vous laisse découvrir qui est qui, la réponse viendra plus tard ;-)</p> <br> <img src="numeriser0005.jpg" usemap="#Map" width="1000" height="728"> <map name="Map" id="Map"> <area shape="circle" href="#" coords="25,400,13" onmousemove="afficher('info1')" onmouseout="masquer('info1')"> <area shape="circle" href="#" coords="58,395,13" onmousemove="afficher('info2')" onmouseout="masquer('info2')"> <area shape="circle" href="#" coords="90,415,13" onmousemove="afficher('info3')" onmouseout="masquer('info3')"> <area shape="circle" href="#" coords="86,471,13" onmousemove="afficher('info4')" onmouseout="masquer('info4')"> <area shape="circle" href="#" coords="120,400,13" onmousemove="afficher('info5')" onmouseout="masquer('info5')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_6.htm" coords="120,457,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <!--LES NUMERO DES DIV INFO A METTRE --> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_7.htm" coords="133,492,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_8.htm" coords="149,393,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_9.htm" coords="165,416,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_10.htm" coords="178,476,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_11.htm" coords="207,331,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_12.htm" coords="219,371,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_13.htm" coords="215,460,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_14.htm" coords="232,317,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_15.htm" coords="257,325,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_16.htm" coords="273,349,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_17.htm" coords="249,454,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_18.htm" coords="270,462,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_19.htm" coords="293,299,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_20.htm" coords="346,292,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_21.htm" coords="327,334,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_22.htm" coords="318,370,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_23.htm" coords="342,439,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_24.htm" coords="329,474,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_25.htm" coords="366,475,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_26.htm" coords="385,328,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_27.htm" coords="375,358,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_28.htm" coords="392,446,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_29.htm" coords="416,498,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_30.htm" coords="419,310,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_31.htm" coords="445,332,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_32.htm" coords="428,367,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_33.htm" coords="480,297,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_34.htm" coords="504,330,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_35.htm" coords="490,352,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_36.htm" coords="475,367,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_37.htm" coords="496,398,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_38.htm" coords="536,301,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_39.htm" coords="539,361,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_40.htm" coords="573,438,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_41.htm" coords="599,294,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_42.htm" coords="568,316,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_43.htm" coords="587,351,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_44.htm" coords="632,329,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_45.htm" coords="643,360,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_46.htm" coords="640,439,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_47.htm" coords="638,490,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_48.htm" coords="668,298,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_49.htm" coords="709,287,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_50.htm" coords="694,319,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_51.htm" coords="692,352,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_52.htm" coords="682,441,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_53.htm" coords="712,446,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_54.htm" coords="728,475,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_55.htm" coords="783,275,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_56.htm" coords="756,323,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_57.htm" coords="747,355,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_58.htm" coords="769,424,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_59.htm" coords="776,467,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_60.htm" coords="806,463,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_61.htm" coords="807,343,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_62.htm" coords="829,432,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_63.htm" coords="845,461,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_64.htm" coords="867,379,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_65.htm" coords="894,422,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_66.htm" coords="913,365,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_67.htm" coords="943,412,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_68.htm" coords="966,381,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <area shape="circle" href="fiche%20mariage%20idot_lecat/tete_69.htm" coords="987,378,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> <!--LES NUMERO DES DIV INFO A METTRE --> </map> <hr> <p>Et une autre , mais c'est plus particulier </p> <br> <img src="14_18.jpg"> <br> <hr> <p>Pour m'‚crire, pour me faire part de vos remarques ou m'aider … corriger une ortographe r‚calcitrante, n'h‚sitez pas, le formulaire estfait pour ça! <br>je pourrais vous r‚pondre si vous me laissez votre adresse mail ;-) <br>merci. </p> <br> <img src="animsmile1.gif"> <br> <p> <a href="mail.php">Ecrire … GOUDSPIDE</a> </p> <br> <hr> <!--LES DIV INFO DEBUT--> </div> <div id="info1"> <p>Voici Mme SANSOZ Yvette, femme de SANSOZ René. </p> </div> <div id="info2"> <p>Voici Mr SANSOZ René, marié à Yvette SANSOZ </p> </div> <div id="info3"> <p>Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié) </p> </div> <div id="info4"> <p>Voici Mme SANSOZ Yvette, femme de SANSOZ René. </p> </div> <div id="info5"> <p>Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié) </p> <!-- METTRE LES DIV INFO RESTANTES ICI --> <!--LES DIV INFO FIN--> </body> </html>
a+ -
Modérateurok alors bn courage et reviens avec unnouveau post pour d'éventuelles autres questions ...
@ + b g -
ok,
je vais détailler la page en lien, et je comprend bien l'utilité pour les moteurs,
effectivement, RAD à fait plus que m'aider il m'a mâché le travail et débuggé mes bêtises
merci à vous deux -
ContributeurSALUT bg
tu as raison ! ;-)) je met le code de la version exemple qui est ICI et qui est valide W3C XHTML 1.0 Strict
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Le site de la famille IDOT</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" /> <meta name="description" content="Le site de la famille IDOT" /> <meta name="Copyright" content="?2008 philippe IDOT" /> <meta name="ROBOTS" content="all" /> <meta name="Publisher" content="IDOT" /> <meta name="keywords" content="idot,goudspide,hisse-et-oh,hisseo,heoblog,blog,bonnevitesse,greffe de rein,rein,donneur vivant,don,don d'organe,organe,bricolage,aviation,construction,syst? D,+criture,nouvelle,essais,po+sie,moto,harley davidson" /> <link rel="shortcut icon" href="favime.gif" /> <style type="text/css" > /*<![CDATA[*/ html { padding:0px; margin:0px; } body { background-color: #e1ddd9; font-size: 12px; font-family: Verdana, Arial, SunSans-Regular, Sans-Serif; color:#564b47; padding:0px 20px; margin:0px; } p, h2 { padding:10px; margin:0px } h1 { font-size: 11px; text-transform:uppercase; text-align: right; color: #564b47; background-color: #90897a; padding:5px 15px; margin:0px } h2 { font-size:14px; padding-top:10px; text-transform:uppercase; color: #564b47; background-color: transparent; } a { color: #ff66cc; font-size: 11px; background-color:transparent; text-decoration: none; } #menu { position: absolute; width: 200px; left: 20px; background-color: #ffffCC; padding:0px; margin:0px } #content { margin-left: 200px; background-color:#fff; overflow: hidden;} img { margin:10px; border:none; } /*RAJOUTER LES DIV INFO ICI AUSSI*/ #info1 ,#info2, #info3, #info4, #info5, #info6,#info7, #info8, #info9, #info10, #info11{ position: absolute; left: 400px; top: 250px; width: 350px; z-index: 1; color: #c8ddda; background-color: #242424; visibility: hidden; border: solid 2px #222; filter:alpha(opacity=75); -moz-opacity:0.75; opacity: 0.75; font-weight: bold; text-align: center; font-family: Courier, "Courier New", monospace;} /*]]>*/ </style> <script type="text/javascript"> 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> </head> <body> <div id="menu"> <h1>PAGE d'ACCUEIL</h1> <p>Ce site est en construction, la construction évoluera au fur et à mesure de mon temps disponible et de la "matière première" que je pourrai y mettre.<br /> <img src="travaux.gif" alt="traveaux" /><br /></p> <hr /> <p>Pour vous mettre un peu l'eau à la bouche voici la photo du mariage de Michel et Colette IDOT (Née LECAT) je vous laisse découvrir qui est qui, la réponse viendra plus tard ;-)</p> </div> <hr /> <div id="content"> <p>Pour vous mettre un peu l'eau à la bouche voici la photo du mariage de Michel et Colette IDOT (Née LECAT) je vous laisse découvrir qui est qui, la réponse viendra plus tard ;-)</p> <br /> <img src="numeriser0005.jpg" usemap="#Map" width="1000" height="728" alt="famille" /><map name="Map" id="Map"> <area shape="circle" href="#" coords="25,400,13" alt="map" onmousemove="afficher('info1')" onmouseout="masquer('info1')" /> <area shape="circle" href="#" coords="58,395,13" alt="map" onmousemove="afficher('info2')" onmouseout="masquer('info2')" /> <area shape="circle" href="#" coords="90,415,13" alt="map" onmousemove="afficher('info3')" onmouseout="masquer('info3')" /> <area shape="circle" href="#" coords="86,471,13" alt="map" onmousemove="afficher('info4')" onmouseout="masquer('info4')" /> <!--LES NUMERO DES DIV INFO A METTRE --> <area shape="circle" href="#" coords="120,400,13" alt="map" onmousemove="afficher('info5')" onmouseout="masquer('info5')" /> <area shape="circle" href="#" coords="120,457,13" alt="map" onmousemove="afficher('info6')" onmouseout="masquer('info6')" /> <area shape="circle" href="#" coords="133,492,13" alt="map" onmousemove="afficher('info7')" onmouseout="masquer('info7')" /> <area shape="circle" href="#" coords="149,393,13" alt="map" onmousemove="afficher('info8')" onmouseout="masquer('info8')" /> <area shape="circle" href="#" coords="165,416,13" alt="map" onmousemove="afficher('info9')" onmouseout="masquer('info9')" /> <area shape="circle" href="#" coords="178,476,13" alt="map" onmousemove="afficher('info10')" onmouseout="masquer('info10')" /> <area shape="circle" href="#" coords="207,331,13" alt="map" onmousemove="afficher('info11')" onmouseout="masquer('info11')" /> <area shape="circle" href="12.htm" coords="219,371,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="13.htm" coords="215,460,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="14.htm" coords="232,317,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="15.htm" coords="257,325,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="16.htm" coords="273,349,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="17.htm" coords="249,454,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="18.htm" coords="270,462,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="19.htm" coords="293,299,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="20.htm" coords="346,292,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="21.htm" coords="327,334,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="22.htm" coords="318,370,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="23.htm" coords="342,439,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="24.htm" coords="329,474,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="25.htm" coords="366,475,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="26.htm" coords="385,328,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="27.htm" coords="375,358,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="28.htm" coords="392,446,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="29.htm" coords="416,498,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="30.htm" coords="419,310,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="31.htm" coords="445,332,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="32.htm" coords="428,367,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="33.htm" coords="480,297,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="34.htm" coords="504,330,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="35.htm" coords="490,352,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="36.htm" coords="475,367,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="37.htm" coords="496,398,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="38.htm" coords="536,301,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="39.htm" coords="539,361,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="40.htm" coords="573,438,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="41.htm" coords="599,294,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="42.htm" coords="568,316,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="43.htm" coords="587,351,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="44.htm" coords="632,329,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="45.htm" coords="643,360,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="46.htm" coords="640,439,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="47.htm" coords="638,490,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="48.htm" coords="668,298,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="49.htm" coords="709,287,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="50.htm" coords="694,319,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="51.htm" coords="692,352,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="52.htm" coords="682,441,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="53.htm" coords="712,446,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="54.htm" coords="728,475,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="55.htm" coords="783,275,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="56.htm" coords="756,323,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="57.htm" coords="747,355,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="58.htm" coords="769,424,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="59.htm" coords="776,467,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="60.htm" coords="806,463,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="61.htm" coords="807,343,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="62.htm" coords="829,432,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="63.htm" coords="845,461,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="64.htm" coords="867,379,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="65.htm" coords="894,422,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="66.htm" coords="913,365,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="67.htm" coords="943,412,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="68.htm" coords="966,381,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <area shape="circle" href="69.htm" coords="987,378,13" alt="map" onmousemove="afficher('info')" onmouseout="masquer('info')" /> <!--LES NUMERO DES DIV INFO A METTRE --></map> <hr /> <p>Et une autre , mais c'est plus particulier</p> <br /> <img src="14_18.jpg" alt="message" /><br /> <hr /> <p>Pour m'écrire, pour me faire part de vos remarques ou m'aider à corriger une ortographe récalcitrante, n'hésitez pas, le formulaire est fait pour ça!<br /> je pourrais vous répondre si vous me laissez votre adresse mail ;-)<br /> merci.</p> <br /> <img src="animsmile1.gif" alt="SANSOZ construc" /><br /> <p><a href="mail.php">Ecrire . GOUDSPIDE</a></p> <br /> <hr /> <!--LES DIV INFO DEBUT--></div> <div id="info1"> <p>Voici Mme SANSOZ Yvette, femme de SANSOZ René.</p> <img src="7.png" alt="SANSOZ Yvette" /></div> <div id="info2"> <p>Voici Mr SANSOZ René, marié à Yvette SANSOZ</p> </div> <div id="info3"> <p>Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)</p> </div> <div id="info4"> <p>Voici Mme SANSOZ Yvette, femme de SANSOZ René.</p> </div> <div id="info5"> <p>Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)</p> </div> <div id="info6"> <p>Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)</p> </div> <div id="info7"> <p>Voici Mme SANSOZ Yvette, femme de SANSOZ René.</p> </div> <div id="info8"> <p>Voici Mr SANSOZ René, marié à Yvette SANSOZ</p> </div> <div id="info9"> <p>Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)</p> </div> <div id="info10"> <p>Voici Mme SANSOZ Yvette, femme de SANSOZ René.</p> </div> <div id="info11"> <p>Voici Melle BOULANGER jeanine, fille de Boulanger Lucien marié avec Boulanger Madeleine (née IDOT, soeur de IDOT Michel le marié)</p> </div> <!-- METTRE LES DIV INFO RESTANTES ICI --> <!--LES DIV INFO FIN--> </body> </html>
si d autres veullent s en servir c est mieux !
A+ -
Modérateurce que RAD t'as aidé à faire est super !
mets ceci à la place :<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
elle sert à faire reconnaître le doctype de la apge pour les moteurs
http://www.commentcamarche.net/faq/sujet 9060 les balises dans la partie head
@+ b g-
C'est absolument génial ce tuto ! Merci à tous les intervenants !
Je l'ai mis à ma sauce sur une carte interactive... Mais comment faire pour placer l'info bulle légèrement au-dessus de la zone réactive si lesdites zones sont largement éparpillées sur une carte de grand format ?
D'avance, merci beaucoup @ tous !
-
-
Heu BG62 si tu peux éclairer ma lanterne, j'ai mis "bêtement" ce que m'a proposer RAD, mais je ne connais pas l'utilité de cette phrase en début et qu'a t elle d'incomplet et pouraquoi,
quelle fonction a t elle ?
merci d'avance -
Modérateureffectivement : super ce travail sur la photo !!!
attention :<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
... incomplet
et quand on clique sur un lien la page dans laquelle on arrive ne comporte même pas cela ... -
affirmatif
c'est résolu ,-)
:-)) -
ContributeurOK ;-))
je met en résolus alors !!
a+ -
impeccable nickel,
je ne le dirais pas encore assez merci beaucoup !!!!!!!
respect de la part d'un béotien ;-) -
ok je reprend le ligne
merci encore,
je reviens dire ce que ça donne, mais y a pas de raison :-) -
Contributeurc est normal tu as fais un erreur pour les liens !!
voila ce que tu as mis<area shape="circle" href="fiche%20mariage%20idot_lecat/tete_1.htm" #"coords="25,400,13" onmousemove="afficher('info1')" onmouseout="masquer('info1')">
et voila ce qu il faudrais !!<area shape="circle" href="fiche%20mariage%20idot_lecat/tete_1.htm" coords="25,400,13" onmousemove="afficher('info1')" onmouseout="masquer('info1')">
enleve tout les #" -
je reviens à la charge ;-(
les bulles et le clic vers les pages marchent pas non plus,
encore un oublis ???? de ma part quelque part ?? -
te faches pas :-)
j'ai zappé, je fais de suite, merci RAD ZONE je comprend vite mais faut m'expliquer longtemps ;-) -
Contributeurje tai dis !!!
enleve le <!--
au debut du style embarque !<style type="text/css" > <!-- celle la !!!!!! html { padding:0px; margin:0px; } -
hello à tous,
ça y est j'ai réussis à mettre tout à jours, et ça marche très bien comme je le voulais sauf que ça marche pas sour internet exploreur :-( sous mozilla oui,
une idée ???
je redonne le lien du site pour voir le code source et si vous trouvez d'où viens le problème je crois que je serais combler, et surtout ma famille utilisatrice,
http://familleidot.free.fr/index.html
j'avoue ne pas comprendre pourquoi ce n'est pas reconnu en fonction des navigateur, je suis dépassé là
merci d'avance pour une solution -
ouf , ça yest, j'ai un peu cheché pour la bonne syntaxe,
faut bien me faire chercher un ;-)
c'est nickel, exactement ce que je voulais
j'ai plus qu'à reprendre l'ensemble des lignes et les info , mais ce n'est pas un problème un peu de temps
merciiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii -
ContributeurTu remet juste un lien a la place des # dans les
<area shape="circle" href="#" coords="987,378,13" onmousemove="afficher('info')" onmouseout="masquer('info')"> -
bon je commence les modif avec pad++
ok je comprend, mais j'aurai souhaiter que je puisse aussi garder la possibilité que la main me renvois vers la fiche de la personne, permettant d'avoir pas mal d'info sur la personne,
avec cette programmation, s'affiche bien un texte, nickel mais je n'ai plus le click renvoyant vers la page de la personne, :-(
est impossible ??? -
ouf, je ne desppérait pas de tes cométences
un bon pont pour toi, c'est génial, je ne pourrai jamais te renvoyer l'ascenseur en infrmatique, mais dans d'autre domiane c'est possible bricolage ou autre, alors n'hésite pas ;-)
- 1
- 2
- 3