[W3C] mettre une image en relief

bonjour a tous !

voila j'ai trouvé une focntion javascript pour mettre en relief une image mais cela ne marche que sous IE.
comment faire pour mettre une image en relief lorsque la souris passe dessus, a la fois sous IE et sous firefox ?

merci d'avance...

:salut:

je ne suis pas sûr d'avoir bien saisi, mais si tu parles des histoires d'ombres qui donnent une impression de bouton "enfoncé" ou bouton "relaché", c'est simplement une question de bordure, qui peut être réglée en CSS :D

tu fais 2 classes :

Code:

---

1 2 3 4 5 6 7 8 9

.imageOn{ border-left: 1px solid; border-top: 1px solid; }   .imageOff{ border-right: 1px solid; border-bottom: 1px solid; }

---

tu definis ton image à Off au depart :

Code:

---

<img class="imageOff"

---

puis tu switch entre tes 2 styles :

Code:

---

onmouseover="this.className='imageOn'" onmouseout="this.className='imageOff'"

---

et c'est garanti sous n'importe quel navigateur qui gère CSS à peu près comme il faut :mrgreen: (IE inclus, pour une fois :lol:)

Citation:

---

Envoyé par torvalds17

...et c'est garanti sous n'importe quel navigateur qui gère CSS à peu près comme il faut :mrgreen: (IE inclus, pour une fois :lol:)

---

.. à condition que le visiteur ne désactive pas javascript :lol:

sinon t'as aussi:

Code:

---

1 2 3 4 5 6 7

img{ border:1px outset #000000; // ou ta couleur }   img:hover{ border:1px inset #000000; // ou ta couleur }

---

... valide w3c :wink: et si IE est pas content il a qu'a de se mettre aux standards :evil:
(IE ne prend :hover que sur les ancres donc met tes img dans des <a> avec une classe pour qu'il soit content...)

en fait j'ai une carte du monde et je veux que quand ma souris passe sur un continent celui ci change de couleur ou autre chose pour qu'on remarque qu'on est au dessus, c plus clair ?

Bonjour,

As tu essayé de découper ta mapmonde en images cliquables, puis avec les évènement onMouseOver et onMouseOut sur la balise <AREA> de modifier l'image affichée ?

merci bcp pour vos réponses, surtout seb puisque ça marche avec <AREA> :

Code:

---

1 2 3 4 5 6 7

<img src="test.bmp" usemap="#planisphere" name="plan"> <map name="planisphere"> <area shape="rect" href="index.php" coords="27,43,56,67" onmouseover="plan.src='test2.bmp'" onmouseout="plan.src='test.bmp'"> <area shape="rect" href="index.php" coords="105,124,148,152"> </map>

---