Discussion :

[sandrine]

Bonjour,

Alors voila je voudrais faire 2 actions en même temps mais je n'arrive pas a les combiner.

Dans un tableau, une image qui change lorsqu'on passe la souris dessus pour afficher une autre image qui comporte un découpage en 2. Chaque partie de la seconde image est un lien vers une page.
J'espère que vous avez compris l'enchainement.

J'en suis arrivée a ce code la:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
 <TD ID="M1" 
   	   title="Menu1"
   	   width=116  heignt=138 
   	   valign=center 
   	   usemap="#LIENMENU"
   	   background='Images/image.png' 
   	   onMouseOver="document.getElementById('M1').style.backgroundImage='url(Images/menu.png)';"
   	   onMouseOut="document.getElementById('M1').style.backgroundImage='url(Images/image.png)';">
       <MAP name="LIENMENU">
             <AREA shape="rect" coords="0,0,116,60" 
                   title="Lien1" 
                   href="#Lien1">
             <AREA shape="rect" coords="0,61,116,138" 
                   title="Lien2" 
                   href="#Lien2">
       </MAP>
   </TD>

Les images se changent bien, mais l'image n'est pas coupée en 2 zone. La MAP ne fonctionne pas.
J'ai essayer diverse chose, soit le MAP marche pas soit c'est le changement d'image.

Je n'arrive pas a combiner les 2. Est ce possible, peut etre avec une autre technique?

PS: je suis novice en CSS et javascript

Merci d'avance de votre aide

Sandrine

[razily]

pourquoi tu ne fais pas en jquery :
moi je l'ai fait et je suis arrivé à çà :
http://hpics.li/7f43c6e

sauf que moi mon problème cette carte connait des problèmes sous IE8 et inférieure

[NoSmoking]

Bonjour,
l'utilisation de l'attribut USEMAP ne s'applique qu'aux balises IMG, en conséquence il te faut mettre ton image de fond de la TD dans la TD et lui affecter l'attribut USEMAP.

Il te faut également transférer vers l'IMG la gestion de tes événements.

nota : la balise USEMAP peut se trouver n'importe où dans le document.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
  <tr>
    <td>
      <img src="Images/image.png" width="116"  heigth="138" usemap="#LIENMENU"
        onmouseover="this.src='Images/menu.png';"
        onmouseout ="this.src='Images/image.png';">
    </td>
  </tr>
</table>
<map name="LIENMENU">
  <area shape="rect" coords="0,0,116,60"    title="Lien1"  href="#Lien1">
  <area shape="rect" coords="0,61,116,138"  title="Lien2"  href="#Lien2">
</map>

nota 2 : profites en pour passer au HTML moderne , je parle de l'écriture du code.

[sandrine]

Merci razily mais mon image n'est pas une carte, c'est un simple image coupée en 2 zones

Merci NoSmoking, par contre j'avais essayer cette technique sur l'image qui fonctionne sous IE, mais elle ne fonctionne pas avec firefox (MAP fonctionne mais les images changement pas)
D'ou mes lignes ci dessous car je n'ai pas trouver l'équivalent sur l'image et c'est pour cela que j'ai finit sur les paramètre du TD:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
onMouseOver="document.getElementById('M1').style.backgroundImage='url(Images/menu.png)';"
   	   onMouseOut="document.getElementById('M1').style.backgroundImage='url(Images/image.png)';">

nota 2 : profites en pour passer au HTML moderne , je parle de l'écriture du code.

Que veux tu dire ? le HTML moderne?

[sandrine]

Solution vraiment toute bête trouvé pour firefox:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<table>
  <tr>
    <td>
      <img src="Images/image.png" width="116"  heigth="138" usemap="#LIENMENU">
    </td>
  </tr>
</table>
<map name="LIENMENU"
        onmouseover="this.src='Images/menu.png';"
        onmouseout ="this.src='Images/image.png';">
  <area shape="rect" coords="0,0,116,60"    title="Lien1"  href="#Lien1">
  <area shape="rect" coords="0,61,116,138"  title="Lien2"  href="#Lien2">
</map>

La gestion des onmouseover et onmouseout dans la balise MAP et ca fonctionne sous IE, Firefox, Chrome

Merci pour votre aide