Css, img et hover

@lex -  
 @lex -
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!
A voir également:

3 réponses

Réponse 1 / 3
Hazïel
 
utilise le onmouseover et le onmouseout c'est plus simple
0
Réponse 2 / 3
JB_A Messages postés 301 Date d'inscription   Statut Membre Dernière intervention   5
 
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
0
Réponse 3 / 3
Hazïel
 
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
0
@lex
 
Merci, j'vais me tester avec le "onmouse" dans un premier temps, si j'arrive pas je reviens à l'aide...
Pour le javascript c'est vrai que c'est méchant, on a déja fait un peu de java a l'école, mais rien avoir avec cela!
0
Hazïel > @lex
 
dans 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
0
@lex > Hazïel
 
Big 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 ??
0
@lex > @lex
 
enfin ne prennez pas en compte les paramètres de hauteur et de largeur :/
0
JB_A Messages postés 301 Date d'inscription   Statut Membre Dernière intervention   5 > @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>
0

Discussions similaires

buda_vfs.img ?? Virus ou pas ??
bumble -
jules29 -

11 réponses
boitier Android x96Q et mise à jour d'aplications
bebertoap -
Panth33ra -

5 réponses
ouvrir un fichier .img
fanny -
Freebike -

11 réponses
Enlever le soulignement sous les liens en HTML/CSS
baissaoui -
baissaoui -

0 réponse
Comment ouvrir un fichier .img
MrSty -
galaramas -

14 réponses