Script Rollover - Soucis de compatibilité avec FireFox

Discussion dans 'Développement d'un site Web ou d'une appli mobile' créé par iciyatou, 14 Juillet 2008.

  1. iciyatou
    iciyatou Nouveau WRInaute
    Inscrit:
    9 Mars 2008
    Messages:
    9
    J'aime reçus:
    0
    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 :

    Dans la partie BODY :

    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)

    [​IMG]
     
  2. malvina14
    malvina14 WRInaute discret
    Inscrit:
    5 Janvier 2007
    Messages:
    210
    J'aime reçus:
    0
    Bonsoir,

    Code:
    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.
     
  3. gewix
    gewix Nouveau WRInaute
    Inscrit:
    8 Février 2006
    Messages:
    43
    J'aime reçus:
    0
    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)
    Code:
    <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>
     
  4. iciyatou
    iciyatou Nouveau WRInaute
    Inscrit:
    9 Mars 2008
    Messages:
    9
    J'aime reçus:
    0
    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 !
     
  5. iciyatou
    iciyatou Nouveau WRInaute
    Inscrit:
    9 Mars 2008
    Messages:
    9
    J'aime reçus:
    0
    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 :)
     
Chargement...
Similar Threads - Script Rollover Soucis Forum Date
Un petit effet javascript sympa sur les liens : scrollovers Développement d'un site Web ou d'une appli mobile 13 Août 2007
script pour effet rollover sur un menu Développement d'un site Web ou d'une appli mobile 11 Juillet 2005
Meta description différente de celle choisie (Rank Math + Qwant) Problèmes de référencement spécifiques à vos sites 25 Juillet 2022
Pages dynamiques avec Javascript ? Développement d'un site Web ou d'une appli mobile 14 Juillet 2022
Balise méta description : faut-il insérer son mot-clé ? Débuter en référencement 2 Juillet 2022
[JavaScript Array] modifier un code html sans le supprimer/recréer Développement d'un site Web ou d'une appli mobile 20 Juin 2022
Lien dans la description d'une vidéo YouTube...quel est prix raisonnable par mois ? YouTube, Google Images et Google Maps 16 Juin 2022
Le javascript protège-t-il du copiage HTML ? Développement d'un site Web ou d'une appli mobile 9 Mai 2022
Sites de scripts PHP, jQuery, Ajax, etc. Le café de WebRankInfo 20 Mars 2022
Tester une URL avec Javascript Développement d'un site Web ou d'une appli mobile 25 Février 2022
jour en javascript Développement d'un site Web ou d'une appli mobile 24 Février 2022
Search Console Probleme Meta title & Meta description fiche produit Référencement Google 27 Janvier 2022
référencement site full javascript Débuter en référencement 17 Janvier 2022
Script "haut de page". Développement d'un site Web ou d'une appli mobile 4 Janvier 2022
Détecter arrêt user d'un script PHP ? Développement d'un site Web ou d'une appli mobile 28 Décembre 2021
Astuce Référencement Playstore et pré inscription Référencement Google 17 Décembre 2021
Problèmes dans le méta-titre / description + Sitemap Référencement Google 29 Novembre 2021
Même contenu descriptif vidéo Youtube et fiche produit site Débuter en référencement 26 Novembre 2021
Texte de meta description erroné Demandes d'avis et de conseils sur vos sites 25 Novembre 2021
Google réécrit la meta description Référencement Google 21 Novembre 2021