Css, img et hover
Bonjour,
j'ai l'impression que ce probleme a déja été traité des milliers de fois, mais je bloque quand meme sur ma premiere page web.
J'voudrais changer la couleur de fond de l'image d'un bouton lorsque la souris passe dessus mais j'arrive pas à le faire fonctionner. J'ai pourtant créer les images en doubles pour lorsqu'on est au dessus, mais je ne vois pas très bien comment les utiliser... (^^j'ai pas tout compri dans le css encore)
voilà le html : <div class="menu">
<ul>
<li><a href="#"><img src="images/test1.gif" width="1" height="1" /></a></li>
<li><a href="#"><img src="images/test2.gif" alt="" width="83" height="30" /></a></li>
etc ...
et un bout du css (j'espere suffisant):
.menu{
background-image:url(images/menubg.gif);
background-position:top left;
background-repeat:no-repeat;
width:616px;
height:53px;
margin:15px 0 28px 0
}
.menu ul{
float:left;
display:inline;
margin:9px 0 0 75px;
}
.menu li{
list-style-type:none;
float:left;
padding:0 11px 0 0;
background-image:url(images/line.gif);
background-position:top left;
background-repeat:repeat-x;
background-color:#D8D8D8
}
.menu ul li a img {
height: 30px; width: 83px; border-width: 0;
}
Merci bien!
j'ai l'impression que ce probleme a déja été traité des milliers de fois, mais je bloque quand meme sur ma premiere page web.
J'voudrais changer la couleur de fond de l'image d'un bouton lorsque la souris passe dessus mais j'arrive pas à le faire fonctionner. J'ai pourtant créer les images en doubles pour lorsqu'on est au dessus, mais je ne vois pas très bien comment les utiliser... (^^j'ai pas tout compri dans le css encore)
voilà le html : <div class="menu">
<ul>
<li><a href="#"><img src="images/test1.gif" width="1" height="1" /></a></li>
<li><a href="#"><img src="images/test2.gif" alt="" width="83" height="30" /></a></li>
etc ...
et un bout du css (j'espere suffisant):
.menu{
background-image:url(images/menubg.gif);
background-position:top left;
background-repeat:no-repeat;
width:616px;
height:53px;
margin:15px 0 28px 0
}
.menu ul{
float:left;
display:inline;
margin:9px 0 0 75px;
}
.menu li{
list-style-type:none;
float:left;
padding:0 11px 0 0;
background-image:url(images/line.gif);
background-position:top left;
background-repeat:repeat-x;
background-color:#D8D8D8
}
.menu ul li a img {
height: 30px; width: 83px; border-width: 0;
}
Merci bien!
Configuration: Linux Firefox 3.0
3 réponses
-
utilise le onmouseover et le onmouseout c'est plus simple
-
Tu peux ajouter un javascript dans ta page :
<script language="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.0 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 && document.getElementById) x=document.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>
Dans ta page
<a href="tonlien" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('nomimage','','chemindetonimage',1)">
Il me semble -
pour moi il me semble que tu as juste à mettre ton adresse de ton image 1 dans soit onmouseover et l'adresse de ton image 2 dans le onmouseout pour moi sa mache dans mon site sa me paraît plus simple que le javascript si il est débutant
-
-
@@lexdans le javascript le truc c'est que la syntaxe est parfois dur à comprendre mais après ce n'est que du bon sens voir même de la logique
-
@HazïelBig problemo
j'arrive toujours pas a me servir des onmouse...!!!
<li><a href="index2.html" <img src="images/test1.gif" width="1" height="1" OnMouseOver="img1.src='images/test12.gif'" OnMouseOut="img1.src='images/test1.gif' "/> /></a></li>
ca suffit pas ?? -
@@lexenfin ne prennez pas en compte les paramètres de hauteur et de largeur :/
-
@@lex<li><a href="index2.html" onMouseOut="MM_swapImgRestore()"
onMouseOver="MM_swapImage('img1','','images/test12.gif',1)"><img name=img1 src="images/test1.gif"> /></a></li>
Si tu veux ajouter des infos sur la taille, tu peux utiliser
<script language="JavaScript">
<!--
if (document.images) {
nomimage = new Image(hauteur ou l'inverse ? ,Largeur ou l'inverse ?); nomimage.src = "cheminimage/image.extension";
nomimage2 = new Image(hauteur ou l'inverse ? ,Largeur ou l'inverse ?); nomimage2.src = "cheminimage/image2.extension"; }
//-->
</script>
-
