Changer d'image quand la souris survole la zone

**laurentSc** · 28/01/2009, 09h29

Bonjour,

je voudrais changer l'image affichée quand la souris la survole (pour simuler un lien, bien que ce soit une image ; en fait, cette image ne contient que du texte, et j'ai déjà créé une "map") ; je pensais utiliser l'événement onMouseOver, mais en fait, ce que j'ai fait ne marche pas. Voici mon code :

Code :

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

1
2
3
4
5
6
7
8
9
10
 <img src="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/images/accesswp.gif" width="600" height="50" border="0" usemap="#map" /><map name="map">
      <area shape="rect"
 onmouseover="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/images/accesSWPblue1.gif"
 onmouseout="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/images/AccesSWP.gif" coords="1,1,188,18"
 href="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/Procedure_acces_recherche_dans_SWP.doc">
      <area shape="rect" coords="200,3,392,21"
 href="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/Procedure_commande_pour_Non-Expert.doc">
      <area shape="rect" coords="403,4,567,19"
 href="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/Procedures_commande_pour_Expert.doc">
      </map>

Comment faire pour que ça marche ?

**copin** · 28/01/2009, 10h07

Salut,

Sauf erreur de ma part, mettre une URL dans un mouseover ou mouseout n'a pas de sens.

Pour effectuer la meme chose, je procédérai de la façon suivante, tu créé un div, qui correspondrait ici à ton image par défaut.

Code :

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

1
2
3
 
<div class="encarimage" id="encartimage">
	</div>

pour lequel tu définis un style avec ton image par défaut en fond.

Dans ce div tu places le nombre de lien que tu souhaites avec dans les mouseout/mouseover l'appelle à une fonction javascript qui change le style par défaut du div lors du survol et qui replace le style par défaut si pas de survol de souris sur les liens

Les styles que tu charges au survol contiennent en background les images à afficher en lieu est place de ton image par défaut

Le code des liens

Code :

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

1
2
3
4
 
<a href="#" onmouseover="menu('style1')" onmouseout="menu('none')"><img src="img/image_lien1.png"/></a>
<a href="#" onmouseover="menu('style2')" onmouseout="menu('none')"><img src="img/image_lien2.png" /></a>
<a href="#" onmouseover="menu('style3')" onmouseout="menu('none')"><img src="img/image_lien3.png"/></a>

Les styles

Code :

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

1
2
3
4
5
6
 
div.encarimage{float:left;background:url(../img/bg/image_defaut.png) no-repeat left top;height:279px;width:341px;}
 
div.style1{float:left;background:url(../img/bg/image1.png) no-repeat left top;height:279px;width:341px;}
div.style2{float:left;background:url(../img/bg/image2.png) no-repeat left top;height:279px;width:341px;}
div.style3{float:left;background:url(../img/bg/image3.png) no-repeat left top;height:279px;width:341px;}

Et le script qui effectue le change de style

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
 
function menu(val){
if(val=='style1')
	{
		y = document.getElementById('encartimage').className='style1';
	} 
else if(val=='style2')
	{
		y = document.getElementById('encartimage').className='style2';
	} 
else if(val=='style3')
	{
		y = document.getElementById('encartimage').className='style3';
	} 
 
 
}

J'ai pas testé il est possible que une ou deux erreurs se soient glissé. J'ai utiliser le principe pour un site pro et cela fonctionne très bien.

N'hésite pas à poser des questions.

**laurentSc** · 28/01/2009, 11h04

J'ai effectivement des questions : pour l'instant, ça ne marche pas. Voici mon code, inspiré de ce que tu m'as donné :

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 <div class="encarimage" id="encartimage">
      <a
 href="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/Procedure_acces_recherche_dans_SWP.doc"
 target="_blank" onmouseover="menu('style1')"
 onmouseout="menu('none')"><img
 src="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/images/AccesSWPblue1.gif"></a>
      <a
 href="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/Procedure_commande_pour_Non-Expert.doc"
 target="_blank" onmouseover="menu('style2')"
 onmouseout="menu('none')"><img
 src="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/images/AccesSWPblue1.gif"></a><a
 href="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/Procedures_commande_pour_Expert.doc"
 target="_blank" onmouseover="menu('style3')"
 onmouseout="menu('none')"><img
 src="http://docexterne.fr.schneider-electric.com/documentation/aidenormes/images/AccesSWPblue1.gif"></a>
      <style>
