Discussion :

[damien-94]

Bonjour à tous,

je souhaiterai rendre plus dynamique mon site internet en appliquant un rollover sur le menu.
Après plusieurs tentatives, je n'arrive pas à rendre ma page compatible W3C et il subsiste un décalage dans le menu (par rapport à la page d'origine).
J'ai fait le test sur le bouton presentation.

Voici le code utilisé dans le head:

Code :

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

1
2
3
4
5
6
7
 
<script language="JavaScript">
<!-- Begin
presentation = new Image();
presentation.src = "http://www.reikisoins.fr/presentation_files/shapeimage_1.png";
end -->
  </script>

et dans body :

Code :

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

1
2
3
4
5
6
<div class="tinyText" style="height: 26px; left: 22px; position: absolute; top: 196px; width: 104px; z-index: 1;">
<img usemap="#map1" id="shapeimage_1" style="border: medium none ; height: 31px; left: -3px; position: absolute; top: -3px; width: 109px; z-index: 1;" alt="PRESENTATION" title="Presentation du Reiki" /><map name="map1" id="map1">
<area href="http://www.reikisoins.fr/presentation.html" title="Presentation du Reiki" alt="Presentation du Reiki" coords="3, 3, 107, 29" onmouseover="presentation.src = 'http://www.reikisoins.fr/presentation_files/shapeimage_1.png';" onmouseout="presentation.src = 'http://www.reikisoins.fr/index_files/shapeimage_1.png';" />
<img src="http://www.reikisoins.fr/index_files/shapeimage_1.png" name="presentation" /></map>
 
</div>

Ma page d'origine se trouve à http://www.reikisoins.fr , rajoutez /index2.html pour voir mon résultat.

Merci d'avance pour votre aide.

[Bovino]

Salut,

Code :

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

1
2
3
4
5
6
<script language="JavaScript">
<!-- Begin
presentation = new Image();
presentation.src = "http://www.reikisoins.fr/presentation_files/shapeimage_1.png";
end -->
  </script>

Begin et end n'étant pas des instructions JavaScript, j'imagine que tu dois avoir une erreur dans ta page...

[damien-94]

Merci Bovino, j'ai fait la modification sur ma page.

Le bouton de ma page /index2.html est décalé par rapport à ma page d'accueil.
Ai-je mal placé le code et les fonctions onmouseover et onmouseout?

[kaiser59]

Salut,

En analysant ton code (peu orthodoxe ) Je me trompe mais tu utilises des images dans ton menu ? Pourquoi ?

Ton menu peut être fait tout simplement avec le css sans utiliser d'image (niveau visuel) un simple carré avec de grosse bordure CSS le fait amplement et te facilite la tâche.
Dans ton css tu rajoutes a:hover (au survole de la souris sur le lien) et tu mets ce que tu veux.

De plus, c'est crée avec iWeb (

Code :

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

<meta name="Generator" content="iWeb 3.0.1" />

) c'est un ami de frontpage

Rend toi sur le FAQ CSS pour mieux comprendre comment interagir avec

[damien-94]

Bonsoir à tous,

Pourriez-vous m'indiquer ce qui cloche dans mon css?

dans le body:

Code :

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

1
2
3
4
5
6
<div class="presentation" style="height: 26px; left: 22px; position: absolute; top: 196px; width: 104px; z-index: 1;">
<img usemap="#map1" id="shapeimage_1" src="index_files/shapeimage_1.png" style="border: medium none ; height: 31px; left: -3px; position: absolute; top: -3px; width: 109px; z-index: 1;" alt="PRESENTATION" title="Presentation du Reiki" /><map name="map1" id="map1">
<area href="http://www.reikisoins.fr/presentation.html" title="Presentation du Reiki" alt="Presentation du Reiki" coords="3, 3, 107, 29" />
</map>
 
</div>

dans le css:

Code :

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

1
2
3
4
5
6
7
8
9
10
div.presentation { 
	background-image: url(http://www.reikisoins.fr/index_files/shapeimage_1.png); 
	display: block; 
	width: 104px;
	background-repeat:no-repeat;
	 }
 
div.presentation: hover { 
	background-image: url(http://www.reikisoins.fr/presentation_files/shapeimage_1.png);
	background-repeat:no-repeat;}

Merci, j'aimerai bien enfin réussir un bouton



Kaiser59:

En analysant ton code (peu orthodoxe ) Je me trompe mais tu utilises des images dans ton menu ? Pourquoi ?

Je sais pas, pourquoi pas ? mais je pense que ça peut être pas mal de garder mon code d'origine et de changer le css avec les pseudoclasses hover etc.. comme tu me le proposes

[kaiser59]

Pourquoi pas

Néanmoins, tu appliques à ton code deux styles, tu le places directement dans le code et tu as aussi une css pour l'utiliser sous la même class...

Il faut faire soit l'un, soit l'autre en même temps je ne sais plus qui est prioritaire et ne sera que complémentaire c'est-à-dire le "height" par exemple dans la class presentation.

Si tu souhaites le faire avec des images à ma connaissance, il te faudra passer par onMouseOver et onMouseOut en gros du javascript...