MAP interactive

[Basel]

Bonsoir,

J'ai une map cliquable sur mon site avec au passage de la souris un changement de couleur de la zone.

Je voudrais rajouter un petit texte quand je passe sur la zone et éventuellement faire apparaitre une autre image.
J'ai cru comprendre qu'il fallait utiliser alt et target j'ai fais quelque test mais j'ai pas trouvé pouvez vous m'aider

Cdlt,

[harry]

Je ne suis pas sûr mais moi quand je passe sur mes bannières ou boutons
c'est pas alt mais title que j'utilise.

[VF]

C'est quleque chose comme cel que tu voudrais faire : http://www.topofturkey.com/mapofcappadocia/index.html ?

[Basel]

Oui par contre je veux garder les effets que j'ai déjà. En fait il me manque l'affichage de la petite photo quand je passe dessus.
 
http://pilotariclubtarbais.servhome.org/cartographie/index.html


Cdlt,

[danyur]

pour l'affichage d'une image il faut rajouter des lignes à ton code d'image map.

<style type="text/css">
.pop2 { POSITION: absolute; VISIBILITY: hidden }
</style>



<DIV class=pop2 id=img></DIV>
<SCRIPT type="text/javascript">
if (document.getElementById){
box = document.getElementById("img").style;
if(navigator.appName.substring(0,3) == "Net")
document.captureEvents(Event.MOUSEMOVE);
document.onmousemove = pointer;
}
function poplink(contenu){
var content ="<TABLE border=1    CELLPADDING=1 CELLSPACING=1><TR><TD BGCOLOR=#ffffff><CENTER>"+contenu+"</CENTER></TD></TR></TABLE>";
if (document.getElementById)
{
document.getElementById("img").innerHTML =
content;
box.visibility = "visible";
}
}
function pointer(e)
{
var x = (navigator.appName.substring(0,3) == "Net") ? e.pageX : event.x+document.body.scrollLeft;
var y = (navigator.appName.substring(0,3) == "Net") ? e.pageY : event.y+document.body.scrollTop;
box.left = x+10;
box.top = y-10;
}
function closepopup()
{
if (document.getElementById)
box.visibility = "hidden";
}
</SCRIPT>
<img src="ton image mappable" width="640" height="318" border="0" usemap="#map" />

<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:dany -->
<area shape="rect" coords="238,113,287,172" title="le nom de la zone" HREF="" onMouseOver="poplink('<img src=ici ton image>')"; onmouseout="closepopup()"" />

box.left = x+ ou - le décalage de la miniature à l'horizontale
box.top = y+ ou - le décalage vertical

[Basel]

J'ajoute ce script dans le meme champ que celui existant ? à la fin ? Je fais quelque test en attendant

Cdlt,

[danyur]

toute la partie jusqu'à </script> se place avant ton image mappable.

je t'ai rajouté en dessous 1 zone cliquable à laquelle il faut rajouter
HREF="" onMouseOver="poplink('<img src=ici ta miniature>')"; onmouseout="closepopup()"" /> pour ouvrir une miniature en pop up.

cette partie est donc à ajouter à chacune de tes zones.

[Basel]

ok je teste ça en début de semaine prochaine merci encore Dany

Cdlt,