div.encarimage{float:left;background:url(http://docexterne.fr.schneider-electric.com/documentation/aidenormes/images/AccesSWP.gif)
no-repeat left top;height:279px;width:341px;}
div.style1{float:left;background:url(http://docexterne.fr.schneider-electric.com/documentation/aidenormes/images/AccesSWPblue1.gif)
no-repeat left top;height:279px;width:341px;}
div.style2{float:left;background:url(http://docexterne.fr.schneider-electric.com/documentation/aidenormes/images/AccesSWPblue1.gif)
no-repeat left top;height:279px;width:341px;}
div.style3{float:left;background:url(http://docexterne.fr.schneider-electric.com/documentation/aidenormes/images/AccesSWPblue1.gif)
no-repeat left top;height:279px;width:341px;}
      </style>
      <script language="javascript">
function menu(val){
if(val=='style1')
{
y = document.getElementById('encartimage').className='style1';
} else if(val=='style2')
{
y = document.getElementById('encartimage').className='style2';
} else if(val=='style3')
{
y = document.getElementById('encartimage').className='style3';
} }
      </script></div>

Pour l'instant, les 3 images sont identiques car je n'en ai créé qu'une seule.

Les pbs : on voit 3 fois l'image au lieu d'une seule fois ; les images sont encadrées ; on ne voit pas l'image "de fond" ; il ne se passe rien qd je survole. Vois-tu ce qui ne va pas ?

**copin** · 28/01/2009, 13h08

Blop,

Je viens de rejeter un oeil (cette fois en testant

). Je me suis aperçu d'une erreur ligne manquante dans le js.

Donc cette fois le code complet (et testé)

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 <script>
 function menu(val){
if(val=='style1')
        {
                y = document.getElementById('encartimage').className='style1';
        } 
else if(val=='style2')
        {
                y = document.getElementById('encartimage').className='style2';
        } 
else if(val=='style3')
        {
                y = document.getElementById('encartimage').className='style3';
        }
else if(val=='none')
        {
                y = document.getElementById('encartimage').className='encarimage';
        }  
 
}
 </script>
<style>
div.encarimage{float:left;background:url(img/bg/image_defaut.png) no-repeat left top;height:279px;width:341px;}
 
div.style1{float:left;background:url(img/bg/image1.png) no-repeat left top;height:279px;width:341px;}
div.style2{float:left;background:url(img/bg/image2.png) no-repeat left top;height:279px;width:341px;}
div.style3{float:left;background:url(img/bg/image3.png) no-repeat left top;height:279px;width:341px;}
 </style>
 
</head>
 
<body>
 
<div class="encarimage" id="encartimage">
<a href="#" onmouseover="menu('style1')" onmouseout="menu('none')"><img src="img/image_lien1.png"/></a>
<a href="#" onmouseover="menu('style2')" onmouseout="menu('none')"><img src="img/image_lien2.png" /></a>
<a href="#" onmouseover="menu('style3')" onmouseout="menu('none')"><img src="img/image_lien3.png"/></a>	
</div>
 
</body>
</html>

Je ne sais pas si c'est uniquement dans ton post ou également dans ton code. Mais j'avais oublié aussi de préciser de placer le script et les styles dans le head de ta page et le html dans le body.

N.B: Par contre, en local le temps de réponse est immédiat, en revanche en ligne il arrive qu'il y est un temps de réponse de 1 ou 2s, parfois le temps de réponse est nul ca dépend.

edit: J'ai pas pu tester à partir de ton code les liens vers les images ne sont pas bon. Ou bien les images ne sont plus en ligne.

**laurentSc** · 28/01/2009, 14h07

J'ai copié ton code et créé des images portant le même nom (3 ds img et 4 ds img/bg), mais ça ne veut tjs pas marcher ...
Quelle peut être la raison ??

**copin** · 28/01/2009, 16h27

Etrange...
Faudrait qu'une tierce personne test mon code.

Sinon ya les trucs idiots:
- Le js est-il activé sur ton navigateur?
- Est ce que tu mets bien les images un respectant l'arbo "img>bg>" dans les styles?
- Si tu modifies les chemins pour que ca corresponds à ton arbo est ce que tu modifie correctement tout les chemins vers les images ou les extensions des images (dans mon code en png)?

A part ca je vois pas c'est étrange!

**laurentSc** · 28/01/2009, 17h30

Pas si idiot que ça : j'ai pensé bien sûr à l'activation de js ; j'avoue que je ne sais plus où on fait ça, mais comme j'ai d'autres codes avec du js qui s'exécutent bien, donc je pense que c'est bon.
Pour les chemins, pour tester ton code, j'ai créé l'arborescence avec les images que tu avais prises...

**copin** · 29/01/2009, 09h17

Ca m'intrigue...

Quand tu dis que cela ne fonctionne pas. Tu as quoi comme rendu?
Pas d'image du tout?

EDIT: J'ai trouvé je recode et je te donne ca!

**copin** · 29/01/2009, 09h31

Je l'aurai un jour, JE l'aurai!

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
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
 <script>
 function menu(val){
if(val=='style1')
        {
                y = document.getElementById('encartimage').className='style1';
        } 
else if(val=='style2')
        {
                y = document.getElementById('encartimage').className='style2';
        } 
else if(val=='style3')
        {
                y = document.getElementById('encartimage').className='style3';
        }
else if(val=='none')
        {
                y = document.getElementById('encartimage').className='encarimage';
        }
 
}
 </script>
<style>
 
div.encarimage{float:left;background:url(img/bg/image_defaut.png) no-repeat left top;height:279px;width:341px;}
 
.contenuhphaut {float: left;width:590px;height:280px;padding:0 0 0 30px;/*margin: 5px 0 0 30px;*/margin: 5px 0 0 0;}
.contenuhphautpart ul {float:left;      margin:15px 0 0 -250px;display:inline;}
.contenuhphautpart ul li{margin:0 0 20px 0px;display:inline;float:left;} 
 
div.style1{float:left;background:url(img/bg/image1.png) no-repeat left top;height:279px;width:341px;}
div.style2{float:left;background:url(img/bg/image2.png) no-repeat left top;height:279px;width:341px;}
div.style3{float:left;background:url(img/bg/image3.png) no-repeat left top;height:279px;width:341px;}
 
img{border:0px;}
 </style>
 
</head>
 
<body>
 
 <div class="contenuhphaut">
	<div class="encarimage" id="encartimage">
	</div>
	<div class="contenuhphautpart">
	<ul>
		<li><h2><a href="#" onmouseover="menu('style1')" onmouseout="menu('none')"><img src="img/image_lien1.png"/></a></h2></li>
		<li><h2><a href="#" onmouseover="menu('style2')" onmouseout="menu('none')"><img src="img/image_lien2.png" /></a></h2></li>
		<li><h2><a href="#" onmouseover="menu('style3')" onmouseout="menu('none')"><img src="img/image_lien3.png"/></a></h2></li>
	</ul>
	</div>
</div>
 
 
 
</body>
</html>

En fait, faut mettre les lien non pas dans le div "encartimag" mais dans un second div qu'on superpose au premier en jouant avec la feuille de style.

Dis moi si ca fonctionne

**laurentSc** · 29/01/2009, 09h59

Pas de chance, ça ne marche tjs pas ; en fait, je vois bien les images "mg/image_lienx.png" et les liens, mais qd je survole, il ne se passe rien.

**copin** · 29/01/2009, 11h34

Bon on résume...

Tu vois l'image de fond par défaut du div encart ainsi que les images des liens du second div.
Par contre ensuite rien ne bouge!

Est ce que tu testes sous IE? Si oui moi sous IE7 j'ai un message qui m'indique qu'IE a restreint l'execution des script et controle activeX de la page.

Si j'autorise le contenu bloqué tout fonctionne sinon, tout reste fixe au survol des liens.

Est ce que tu autorise l'execution? ou est ce que par défaut le navigateur bloue l'execution sans te signaler le blocage?

Pour le moment je vois que ca!

**laurentSc** · 29/01/2009, 11h57

Moi, je ne suis que avec IE6 et je n'ose pas faire une mise à jour, vu que c'est un PC professionnel, et que c'est le support informatique qui s'occupe de ce genre de chose...
Sinon, je n'ai aucun message ; donc la seule possibilité, comme tu dis, c'est qu'il bloque sans prévenir (je ne savais même pas que ça pouvait arriver)

**copin** · 29/01/2009, 13h34

Je viens de tester le dernier code que j'ai posté sous IE6 et de mon côté ca fonctionne sans aucun probleme...

Ma science est dépassée.

Sinon, je n'ai aucun message ; donc la seule possibilité, comme tu dis, c'est qu'il bloque sans prévenir (je ne savais même pas que ça pouvait arriver)

A vérifier mais je crois que dans certains navigateur tu peux paramètrer l'action à réaliser par défaut. En cochant ou décochant l'option "Activer les controles activeX"

**laurentSc** · 29/01/2009, 16h38

Quand je clique sur le lien de ton MP, ça plante...
Sinon, tu parles d'une option "activer les contrôles active-x" : ça se trouve où ce truc ?

**copin** · 30/01/2009, 12h13

Pour l'URL j'ai mis un 'l' en trop au bout.
Tape .com ou lieu de .coml

Pour option "activer les contrôles active-x", j'ai regarder pour IE 6 ya rien. Je dois confondre avec FF.

**laurentSc** · 30/01/2009, 13h23

En fait, ça plante aussi avec l'URL en ".com"...

**copin** · 02/02/2009, 09h27

Re,

Le problème ne provient pas du code en lui meme alors...
Peut etre de la config du poste ou des droits restreints sur le serveur d'accès Internet de ton taf.

**laurentSc** · 02/02/2009, 09h39

OK, ds ce cas, je l'essaierai sur un autre PC (le PC perso à la maison) ; le pb, c'est que c'était pour l'utiliser au boulot (je suis webmaster de sites intranet), donc si ça ne marche pas sur mon PC, c'est foutu...

**laurentSc** · 04/02/2009, 17h26

J'ai fini par réussir à faire exactement ce que je voulais avec ce code :

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
18
19
20
21
<img
 src="../images/AccesSWPbleu.gif"
 usemap="#map" name="img" border="0" height="50"
 width="600">
<map name="map">
<area
 shape="rect" coords="53,19,215,38"
 href="../Procedure_acces_recherche_dans_SWP.doc" target=_blank
 onmouseover="document.img.src='../images/AccesSWPbleu1.gif'"
 onmouseout="document.img.src='../images/AccesSWPbleu.gif'">
 
 
<area shape="rect" coords="223,19,385,38"
 href="../Procedure_commande_pour_Non-Expert.doc" target=_blank
 onmouseover="document.img.src='../images/AccesSWPbleu2.gif'"
 onmouseout="document.img.src='../images/AccesSWPbleu.gif'">
<area shape="rect" coords="393,19,537,38"
 href="../Procedures_commande_pour_Expert.doc" target=_blank
 onmouseover="document.img.src='../images/AccesSWPbleu3.gif'"
 onmouseout="document.img.src='../images/AccesSWPbleu.gif'">
</map>

Le truc était de rajouter un nom ds l'image de la map (j'ai trouvé la solution par hasard, en allant voir un tuto sur le javascript)...

**copin** · 05/02/2009, 09h26

Salut,

Content pour toi... En plus le code est vachement plus simple que ce que je proposai...

Mais par curiosité t'as essayé de tester sur un autre poste hors réseau?

Je vais être critique jusqu'au bout... pense à fermer la balise img avec un /

Ciao

Changer d'image quand la souris survole la zone

HTML

Discussions similaires

Partager

Partager