Bouton de menu en rollover

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:

---

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:

---

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.

Salut,

Code:

---

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>

---

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

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?

Salut,

En analysant ton code (peu orthodoxe :P) 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:

---

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

---

) c'est un ami de frontpage :mouarf:

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

Bonsoir à tous,

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

dans le body:

Code:

---

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:

---

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:

Citation:

---

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

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

Kaiser59:

Citation:

---

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

---

Oui ça revient à mon problème du début :mur:

Mais merci quand même :)

Je pense que le problème viens juste d'une erreur de placement du onMouseOver.. dans le html, mais je ne vois pas où. Ca fonctionne, mais ça décale mon menu et génère des erreurs.

Code:

---

1 2 3 4 5 6

<div class="tinyText" style="height: 26px; left: 22px; position: absolute; top: 196px; width: 106px; 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 du Reiki" 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>

---

J'ai mis un exemple en ligne à http://www.reikisoins.fr/index2.html

Rebonsoir,

J' ai réussi à avoir l'effet désiré sur le menu :)
(il me reste juste à créer une image pour le forum)

Mais ce code me génère 18 erreurs dans le validateur W3C. Qu'en pensez-vous??

ma page test

Ben... il semble que les erreurs sont assez explicites :?
Attention :

Code:

---

1 2

<a href="http://www.reikisoins.fr/presentation.html" title="Présentation du Reiki" alt="Présentation 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" /></a>

---

Ton confonds la syntaxe des balises <a> et <img />...

8O c'est possible ça :

Code:

---

onmouseover="presentation.src = 'http://www.reikisoins.fr/presentation_files/shapeimage_1.png';"

---

J'avais jamais vu comme ça, c'est une classe, une fonction presentation.src ?

J'ai repris le code expliqué sur ce site

Citation:

---

Envoyé par kaiser59

8O c'est possible ça :

Code:

---

onmouseover="presentation.src = 'http://www.reikisoins.fr/presentation_files/shapeimage_1.png';"

---

J'avais jamais vu comme ça, c'est une classe, une fonction presentation.src ?

---

C'est possible si tu as au préalable affecté à la variable presentation un objet image ;)

Code:

---

1 2 3

var presentation = new Image(); var presentation = document.images[0]; var presentation = document.getElementsByTagName['img'][0];

---

Dans ce cas, tu as accès à la propriété src de cet objet.

EDIT :
Ceci dit, le plus logique pour un rollover serait plutôt :

Code:

---

onmouseover="this.src = 'http://www.reikisoins.fr/presentation_files/shapeimage_1.png';"

---

:aie:

Citation:

---

Envoyé par Bovino

C'est possible si tu as au préalable affecté à la variable presentation un objet image ;)

Code:

---

1 2 3

var presentation = new Image(); var presentation = document.images[0]; var presentation = document.getElementsByTagName['img'][0];

---

Dans ce cas, tu as accès à la propriété src de cet objet.

EDIT :
Ceci dit, le plus logique pour un rollover serait plutôt :

Code:

---

onmouseover="this.src = 'http://www.reikisoins.fr/presentation_files/shapeimage_1.png';"

---

:aie:

---

Ah d'accord, comme quoi on en apprend tout les jours :)