changement d'image en onmouseover

HTML5, CSS3, Javascript, support des mobiles... Que penser de votre site ? Vous manquez d'informations pour la construction d'un site qui puisse s'afficher correctement partout ? C'est un problème simple, un peu complexe ? Venez ici !
geekette14
Arias
Messages : 2
Inscription : 31 août 2010, 12:57

changement d'image en onmouseover

Message par geekette14 »

Bonjour,

je débute en programmation et utilise depuis peu Komposer. Je dois mettre à jour tout le site d'une association réalisé sur dreamweaver2... Les boutons de navigations doivent être modifiés mais je n'arrive pas à garder l'animation javascript. j'ai inséré mes nouveaux boutons (images) et demandé un événement javascript onmouseover pour qu'il change d'image. Bizarrement, comme pour tous les nouveaux trucs qu'on teste, bah ça marche pas! ça fait deux jours que je suis dessus, merci de me renseigner!

Mon code :

Code : Tout sélectionner

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=iso-8859-1" />
<title>Horizons Solidaires r�seau r�gional en Basse-Normandie</title>
<style type="text/css">
body, td, th {
font-family: Verdana,Arial,Helvetica,sans-serif;
font-size: 10px;
color: #4f1f2d;
text-decoration: none;
}
#global {
background-color: #ffffff;
}
a:link {
color: #892541;
text-decoration: none;
}
a:visited {
color: #666666;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: none;
}
#menu-haut {
list-style-type: none;
top: 200px;
background-image: url(images/boutons/background_off.jpg);
font-size: 10px;
text-align: center;
float: none;
font-family: Verdana,Arial,Helvetica,sans-serif;
color: #4f1f2d;
text-transform: capitalize;
background-repeat: no-repeat;
display: block;
position: absolute;
visibility: visible;
margin-right: 20px;
left: 200px;
}

