Roll-over sur deux image

Question

seb33

19 Mar 2014 à 20:25

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

Zelalsan

19 Mar 2014 à 23:26

salut,
un bout de code permettrait de donner une réponse plus adéquate. Si non pour le principe, tu pourrais t'inspirer de cet exemple.

seb33

20 Mar 2014 à 15:03

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

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

lddsoft

20 Mar 2014 à 17:20

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