Effet de survol en javascript

Binabik -  
 Bi0H4Z4RD -
Salut à tous

Bon moi j'ai un problème avec un code (normalement) tout simple mais qui refuse de fonctionner grrrr
Le but est: quand on passe la souris sur une image lien, l'image est remplacé par une autre de même taille.

Voila le truc:
<html>
<head>
<script language="JavaScript">

var a
a=new Array();
a[0]=new Image;
a[0].src="/img2.gif";
a[1]=new Image;
a[1].src="/img1.gif";

//change l'image
function roll(img,nb) {
eval("img.src=a["+nb+"].src");
}

</script>
</head>

<body>
<A HREF="#"
onmouseover="roll(img1,0)";
onmouseout="roll(img1,1)">
<img name="img1" src="img1.gif" border="0">Lien</a><br>

</body>
</html>

et pour voir ce qui cloche: http://membres.lycos.fr/binabik87/survol.htm
ps: bien sur les noms et chemins des 2 images sont bons, pas de soucis là dessus.

Merci bien
+

5 réponses

  1.
    roro59650 Messages postés 100 Statut Membre 2
     
    Bonjour,
    Pour mon premier message sur ce site, ça commence bien...
    En effet, le hasard veut que j'ai une bonne mémoire.
    Donc en fait, je me renseignait sur le "onmouseover" et je suis d'abord tombé sur le site de webmaster de lycos, et je regarde le code un peu, et voilà quoi, je retient une erreur : entre le onmouseover et le onmouseout, il y a un point virgule...
    Et que vois-je ici? un point virgule entre le onmouseover et le onmouseout...
    J'ai farfouillé un peu le code de lycos, et il y a EXACTEMENT les mêmes variables...
    Donc je ne sais pas si "binabik" a testé le code ou quoi, mais quand on fait ça, on affiche la source, ou on dit d'où elle viens...
    Voici le code de la page http://www.lycos.fr (en gras, les parties copiées...):
    1: <HTML>
    2: <HEAD>
    3: <TITLE>Rollover</TITLE>
    4:
    5: <style>
    6: <!--
    7: .mouseBeOffMe {
    8: border-top: 10px solid #AAAAAA;
    9: border-bottom: 10px solid #AAAAAA;
    10: border-left: 6px solid #444444;
    11: border-right: 10px solid #444444;
    12: }
    13: .mouseBeOnMe {
    14: border-top: 6px solid #AAAAAA;
    15: border-bottom: 14px solid #AAAAAA;
    16: border-left: 10px solid #444444;
    17: border-right: 6px solid #444444;
    18: }
    19: .mouseBeDown {
    20: border-top: 13px solid #AAAAAA;
    21: border-bottom: 7px solid #AAAAAA;
    22: border-left: 10px solid #444444;
    23: border-right: 6px solid #444444;
    24: }
    25: .mouseBeUp {
    26: border-top: 10px solid #AAAAAA;
    27: border-bottom: 10px solid #AAAAAA;
    28: border-left: 10px solid #444444;
    29: border-right: 6px solid #444444;
    30: }
    31: //-->
    32: </style>
    33:
    34:
    35:
    36: <SCRIPT LANGUAGE="JavaScript">
    37: <!--
    38:
    39: function Navigateur(){
    40: if (navigator.appName.indexOf("Netscape") > -1) {return "Netscape";}
    41: if (navigator.appName.indexOf("Explorer") > -1) {return "Explorer";}
    42: return "Unknown";
    43: }
    44:
    45: var a
    46: a= new Array();
    47: a[0]=new Image;
    48: a[0].src="img2.gif";
    49: a[1]=new Image;
    50: a[1].src="img1.gif";
    51:
    52: function roll(img,nb) {
    53: eval("img.src=a["+nb+"].src");
    54: }
    55:
    56: function trans(img,nb){
    57: if (Navigateur() == "Explorer") {
    58: img.filters[0].apply();
    59: eval("img.src=a["+nb+"].src");
    60: img.filters[0].play();
    61: } else {
    62: eval("img.src=a["+nb+"].src");
    63: }
    64: }
    65:
    66: function makevisible(img,flag){
    67: if (flag==0) img.filters.alpha.opacity=100
    68: else img.filters.alpha.opacity=50
    69: }
    70:
    71:
    72: //-->
    73: </SCRIPT>
    74: </HEAD>
    75:
    76: <BODY BGCOLOR="#FFFFFF">
    77: <A HREF="#"
    78: onmouseover="roll(img1,0)";
    79: onmouseout="roll(img1,1)">
    80: <IMG name="img1" SRC="img1.gif" BORDER=0 >    Un RollOver simple
    81: </A><br><br>
    82: <A HREF="#"
    83: onmouseover="trans(img2,0)"
    84: onmouseout="trans(img2,1)">
    85: <IMG name="img2"
    86: style="filter: revealTrans(Transition=12, Duration=0.35)"
    87: SRC="img1.gif" BORDER=0 >Un rollover avec transition sous IE, simple sur Netscape.
    88: </A><br><br>
    89: <A HREF="#"
    90: onMouseover="makevisible(img3,0)"
    91: onMouseout="makevisible(img3,1)">
    92: <IMG SRC="img1.gif" NAME="img3" BORDER="0" style="filter:alpha(opacity=50)">
    93: Un autre Rollover (Opacité, ne fonctionne uniquement avec Internet Explorer)<BR>
    94: </A><br><br>
    95: <A HREF="#"
    96: onmouseover = "img4.className='mouseBeOnMe'"
    97: onmousedown = "img4.className='mouseBeDown'"
    98: onmouseup = "img4.className='mouseBeUp'"
    99: onmouseout = "img4.className='mouseBeOffMe'">
    100: <img src = "img3.gif" border = "0" name="img4"
    101: class = "mouseBeOffMe">Un autre Rollover à 3 positions
    102: </A>
    103:
    104: </BODY>
    105: </HTML>

    Comme on peut voir, il n'y a qu'une fois l'erreur du point virgule, donc "binabik" n'a même pas fouillé un peu le code...
    Je trouve ça plus que nul le copié collé sans reflexion...
    A+, et mort au plagia!
    PS : la solution, pour ceux qui passerait par ici, est le fameux point virgule qui n'a pas lieu d'être...
    2
    1. istoun
       
      <a Href="#" onmouseover="this.src='liendimage'" onmouseout="this.value='imageprincipale'"><img src="imageprincipale"></a>
      0
    2. Bi0H4Z4RD
       
      Voici le code sans les numéros au début. Fonctionne niquel ;)

      <HTML>
      <HEAD>
      <TITLE>Rollover</TITLE>

      <style>
      <!--
      .mouseBeOffMe {
      border-top: 10px solid #AAAAAA;
      border-bottom: 10px solid #AAAAAA;
      border-left: 6px solid #444444;
      border-right: 10px solid #444444;
      }
      .mouseBeOnMe {
      border-top: 6px solid #AAAAAA;
      border-bottom: 14px solid #AAAAAA;
      border-left: 10px solid #444444;
      border-right: 6px solid #444444;
      }
      .mouseBeDown {
      border-top: 13px solid #AAAAAA;
      border-bottom: 7px solid #AAAAAA;
      border-left: 10px solid #444444;
      border-right: 6px solid #444444;
      }
      .mouseBeUp {
      border-top: 10px solid #AAAAAA;
      border-bottom: 10px solid #AAAAAA;
      border-left: 10px solid #444444;
      border-right: 6px solid #444444;
      }
      //-->
      </style>
      <SCRIPT LANGUAGE="JavaScript">
      <!--
      function Navigateur(){
      if (navigator.appName.indexOf("Netscape") > -1) {return "Netscape";}
      if (navigator.appName.indexOf("Explorer") > -1) {return "Explorer";}
      return "Unknown";
      }
      var a
      a= new Array();
      a[0]=new Image;
      a[0].src="img2.gif";
      a[1]=new Image;
      a[1].src="img1.gif";
      function roll(img,nb) {
      eval("img.src=a["+nb+"].src");
      }
      function trans(img,nb){
      if (Navigateur() == "Explorer") {
      img.filters[0].apply();
      eval("img.src=a["+nb+"].src");
      img.filters[0].play();
      } else {
      eval("img.src=a["+nb+"].src");
      }
      }
      function makevisible(img,flag){
      if (flag==0) img.filters.alpha.opacity=100
      else img.filters.alpha.opacity=50
      }
      //-->
      </SCRIPT>
      </HEAD>
      <BODY BGCOLOR="#FFFFFF">
      <A HREF="#"
      onmouseover="roll(img1,0)";
      onmouseout="roll(img1,1)">
      <IMG name="img1" SRC="img1.gif" BORDER=0 >Un RollOver simple
      </A><br><br>
      <A HREF="#"
      onmouseover="trans(img2,0)"
      onmouseout="trans(img2,1)">
      <IMG name="img2"
      style="filter: revealTrans(Transition=12, Duration=0.35)"
      SRC="img1.gif" BORDER=0 >Un rollover avec transition sous IE, simple sur Netscape.
      </A><br><br>
      <A HREF="#"
      onMouseover="makevisible(img3,0)"
      onMouseout="makevisible(img3,1)">
      <IMG SRC="img1.gif" NAME="img3" BORDER="0" style="filter:alpha(opacity=50)">
      Un autre Rollover (Opacité, ne fonctionne uniquement avec Internet Explorer)<BR>
      </A><br><br>
      <A HREF="#"
      onmouseover = "img4.className='mouseBeOnMe'"
      onmousedown = "img4.className='mouseBeDown'"
      onmouseup = "img4.className='mouseBeUp'"
      onmouseout = "img4.className='mouseBeOffMe'">
      <img src = "img3.gif" border = "0" name="img4"
      class = "mouseBeOffMe">Un autre Rollover à 3 positions
      </A>
      </BODY>
      </HTML>
      0
  2. beeboo Messages postés 27 Statut Membre 8
     
    Ecrire 
    eval(img+".src=a["+nb+"].src");

    au lieu de 
    eval("img.src=a["+nb+"].src");
    0
  3. Binabik
     
    euh ... non ça marche toujours pas :/
    0
  4. kij_82 Messages postés 4102 Date d'inscription   Statut Contributeur Dernière intervention   857
     
    Pour ce genre de traitement, je te conseil le javaScript :

    fichier javascript à inclure :

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    // Changement d'image :

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;

    // Ici une petite fonction pour loader tes images liens :
    function preloadImages() {
    if (document.images) {
    home_over = newImage("images/home-over.gif");
    home_click = newImage("images/home-click.gif");
    register_over = newImage("images/register-over.gif");
    register_click = newImage("images/register-click.gif");
    forum_over = newImage("images/forum-over.gif");
    forum_click = newImage("images/forum-click.gif");
    download_over = newImage("images/download-over.gif");
    download_click = newImage("images/download-click.gif");
    links_over = newImage("images/links-over.gif");
    links_click = newImage("images/links-click.gif");
    login_bouton_over = newImage("images/login_bouton-over.gif");
    login_bouton_down = newImage("images/login_bouton-down.gif");
    preloadFlag = true;
    }
    }

    Exemple d'utilisation : index.php :

    <td rowspan="2" valign=top>
    <a href="../index.php"
    onmouseover="changeImages('home', '../images/home-over.gif'); return true;"
    onmouseout="changeImages('home', '../images/home.gif'); return true;"
    onmousedown="changeImages('home', '../images/home-over.gif'); return true;"
    onmouseup="changeImages('home', '../images/home-over.gif'); return true;"
    onclick="changeImages('home', '../images/home-click.gif');">
    <img name="home" src="../images/home.gif" width="47" height="45" border="0" alt=""></a></td>

    Voilà a toi de décoder ;)

    @+
    0

  5. Vous n’avez pas trouvé la réponse que vous recherchez ?

    Posez votre question
  6. beeboo Messages postés 27 Statut Membre 8
     
    Ok j'ai trouvé, tu as oublié de mettre des quotes autour de img dans le passage de paramètres . Docn voilà le code qui marche : 

    <html>
<head>
<script language="JavaScript">

var a
a=new Array();
a[0]=new Image;
a[0].src="/img2.gif";
a[1]=new Image;
a[1].src="/img1.gif";

//change l'image
function roll(img,nb) {
eval(img+".src=a["+nb+"].src");
}


</script>
</head>

<body>
<A HREF="#"
onmouseover="roll('img1',0)";
onmouseout="roll('img1',1)">
<img name="img1" src="img1.gif" border="0">Lien</a><br>


</body>
</html>


    avec en gras, les corrections par rapport au code original
    0

Discussions similaires

java script error in the main process
ceciel2307 -
Thibaut -

3 réponses
Impression Miroir ?
paquicora -
robin -

3 réponses
comment faire pour mettre une image en miroir (facile)
pinouette -
Moa -

2 réponses
Javascript Arrondi à 2 chiffres après la virgule
jeremy -
gravityaerox -

12 réponses
Arrondir nombre Math.round
ohklik -
Sugel -

1 réponse