Css, img et hover

Fermé

@lex - 30 juin 2008 à 17:02
@lex - 30 juin 2008 à 18:15

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:

Css, img et hover
Img burn - Télécharger - Gravure
Fichier img ✓ - Forum Gravure
Href img ✓ - Forum HTML
Buda vfs img ✓ - Forum Virus
Img extractor - Télécharger - Photo & Graphisme

3 réponses

Réponse 1 / 3

Hazïel
30 juin 2008 à 17:07

utilise le onmouseover et le onmouseout c'est plus simple

Réponse 2 / 3

JB_A Messages postés 301 Date d'inscription jeudi 19 juin 2008 Statut Membre Dernière intervention 13 février 2018 5
30 juin 2008 à 17:15

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

Réponse 3 / 3

Hazïel
30 juin 2008 à 17:19

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

@lex
30 juin 2008 à 17:27

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!

Hazïel > @lex
30 juin 2008 à 17:29

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

@lex > Hazïel
30 juin 2008 à 17:54

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

@lex > @lex
30 juin 2008 à 17:57

enfin ne prennez pas en compte les paramètres de hauteur et de largeur :/

JB_A Messages postés 301 Date d'inscription jeudi 19 juin 2008 Statut Membre Dernière intervention 13 février 2018 5 > @lex
30 juin 2008 à 18:11

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

</script>

Discussions similaires

ouvrir un fichier .img

trait horizontal avec du css

Enlever le soulignement sous les liens en HTML/CSS

[CSS] Forcé retour à la ligne

HTML - définir taille bouton