</style>
<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>
</head>
<body
onload="MM_preloadImages('images/boutons/contact bas.jpg','images/boutons/forum bas.jpg','images/boutons/photo bas.jpg','images/boutons/blog bas.jpg','images/boutons/lettre-info-down.jpg')"
style="width: 1147px; height: 630px;">
<img style="border: 0px solid ; width: 958px; height: 148px;"
left="35px" top="10px" position="absolute" alt=""
src="images/bandeau-top-horizon.jpg"
xmlns="http://www.w3.org/1999/xhtml" hspace="0" vspace="0" />
<p
style="text-align: right; width: 958px; margin-top: 0px; height: 31px;"><strong>Réseau
régional de la coopération décentralisée et de la solidarité <br />
internationale en Basse Normandie </strong></p>
<p><img src="images/boutons/boutons%20navigation%20gauche/accueil.jpg"
alt=""
style="width: 118px; height: 21px; position: absolute; top: 200px; left: 35px;" />&nbsp;<img
style="width: 61px; height: 21px; position: absolute; top: 200px; left: 281px;"
onmouseover='src:"images/boutons/boutons20%navigation20%haut/bouton-forum_on.jpg"'
alt=""
src="images/boutons/boutons%20navigation%20haut/bouton-forum_off.jpg" /><a
href="actualite.xhtml"><img
style="border: 0px solid ; width: 61px; height: 21px; position: absolute; top: 200px; left: 200px;"
alt=""
onmouseover='src:"images/boutons/boutons20%navigation20%haut/bouton-actualite_on.jpg"'
src="images/boutons/boutons%20navigation%20haut/bouton-actualite_off.jpg" /></a></p>
<p style="width: 958px;"><img
style="width: 768px; height: 24px; position: absolute; top: 220px; left: 190px;"
src="images/bare-haut-horizons.jpg" alt="" /><br />
</p>
<p>
<br />
</p>
<p style="margin-left: 32px; width: 1115px;"><br />
<a href="historique.htm">Historique</a><br />
<a href="obj%20missions.htm">Objectifs et missions</a><br />
<a href="fonctionnement.htm">Fonctionnement</a><br />
</p>
<p style="margin-left: 32px; width: 1115px;"><a
href="vie%20du%20reseau.htm"><img
src="images/boutons/boutons%20navigation%20gauche/vie%20reseau.jpg"
alt=""
style="border: 0px solid ; width: 118px; height: 21px; position: absolute; top: 325px; left: 35px;" /></a><img
style="width: 61px; height: 21px; position: absolute; top: 200px; left: 362px;"
onmouseover='src:"images/boutons/boutons20%navigation20%haut/bouton-adherer_on.jpg"'
alt=""
src="images/boutons/boutons%20navigation%20haut/bouton-adherer_off.jpg" /><a
href="contact.htm"><img
onmouseover='src:"images/boutons/boutons20%navigation20%haut/bouton-contact_on.jpg"'
style="border: 0px solid ; width: 61px; height: 21px; position: absolute; top: 200px; left: 443px;"
alt=""
src="images/boutons/boutons%20navigation%20haut/bouton-contact_off.jpg" /></a><br />
</p>
<p style="margin-left: 32px; width: 1115px;"><a
href="journee%20thematique.htm"><br />
Journées thématiques</a><br />
<a href="formations.htm">Formations</a><br />
<a href="plates%20formes.htm">Plates-formes de <br />
concertation</a></p>
<p>&nbsp;</p>
<p style="margin-left: 32px; width: 1140px;">&nbsp;<a
href="communication.htm"><img
src="images/boutons/boutons%20navigation%20gauche/communication.jpg"
alt=""
style="border: 0px solid ; width: 118px; height: 21px; position: absolute; top: 426px; left: 35px;" /></a><br />
<a href="les%20cahiers.htm">Les cahiers</a><br />
<a href="lettres%20d%27information.htm">Lettres d'information</a><br />
<a href="liens%20utiles.htm">Liens utiles...</a></p>
<p style="margin-left: 32px; width: 1140px;"><a href="outils.htm"><img
src="images/boutons/boutons%20navigation%20gauche/outils%20method.jpg"
alt=""
style="border: 0px solid ; width: 131px; height: 21px; position: absolute; top: 515px; left: 35px;" /></a></p>
<br />
<p style="margin-left: 32px; width: 1140px;"><br />
</p>
<p style="margin-left: 32px; width: 1140px;"><a
href="modeles%20de%20conventions.htm">Modèles de conventions</a><br />
<a href="textes%20de%20loi.htm">Textes de lois</a><br />
<a href="presentation.htm"><a href="docs%20ressour.htm">Documents
ressources</a></a></p>
<p style="margin-left: 32px; width: 1140px;"><a href="contact.htm"><img
src="images/boutons/boutons%20navigation%20gauche/contact.jpg" alt=""
style="border: 0px solid ; width: 118px; height: 21px; position: absolute; top: 592px; left: 35px;" /></a><a
href="presentation.htm"><img
src="images/boutons/boutons%20navigation%20gauche/presentation.jpg"
alt=""
style="border: 0px solid ; width: 118px; height: 21px; position: absolute; top: 246px; left: 35px;" /></a><img
src="images/barre-gauche.jpg" alt=""
style="width: 15px; height: 468px; position: absolute; top: 160px; left: 180px;" />
</p>
</body>
</html>

ps : si la solidarité internationale vous intéresse vous pouvez jeter un coup d'oeil au site http://www.horizons-solidaires.org que je m'empresse de mettre à jour ^^
calimo
Animal mythique
Messages : 14118
Inscription : 26 déc. 2003, 11:51

Re: changement d'image en onmouseover

Message par calimo »

Hello,

Chez moi le survol des images du menu sur le site indiqué fonctionne bien. Mais il y a plein d'erreurs : http://validator.w3.org/check?verbose=1 ... res.org%2F
Je présume que c'est toujours la version dreamweaver ?

Dans Firefox, Outils > Console d'erreur. Tu la vides, tu survoles un élément, et tu verras l'erreur indiquée.

En l'occurence, je doute que

Code : Tout sélectionner

onmouseover='src:"images/boutons/boutons20%navigation20%haut/bouton-actualite_on.jpg"'
soit du javascript valide. Tu dois d'abord sélectionner l'élément sur lequel tu veux changer le 'src' (qui peut être 'this') et ensuite seulement tu peux changer l'image.
geekette14
Arias
Messages : 2
Inscription : 31 août 2010, 12:57

Re: changement d'image en onmouseover

Message par geekette14 »

Bonjour,

merci de m'avoir répondue aussi vite. je ne vais pas corriger le code créé par le webmaster, ça risquerait de ne plus marcher ^^
J'utilise dreamweaver2 pour le changement d'images, c'est beaucoup plus simple!
c'est le site actuel qui en ligne, je mettrai la mise à jour complète dès que je l'aurais fini, en espérant qu'il n'y aura pas de bug!

@bientôt,
geekette14
Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Google [Bot], Semrush [Bot] et 3 invités