11489 sujets

JavaScript, DOM et API Web HTML5

Roll-over sur deux image

bonjour je voudrais créer un double roll-over en javascript sur deux images.
Lorsque je survole la première, c'est la deuxième qui change d'aspect et vice et versa
merci de votre aide
je l'ai bâti comme ça:

<html>

<head>
<meta>
<title>gabarit</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</meta>

<link href="feuillecss.css" rel="stylesheet" type="text/css"/>


<script language="JavaScript">
<!-- Begin
bouton = new Image();
bouton.src = "images/bouton-vert_on.gif";

bouton2 = new Image();
bouton2.src = "images/bouton-bleu_off.gif";
end -->
</script>



</head>


<body>

<a href="#" onmouseover="bouton.src = 'images/bouton-vert_on.gif';" onmouseout="bouton.src = 'images/bouton-bleu_off.gif';">

<img src="images/bouton-bleu_off.gif" width="187" height="50" name=bouton></a>




<a href="#" onmouseover="bouton2.src = 'images/bouton-bleu_off.gif';" onmouseout="bouton2.src = 'images/bouton-vert_on.gif';">

<img src="images/bouton-vert_on.gif" width="187" height="50" name=bouton2></a>

</body>

</html>
Bonjour,

La solution proposée par Zelalsan me plaît assez, car elle ne fait pas appel à JavaScript.

Si une solution en JavaScript te dit, voici ma proposition:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>ROLLOVER SUR 2 IMAGES</title>
    <script>
	function over(id)
	{
		(id=="pic1")?
			document.getElementById("pic2").src = "images/img3.gif" : 
			document.getElementById("pic1").src = "images/img4.gif" ;
	}
	
	function out(id)
	{
		(id=="pic1")?
			document.getElementById("pic2").src = "images/img2.gif" : 
			document.getElementById("pic1").src = "images/img1.gif" ;
	}
   </script>
  </head>
  <body>
	  <div class="content">
		<img id="pic1" src="images/img1.gif" width="100" height="30" alt="image1" onmouseover="over(this.id)" onmouseout="out(this.id);">
		<img id="pic2" src="images/img2.gif" width="100" height="30" alt="image2" onmouseover="over(this.id)" onmouseout="out(this.id);">
	  </div>
  </body>
</html>

C'est perfectible, mais ça marche ...
J'utilise 4 images, mais tu fais comme tu veux, bien sûr!
Sujet clos
Aller à