Discussion :

[dessinateurttuyen]

Bonjour à tous,

Je voudrais faire quelque chose de relativement courant, mais je n'ai pas pu trouver d'info sur cette manip...

En fait j'ai une image, et je voudrais que quand la souris passe dessus, le navigateur charge une autre image (de même taille), et quand la souris quitte la zone, l'ancienne image est rechargée.

Est-il possible de faire cela en html?

Je voudrais l'utiliser pour un onglet qui s'éclaire quand la souris passe dessus...

merci de vos réponses!

[mussara]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
<script language="JavaScript" type="text/JavaScript">
function MM_swapImgRestore() { 
  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_swapImage() { 
  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>
 
<a href="#" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('monimage','','imagesurvol',0)"><img name="monimage" border="0" src="imageoriginale"></a>

[Bobybx]

Avec onmouseover et onmouseout

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
 
<img onMouseOver="this.src='image2.jpg'" src="image1.jpg"
onMouseOut="this.src='image1.jpg'">

[dessinateurttuyen]

Merci, ca marche au poil!

Par contre j'aurais une petite question subsidiaire...

Quand j'écris deux balises :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<IMG>
<IMG>

sur mon navigateur quand je charge la page, j'ai effectivement les deux images côte à côte, mais il y a un espace entre les deux. Pour qu'il n'y ait pas d'espace, je suis obligé d'alligner toutes mes balises images sur une seule ligne, ce qui n'est pas terrible pour la lecture du code. Comment faire pour enlever ces espaces?

[mussara]

avec les feuilles de style (css) tu positionneras exactement où tu veux tes images

[dessinateurttuyen]

oui mais pour l'instant je voudrais faire simple ...

Je suis débutant, et je me tape déjà les tutoriaux HTML et le PHP en même temps donc mon cerveau commence à bouillir dans son jus, encore une information supplémentaire et j'explose! lol!

Non sans déconner, il y a pas un truc plus simple?

[mussara]

tu as dit que de tout mettre sur une meme ligne fonctionnait: c'est ça qui est simple

sinon par défaut dans le code de ta page il y a peut être un paramètre ou quelque chose qui fait que ça te met un espace...

[dessinateurttuyen]

euh... mouiii sinon tu n'aurais pas par hasard un bon petit tuto sur CSS? je crois qu'il y a encore de la place dans ma tête pour quelques langages encore lol!

[mussara]

je pense qu'il y a de bons tutos sur www.developpez.com

[dessinateurttuyen]

Merci c'est sympa!

Mais bon, finalement je vais faire la mise en page avec des <TABLE> lol! (j'ai honte) mais ça a l'air d'être correct sans être bien sûr le Pérou! Là ça va trop me prendre la tête de le faire avec des CSS, mais pour mon prochain projet, je m'y mets!