[Jiao]

Bonjour,

Je souhaiterais savoir s'il était possible de changer l'image que l'on affiche suivant la zone de l'image sur laquelle est la souris.
En gros j'ai une image d'un plan défini en plusieurs zones et je voudrais qu'en fonction de la zone de cette image sur laquelle la souris passe je change l'image pour mettre une même image mais avec la zone coloré pour la mettre en valeur.

Je vous remercie d'avance !

[Chilly]

Si j'ai bien compris ta question, tu as besoin de créer une <map> avec des zones (<area>) dedans, et d'utiliser l'événement onMouseOver pour redéfinir la valeur de "src" en rentrant dans une zone et onMouseOut pour remettre l'image de base à la sortie de la zone.

[the lsd]

Tu peux regarder par là : http://www.pcastuces.com/pratique/web/scripts/html6.htm

Ça te permettras de faire tes zones. Par contre, bon courage si tu le fais à la main ! Je sais que Dreamwaver permet d'automatiser ça, d'autres doivent le faire également.

Ensuite, un peu de javascript (onMouseOver et getElementById) pourra te permettre de changer l'image. Je ne sais pas si c'est la meilleure idée (en terme de lisibilité, de compatibilité et autres), mais j'imagine que ça doit fonctionner.

Enjoy

The lsd

Edit : erf t'as été plus rapide Chilly, mais moi je donne un lien et le getElementById

[Iansus]

En fait, c'est plus simple, et je crois même pas qu'on aie besoin de getElementById :
Il fait son image Map, crée ses Areas, et dans la balise <area>, il met l'attribut onMouseOver='tonimage.src=\'adresse_de_l_image\''.

Après, tu peux utiliser le getElementById pour référencer l'image dans la page.

[Jiao]

Je vous remercie pour vos réponses !

J'ai réussi à trouver un petit code sur internet que j'ai modifié et il marche très bien.
Cependant j'ai voulu également tester l'idée de Iansus, j'ai donc le code suivant avec les zones qui fonctionnent bien mais il ne se passe rien au passage de la souris.

Code:

<img src="photo.jpg" width="600" height="480" usemap="#carte" border="0" name="foto">
<map name="carte">
<area shape="rect" coords="0,0,43,40" href="#" onMouseOver="foto.src=photo2.jpg">
<area shape="rect" coords="0,51,36,95" href="#" onMouseOver="foto.src=photo3.jpg">
<area shape="rect" coords="42,83,85,120" href="#" onMouseOver="foto.src=photo2.jpg">
</map>

[Iansus]

Code:

<img src="photo.jpg" width="600" height="480" usemap="#carte" border="0" id="foto">
<map name="carte">
<area shape="rect" coords="0,0,43,40" href="#" onMouseOver="document.getElementById('foto').src='photo2.jpg'">
<area shape="rect" coords="0,51,36,95" href="#" onMouseOver="document.getElementById('foto').src='photo3.jpg'">
<area shape="rect" coords="42,83,85,120" href="#" onMouseOver="document.getElementById('foto').src='photo2.jpg'">
</map>

Là ça devrait marcher !

[the lsd]

Je connais pas assez le JS, mais le mot clé this permet surement de pas utiliser getElementById. Mais je sais pas lequel est le mieux

Enjoy

The lsd

[Iansus]

En fait, this ferait ici référence à balise area, et pas img, donc il aurait fallu utiliser la propriété parent, mais avec ces notions là, je suis aussi perdu !

[Jiao]

Merci Iansus ça marche très bien 

[Iansus]

De rien !

[Jiao]

Bon encore un petit truc, toujours sur mon plan j'aimerais que quand l'utilisateur passe sa souris sur un endroit précis on ai un aperçu d'un photo sans que celle-ci soit ouverte dans une nouvelle fenêtre.
J'ai cherché un peu et je suis tombé sur un truc que j'ai essayé :

Code:

<area shape="rect" coords="42,83,85,120" href="#" onMouseOver="pop0('<IMG SRC='photo2.jpg'>')">

Mais bon ça ne fait rien, ais-je fait une erreur ou alors il faudrait s'y prendre autrement ?

[akway]

Salut,

Qu' est ce que la fonction pop0() ?

[Iansus]

Après tout dépend de la fonction pop0(). Je pense que celle-ci crée une <div> flottante qui contient l'image

[Jiao]

effectivement si je vous donne la fonction pop0 ça sera plus pratique, désolé de l'oublie

Code:

function pop0(contenu)
{
document.getElementById("bulleimg").innerHTML = "<table border='0'><tr><td>"+contenu+"</td></tr></table>";
}

Sachant que j'ai mis mon image dans un <div id=bulleimg>

[Chilly]

J'ai cherché un peu et je suis tombé sur un truc que j'ai essayé :

Code:

<area shape="rect" coords="42,83,85,120" href="#" onMouseOver="pop0('<IMG SRC='photo2.jpg'>')">

Tu as un problème d'apostrophes. Il faudrait les échapper en mettant \ devant.
onMouseOver="pop0('<IMG SRC=\'photo2.jpg\'>')">