Souris et Images

[Gils]

Hello ...
Voilà j'ai besoin de l'aide de pro... Sur une carte géo j'ai placé des "boutons" signalant quelques points. J'aimerais maintenant que si quelqu'un passe sa souris sur ces point une partie de ma carte se modifie.
En fait j'aimerai qu'au passage de la souris une nouvelle image apparaisse.. Mais.. la première image (bouton.gif) est plus petite que la seconde (epms.jpg) et la formule du style :
<img src="bouton.gif" alt="Click here to review portrait" border="0" onMouseOver='this.src="epms.jpg"' onMouseOut='this.src="bouton.gif"' width="36" height="36">
ne fonctionne pas...

J'espère avoir été clair mais comme je ne le suis pas moi même...
Bref ... Au secours

[julienr]

salut et bienvenue

à la vue de ton code tu pourrais essayer ceci :

Code: Tout sélectionner

<a href="#" onClick="return false;" onMouseOut="this.firstChild.src='bouton.gif';"  onMouseOver="this.firstChild.src='epms.jpg';"><img src="bouton.gif" alt="Click here to review portrait" border="0" width="36" height="36"></a>

[Gils]

Merci Julien mais ....

Lorsque je clique sur le bouton mon autre image apparait bien mais en tout petit...
En fait sur cette carte certain point sont signalés par des bouton (bouton.gif)..; En passant dessus j'aimerais qu'une partie de la carte se hachure...
Il faudrait donc que je puisse placer mon bouton et signaler l'emplacement et la taille de mon image qui doit apparaitre
Help Me

[julienr]

ok compris, alors voici comment je le verrais :

Code: Tout sélectionner

<div id="carte" style="width:100px;height:100px;background-url:url(carte.jpg);">

   <img id="carte1" src="bouton.gif" width="36" height="36" onmouseover="change(this.id)" onmouseout="change('carte');" style="position:absolute;left:10px;top:10px;">

   <img id="carte2" src="bouton.gif" width="36" height="36" onmouseover="change(this.id)" onmouseout="change('carte');" style="position:absolute;left:30px;top:50px;">

   <img id="carte3" src="bouton.gif" width="36" height="36" onmouseover="change(this.id)" onmouseout="change('carte');" style="position:absolute;left:60px;top:30px;">

</div>


Code: Tout sélectionner

function change( id ) {
  document.getElementById('carte').style.backgroundUrl = id+'.jpg';
}


à voir si cela peux fonctionner mais en gros le principe tu as un div avec une image en arriere plan: ta carte. Ensuite dans ce div tu positionne en absolue tes marqueurs en ajustant le left et le top. Après au survol de ces marqueurs en js tu change l'image d'arriere plan c'est à dire toute la carte. Ainsi tu peux pour chaque marqueur prévoir la carte achurée qui va bien, tu n'as pas de limite sauf peut être le poids de l'image de fond...