Survol d'image

**pegpeg** · 26/09/2008, 11h26

Bonjour,

J'utilise dreamweaver mx et j'ai voulu insérer dans mon site des images survolées pour mon menu.

J'ai donc fait deux images : une normale et une image survolée que j'ai enregistré dans mon dossier www puis images, base de travail.

Le problème c'est que le lien marche mais l'image ne change pas, elle reste sur l'image de base.

Que puis-je faire ?
Merci
(url supprimée à la demande de l'auteur)

**Jannus** · 26/09/2008, 11h36

Tu as vérfié les noms et chemins ? Tout est correct ?
Tu peux nous montrer ton code ?
(sinon pas facile de dire ce qui cloche

)

**pegpeg** · 26/09/2008, 11h41

Apparemment les noms et les chemins sont corrects. Je sais pas ce que c'est MM_swapImage ? mais bon c'est peut-être normal.
Voici le code. Merci d'avance pour ta réponse avec pas trop de thermes techniques (c'est pas mon métier ;=)

Code html :

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

1
2
3
<td height="91">&nbsp;</td>
<td><a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/base_de_travail/survol.jpg',1)"><img src="images/base_de_travail/menu_06.jpg" name="Image2" width="90" height="90" border="0"></a></td>
                <td>&nbsp;</td>

**HiRoN** · 26/09/2008, 11h51

Salut, et bienvenue sur le forum

Dreamweaver te génère le "survol" de l'image en javascript, ce qui n'est pas top.
Je te conseille plutôt de le faire en CSS.

Explications :

Entre les balises <head> & </head>, tu places :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style type="text/css">
.imgMenu { /* Image de Base */
display:block; /* Pour que l'image s'affiche */
background:url(img/test.jpg) no-repeat; /* Lien vers l'image 1 */
width:16px; height:16px; /* Taille Image 1 */
}
 
.imgMenu:hover { /* Cas Survol */
background:url(img/test2.jpg) no-repeat; /* Lien vers l'image 2 */
width:16px; height:16px;  /* Taille Image 2 */
}
</style>

En remplaçant le chemin vers l'image (a priori se sera : images/base_de_travail/ton_image.jpg)

Ensuite, dans ton code, tu remplaces :

Code HTML :

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

1
2
3
4
 
<td height="91">&nbsp;</td>
<td><a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/base_de_travail/survol.jpg',1)"><img src="images/base_de_travail/menu_06.jpg" name="Image2" width="90" height="90" border="0"></a></td>
<td>&nbsp;</td>

Par :

Code HTML :

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

1
2
3
4
 
<td height="91">&nbsp;</td>
<td><a href="index.htm" class="imgMenu"></a></td>
<td>&nbsp;</td>

Ce qui est quand même plus court

**pegpeg** · 26/09/2008, 18h27

Merci pour votre accueil et pour la réponse.
Par contre ça ne marche pas.... voilà ce que j'ai collé avant la fin du head :

Code css :

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

1
2
3
4
5
6
7
8
9
10
<style type="text/css">
.imgMenu { /* Image de Base */
display:block; /* Pour que l'image s'affiche */
background:url(image/base_de_travail/menu_06.jpg) no-repeat; /* Lien vers l'image 1 */
width:16px; height:16px; /* Taille Image 1 */
}
 
.imgMenu:hover { /* Cas Survol */
background:url(image/base_de_travail/survol.jpg) no-repeat; /* Lien vers l'image 2 */
width:16px; height:16px;  /* Taille Image 2 */

et voilà ce que j'ai mis à la place du code que je vous avais copié mon deuxième message :

Code html :

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

1
2
<td><a href="index.htm" class="imgMenu"></a></td>
<td>&nbsp;</td>

Qu'est ce que je n'ai pas fait ??

**HiRoN** · 27/09/2008, 16h56

As-tu bien mis :

Code :

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

</style>

Pour fermer le Code CSS ? (donc a mettre à la fin du code CSS et avant le </head> )

**pegpeg** · 29/09/2008, 10h00

j'avais bien mis le style avant la head.
Par contre j'ai essayé de rappatrier le code <td><a href=.... pour le mettre avant le head et après le style mais ça ne change rien.
Voici l'ensemble :

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
}
<style type="text/css">
.imgMenu { /* Image de Base */
display:block; /* Pour que l'image s'affiche */
background:url(image/base_de_travail/menu_06.jpg) no-repeat; /* Lien vers l'image 1 */
width:90px; height:90px; /* Taille Image 1 */
}
 
.imgMenu:hover { /* Cas Survol */
background:url(image/base_de_travail/survol.jpg) no-repeat; /* Lien vers l'image 2 */
width:90px; height:90px;  /* Taille Image 2 */
}
</style><br>
<td><a href="index.htm" class="imgMenu"></a></td>
<td>&nbsp;</td>

//-->
</script>
</head>

**HiRoN** · 29/09/2008, 10h46

Bizarre, pourtant cela fonctionne très bien chez moi...

Sinon autre solution :

