javascript fonction onmouseover [résolu]

dj QUIOU le 02 mars 2009 à 09h05

bonjour à tous, pour donner un peu plus de vie a mon site, j'aimerai utiliser l'evenement OnmouseOver sur certaines des images pour en changer la couleur.

mes deux images sont dans le même repertoire (a la racine du FTP)

voilà le code que j'utilise

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1").src="btn_downloadblue.png"
}
function mouseOut()
{
document.getElementById("b1").src="btn_download.png"
}
</script>
</head><body>
<a href="http://pc-system.fr/monfichier.exe" target="_blank" onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Télécharger!" src="btn_download.png" id="b1" /></a>
</body>
</html>

le problème de ce code, c'est que sur la dizaine de boutons que je souhaite animer, seul le premier s'anime, les autes sont cliquables, les liens fonctionnent, l'infobulle ALT fonctionne, mais l'image ne change pas avec le onmouseover sur les 9 derniers boutons :chepa:

alors j'ai voulu modifier le code comme ceci
en pensant bien faire

<html>
<head>
<script type="text/javascript">
function mouseOver()
{
document.getElementById("b1;b2;b3; etc....").src="btn_downloadblue.png"
}
function mouseOut()
{
document.getElementById("b1;b2;b3; etc....").src="btn_download.png"
}
</script>
</head><body>
<a href="http://pc-system.fr/monfichier.exe" target="_blank" onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Télécharger!" src="btn_download.png" id="b1" /></a>

<a href="http://pc-system.fr/monfichier.exe" target="_blank" onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Télécharger!" src="btn_download.png" id="b2" /></a>

<a href="http://pc-system.fr/monfichier.exe" target="_blank" onmouseover="mouseOver()"
onmouseout="mouseOut()">
<img border="0" alt="Télécharger!" src="btn_download.png" id="b3" /></a>
</body>
</html>

mais avec ce nouveau code, le mouseover ne fnctionne plus sur aucun des boutons, :crazy:

pouvez vous m'aider? merci d'avance

:edit

j'ai aussi essyé plusieurs fois avec le code a mettre dans la partie <head> que j'ai multiplié par le nombre de boutons à animer mais rien ne fonctionne. si quelqu'un a un code d'événement OnMouseOver je suis preneur. Merci

-->Message édité par dj QUIOU le 03/03/2009 10:08:01<--

-------
-lorsque ton topic est résolu indique le comme ceci [résolu] dans ton titre en cliquant sur [:dj QUIOU:1]

de ton premier message.
- Astuces informatique, Sécurité, Optimisation windows XP et Vista, Programmation, Tutoriaux => http://pc-system.fr

répondre

telliak le 02 mars 2009 à 21h32

Bonsoir,

Dans les deux exemples, tu définis dans tes deux fonctions le nom du bouton à afficher sous forme de constante : «b1» pour le premier exemple; «b1;b2;b3; etc....» pour le deuxième. Moralité seul le premier bouton fait ce que tu veux dans le premier cas... et aucun dans le deuxième, puisque tu as une liste que document.getElementById est incapable d'interpréter.
Il faudrait que les noms de tes boutons soient paramétrables dans les fonctions.

Ou alors, plus simplement, tu te passes carrément des fonctions. Il y a un exemple intéressant, avec variantes, à http://adrienvanhamme.com/ALLHTML/airwebdesign/ :

4.jpg et 3.jpg étant les noms des images alternatives que tu dois remplacer par les noms de tes propres boutons.

Pour compléter ma réponse : si le visiteur a bloqué Javascript, rien ne se passera; il existe d'autres solutions à base de CSS.

-->Message édité par telliak le 02/03/2009 21:36:05<--

répondre

dj QUIOU le 03 mars 2009 à 09h13

merci telliak, je vais tester tout celà je te tiens au courant :bien: