11548 sujets

JavaScript, DOM et API Web HTML5

Rollover

Bonjour à tous,
J'ai inséré du code javascript dans ma page afin d'obtenir un rollover sur plusieurs images.
Cependant, sur ma première image seulement le rollover fonctionne.

Mon code entre <head> et </head> :


<SCRIPT LANGUAGE="Javascript">
        
		home=new Image( );
        home.src="images/home_hover.png";
		
		about=new Image( );
        about.src="images/about_hover.png";
		
		portfolio=new Image( );
        portfolio.src="images/portfolio_hover.png";
		
		contact=new Image( );
        contact.src="images/contact_hover.png";
      
</SCRIPT>


Mon code dans <body> :
<ul id="navigation">
		<li><a href="index.php" onmouseover="home.src='images/home_hover.png';" onmouseout="home.src='images/home.png';" title="Home"><img src="images/home.png" name="home" alt="Home" border="0"/></a></li>
		<li><a href="about.php" onmouseover="about.src='images/about_hover.png';" onmouseout="about.src='images/about.png';" title="About"><img src="images/about.png" alt="About" border="0"/></a></li>
		<li><a href="portfolio.php" onmouseover="portfolio.src='images/portfolio_hover.png';" onmouseout="portfolio.src='images/portfolio.png';" title="Portfolio"><img src="images/portfolio.png" alt="Portfolio" border="0"/></a></li>
		<li><a href="contact.php" onmouseover="contact.src='images/contact_hover.png';" onmouseout="contact.src='images/contact.png';" title="Contact"><img src="images/contact.png" alt="Contact" border="0"/></a></li>
		</ul>


Merci d'avance pour votre aide!
tu debutes surement en javascript donc une solution :
- met des id sur tes images
- trouve les images avec document.getElementById('home') par ex
- tu peux aussi regarder le mot clef "this", et ce que c'est les Nodes

glouglou peut aussi t'aider, je pense que tu ne devrais même pas poser ce genre de question sans avoir chercher un peu...
Bonjour,
Je me permets de remonter ce topic, je n'ai pas trouvé de réponse à ma question.
Les tutoriaux que j'ai trouvé s'interressant seulement à une image... quand est il dans mon cas ?
Darked a écrit :
Les tutoriaux que j'ai trouvé s'interressant seulement à une image... quand est il dans mon cas ?

Dans ton cas le code JS que tu as utilisé comporte deux parties:
- Une première partie qui utilise des noms de variables (non déclarées comme telles avec le mot-clé var...), crée de nouveaux objets Image, et sert à priori à faire un préchargement des images de rollover.
- Une deuxième partie qui est un code JavaScript dans les attributs d'évènement onmouseover et onmouseout, et qui dit grosso modo: voilà la nouvelle URL pour l'attribut src de l'image machin.

Je ne suis pas sûr que la première partie marche tout court, mais à la rigueur c'est secondaire. Pour la deuxième partie, par contre, ça repose sur l'utilisation des attributs name dans le code HTML. L'instruction suivante:
home.src='nouvelle url';
signifie "voici la nouvelle URL pour l'attribut src de l'élément qui porte le name "home".

Le problème, c'est que les attributs name ne sont pas utilisés correctement dans le code HTML, mais juste pour la première ligne. Il faudrait donc, au minimum, corriger cela.

Plus globalement, cette manière de coder est plutôt obsolète car elle repose sur un certain nombre de mauvaises pratiques:
- utilisation implicite des name;
- utilisation de name sur une image là où HTML 4 recommande l'utilisation de id;
- JavaScript intrusif (code dans les attributs onmouseover et onmouseout).
Sans compter les deux-trois erreurs HTML dans le code.

Comme le suggérait à mi-mot blackkus, il serait bon d'apprendre les bases de JavaScript plutôt que de copier-coller du code sans le comprendre. Smiley cligne
Salut,

La lecture de cet article te permettra de nettoyer ton code html :

<ul id="navigation">
	<li><a href="index.php" title="Home"><img src="images/home.png" alt="Home"/></a></li>
	<li><a href="about.php" title="About"><img src="images/about.png" alt="About"/></a></li>
	<li><a href="portfolio.php" title="Portfolio"><img src="images/portfolio.png" alt="Portfolio" border="0"/></a></li>
	<li><a href="contact.php" title="Contact"><img src="images/contact.png" alt="Contact"/></a></li>
</ul>


Le javascript sera donc placé dans un fichier séparé, dans mon exemple dans un dossier "scripts" regroupant tes javascripts, il suffira de placer le code suivant dans ton header:
<script type="text/javascript" src="scripts/menu_hover.js"></script>


Pour éviter de devoir sélectionner les images selon un name, un id ou une classe, une méthode simple est de remplacer celle ci par son nom avec _hover à la fin, par exemple "home.png", sera remplacé par "home_hover.png"

Exemple :
function hoverMenu(){
  var menuImg = document.getElementById('navigation').getElementsByTagName('img');
  for (var j=0, l=footerLinks.length; j<l; j++){
  
    var myimages=new Array()
    myimages[j]=new Image()
    myimages[j].src=menuImg[j].src.replace(".gif", "_hover.png");

    menuImg[j].onmouseover = function(){
      this.src = (this.src.indexOf("_hover") == -1)? this.src.replace(".png", "_hover.png") : this.src;     
    };
    menuImg[j].onmouseout = function(){
      this.src = (this.src.indexOf("_hover") != -1)? this.src.replace("_hover.png", ".png") : this.src;    
    };
     
  };
};


Il ne te reste plus qu'à appeler la fonction
Modifié par matmat (03 May 2009 - 17:57)
Sujet clos
Aller à