Script Rollover - Soucis de compatibilité avec FireFox

[iciyatou]

Bonsoir,

Je viens d'installer sur mon site un script (javascript) pour réaliser un rollover.
Seul problème, ce dernier n'est pas compatible avec FireFox. Auriez-vous une solution pour m'aider à résoudre ce problème ? (Quitte à tout remodifier le script)

Dans la partie HEAD :

<script language="javascript">
<!--
image1 = new Image;
image1.src = "actualites/img-forum.png";
image2 = new Image;
image2.src = "actualites/img-duel.png";

function changeLien1() {
distance.src=image1.src; // Vérifie bien cette instruction avec d'autres navigateurs que IE
document.getElementById("gdImage").href = "http://forum.iciyatou.net"; // Là je remplace le lien de la grande image.
}
function changeLien2() {
distance.src=image2.src; // Vérifie bien cette instruction avec d'autres navigateurs que IE
document.getElementById("gdImage").href = "duel.html"; // Là je remplace le lien de la grande image.
}
//-->
</script>

Dans la partie BODY :

<a id="gdImage" href=""><img src="actualites/img-forum.png" border=0 name="distance"></a>
<a href="http://forum.iciyatou.net" target="_blank" onMouseOver="changeLien1();"> <img src="actualites/img-01.gif" border="0"></a>
<a href="duel.html" onMouseOver="changeLien2();"> <img src="actualites/img-02.gif" border="0"></a>

Ce que je souhaite réaliser grâce à ce script :
- Lorsque l'on passe la souris sur une miniature, la grosse image change et le href de cette grosse image également.
Donc image 1 avec un lien, image 2 avec un autre lien.
URL de mon site : http://www.iciyatou.net (le script est présent sur la page d'accueil)

 

[malvina14]

Bonsoir,

function AfficheZoom(cible) {

document.getElementById('zoomcible').innerHTML = "<img src='cible"' alt=''/>"
}


<div class="image" id="zoomcible"><img src="im1.jpg" width="300" height="300" /></div>
<div class="miniatures" onmouseover="AfficheZoom('im1.jpg','')"><img src="miniature1.jpg" alt="" width="80" height="50" /></div>
        <div class="miniatures" onmouseover="AfficheZoom('im2.jpg','')"><img src="miniature2.jpg" alt="" width="80" height="50" /></div>

quelque chose comme ça à adapter.

 

[gewix]

Bonjour,
un souci dans ton code javascript.

Ta variable distance est inconnu, tu devrais la déclarer par exemple avec:
var distance = document.getElemensByName("distance");
// note bien que c'est Elements et pas Element pour les Name!
Sinon, moi j'aurais mis un id à la place de name, ça fonctionne bien avec le code ci dessous (j'ai mis des url absolues pour le chemin vers les images)

<script language="javascript"> 
<!-- 
image1 = new Image; 
image1.src = "http://www.iciyatou.net/actualites/img-forum.png"; 
image2 = new Image; 
image2.src = "http://www.iciyatou.net/actualites/img-duel.png"; 

function changeLien1() { 
document.getElementById("distance").src=image1.src; // Vérifie bien cette instruction avec d'autres navigateurs que IE 
document.getElementById("gdImage").href = "http://forum.iciyatou.net"; // Là je remplace le lien de la grande image. 
} 
function changeLien2() { 
document.getElementById("distance").src=image2.src; // Vérifie bien cette instruction avec d'autres navigateurs que IE 
document.getElementById("gdImage").href = "http://www.iciyatou.net/duel.html"; // Là je remplace le lien de la grande image. 
} 
//--> 
</script>

<a id="gdImage" href=""><img src="http://www.iciyatou.net/actualites/img-forum.png" border=0 id="distance"></a> 
<a href="http://forum.iciyatou.net" target="_blank" onMouseOver="changeLien1();"> <img src="http://www.iciyatou.net/actualites/img-01.gif" border="0"></a> 
<a href="http://www.iciyatou.net/duel.html" onMouseOver="changeLien2();"> <img src="http://www.iciyatou.net/actualites/img-02.gif" border="0"></a>

 

[iciyatou]

Impéccable !!!
Merci beaucoup pour ton aide précieuse
En plus, j'ai juste eu à copier/coller le code, le must !
Merci encore ! Tout fonctionne parfaitement sur IE, et Firefox !

 

[iciyatou]

Dernière petite question (désolé pour le double post)...

Comment faire dans un javascript pour qu'un lien s'ouvre en _blank ?

function changeLien1() {
document.getElementById("distance").src=image1.src; // Vérifie bien cette instruction avec d'autres navigateurs que IE
document.getElementById("gdImage").href = "http://forum.iciyatou.net"; // Ce lien doit s'ouvrir dans une nouvelle fenêtre.
}
function changeLien2() {
document.getElementById("distance").src=image2.src; // Vérifie bien cette instruction avec d'autres navigateurs que IE
document.getElementById("gdImage").href = "http://www.iciyatou.net/duel.html"; // Là je remplace le lien de la grande image.
}
//-->
</script>

Merci d'avance