Discussion :

[pit9.76]

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...

[Invité]

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

tu fais 2 classes :

Code :

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

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 :

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

<img class="imageOff"

puis tu switch entre tes 2 styles :

Code :

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

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 (IE inclus, pour une fois )

[marsupix]

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

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

sinon t'as aussi:

Code :

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

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 et si IE est pas content il a qu'a de se mettre aux standards
(IE ne prend :hover que sur les ancres donc met tes img dans des <a> avec une classe pour qu'il soit content...)

[pit9.76]

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 ?

[Seb19]

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 ?

[pit9.76]

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

Code :

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

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>