Tu rajoute à ton table un ID :

Code HTML :

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

<table id="lienMenu">

Tu modifies ton lien (plus besoin de la class car on applique directement le style sur le A) :

Code HTML :

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

<a href="index.htm"></a>

Et tu mets en CSS :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
<style type="text/css">
#lienMenu a {
display:block;
background:url(img/test.gif) no-repeat;
width:16px; height:16px;
}
 
#lienMenu a:hover {
background:url(img/imgAccueilHover.png) no-repeat;
width:16px; height:16px;
}
</style>

Tu appliques donc un style au lien de type A (pour simpifier) contenu dans le #lienMenu (correspondant à l'id de ton tableau).

**pegpeg** · 29/09/2008, 12h03

Ca ne marche pas, mais comme je ne comprends pas ce que je fais (je n'y connais rien en language html), je pense que je ne fais pas ce qu'il faut.

Merci quand même pour tes réponses et ta patience. J'aurais aimé trouver quelque chose de simple (pour moi) pour que mon texte change à l'intérieur de mes carrés quand je passe la souris dessus.

J'aurais pu utiliser flash mais je voudrais que les mots soient référencés.

Tant pis et merci encore.

pegpeg

**HiRoN** · 29/09/2008, 12h14

L'exemple que je te donne est pourtant assez simple.
Allez je retente un coup

Dans ton code HTML, le tableau qui entoure le code que tu donnes est celui-ci :

Code HTML :

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

<table width="868" height="240" border="0" cellpadding="0" cellspacing="0">

Tu rajoutes dans la ligne :

Code :

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

id="lienMenu"

Ensuite, tu remplaces :

Code :

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

<td><a href="index.htm" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/base_de_travail/survol.jpg',1)"><img src="images/base_de_travail/menu_06.jpg" name="Image2" width="90" height="90" border="0"></a></td>

par :

Code :

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

1
2
<td><a href="index.htm"></a></td>

Voila pour le HTML, ensuite on applique un style CSS pour mettre l'effet sur l'image.

Le code CSS en question :

Code CSS :

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

1
2
3
4
5
6
7
8
9
10
11
 
#lienMenu a {
display:block;
background:url(img/test.gif) no-repeat;
width:16px; height:16px;
}
 
#lienMenu a:hover {
background:url(img/imgAccueilHover.png) no-repeat;
width:16px; height:16px;
}

2 solutions pour l'intégrer dans ta page HTML :

1 - En utilisant la balise <style> pour le mettre entre les balises <head> & </head> (comme je t'ai montré + haut, mais cela n'a pas l'air de fonctionner chez toi, mais ça correspond à intégrer le code CSS en dur dans la page HTML).

2 - Soit en utilisant un fichier CSS "externe", dans ce cas :

Tu crées un fichier style.css (par ex) que tu mets à côté de ton fichier HTML (dans ton dossier). Et dans la page HTML entre les balises <head> & </head>
tu mets :

Code HTML :

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

<link href="style.css" rel="stylesheet" type="text/css" />

(le fichier style.css contenant le code CSS cité + haut, ce qui correspond à "externaliser" le code CSS de la page HTML).

En espérant avoir été plus clair...
N'hésite pas à me PM si besoin. Bonne continuation

**pegpeg** · 29/09/2008, 17h57

donc j'ai essayé de faire ce que tu m'as dit.

Par contre le dernier code HTML que tu m'as demandé de mettre y était déjà avant la fin du head, après avoir créée un style css (dans mode CREATION nouveau style css, c'est bien ça qu'il fallait faire ?).

Le problème c'est que mon image n'apparaît toujours pas dans ma page !!

**HiRoN** · 29/09/2008, 18h55

Soit tu mets directement le CSS dans ta page HTML, donc en utilisant (entre les balises <head> & </head> ) :

Code :

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

1
2
3
4
<style type="text/css">
... le code CSS ici ...
</style>

Soit en mettant (idem entre <head> & </head> ):

Code :

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

<link href="style.css" rel="stylesheet" type="text/css" />

Qui indique que le CSS se trouve dans un fichier a part (ici style.css qui doit se trouver au même niveau que ta page HTML (dans le même dossier))

Bref, c'est soit l'un, soit l'autre.

dans mode CREATION nouveau style css, c'est bien ça qu'il fallait faire ?

En effet, cette action te permet de créer un nouveau fichier CSS, reste à savoir si il est correctement lié à la page HTML.

Si ton image n'apparait toujours pas dans la page, plusieurs choses à faire :

- Vérifier que ton CSS et bien pris en compte.
- Vérifier le chemin d'accès de l'image.

Je te propose, si cela te dit, de me contacter par PM (Private message), je te ferais un "Zip" contenant un exemple. Je pense que cela sera + simple pour que tu comprennes le fonctionnement et que tu "captes" ou se trouve le problème.

En attendant, si tu as envi de comprendre le principe du CSS (qui te sera bien utile pour mettre en forme tes pages), un peu de lecture ici.

Survol d'image

Discussions similaires

Partager

Partager