Attribuer un évènement OnMouseOver à toutes les balises img

13 sept. 2008, 23:33

Bonsoir à tous,

J'ai un gros trou de mémoire, il me semble le savoir mais je me rappelle plus comment faire

Le but est d'attribuer un évènement OnMouseOver à toutes les balises <img />

Parce-qu'actuellement quand je fais une while en PHP, il y a:

Code : Tout sélectionner

<img src="..." alt="..." onmouseover="fonction(param1, param2);" />

Et la boucle met du temps à ce faire, et je voudrai donc alléger le temps en faisant un truc en JS qui permettrait d'attribuer ce OnMouseOver à absolument toutes les images

Voilà,
Merci de votre aide !

13 sept. 2008, 23:48

Bonsoir,
Trouvé sur cet article: http://www.pompage.net/pompe/javascript ... hapitre-2/ (au passage, cet article fait partit d'une série de cinq très instructifs

)

Code : Tout sélectionner

function trouveimg()
{
 var imgs,i;
// parcourons toutes les images du document
 imgs=document.getElementsByTagName('img');
 for(i=0;i<imgs.length;i++)
 {
// testons la présence de la classe 'roll'
  if(/roll/.test(imgs[i].className))
  {
// ajoutons la fonction 'roll' à l'image quand la souris passe dessus (onmouseover)
// et quand elle s'en éloigne (onmouseout)
// puis faisons passer l'image elle-même en tant que paramètre de type objet à la fonction roll()
   imgs[i].onmouseover=function(){roll(this);};
   imgs[i].onmouseout=function(){roll(this);};
  }
 }
}

à modifier à souhait

14 sept. 2008, 00:03

Si l'on ne veut pas se contenter d'un DOM niveau 0 (autrement dit, si l'on veut faire du code JavaScript conforme aux standards du DOM et non conflictuel), on peut essayer ce code alternatif :

Code : Tout sélectionner

function fnEvenement ()
{
  // Une précaution
  if (!document.getElementsByTagName) return;
  
  // On sélectionne tous les éléments img
  var aImg = document.getElementsByTagName ('img');
  
  // On parcourt le tableau généré par la méthode
  for (var i = 0; i < aImg.length ; i ++)
  {
    var oImg = aImg[i];
    oImg.setAttribute ('onmouseover', 'fonction (param1, param2)');
    // On double cet événement de façon à ce qu'il soit également accessible lorsqu'on utilise un moyen de contrôle autre que la souris
    oImg.setAttribute ('onfocus', 'fonction (param1, param2)');
    // Si jamais IE n'ajoute pas ces événements avec la méthode setAttribute,
    // utiliser le bloc de commentaire conditionnel ci-dessous (qui cible IE 7 et versions antérieures)
    /*@cc_on
      @if (@_jscript_version <= 5.7)
        var sImg = '<img src="' + oImg.getAttribute ('src') + '" alt="' + oImg.getAttribute ('alt') + '" onmouseover="fonction (param1, param2)" onfocus="fonction (param1, param2)" />';
        oImg.outerHTML = sImg;
      @end
    @*/
  }
}

if (window.addEventListener) window.addEventListener ('load', fnEvenement, false);
else window.attachEvent ('onload', fnEvenement);

Tu enregistres le tout sous un fichier JavaScript externe, que tu appelles au moyen de l'élément script :

Code : Tout sélectionner

<head>
<script type="text/javascript" src="le-javascript-ci-dessus.js"></script>
</head>

Quelques mots à propos des commentaires conditionnels en JavaScript (balisés par /*@cc_on et @*/) : les if, else if et else y sont nommés respectivement @if, @elif et @else, le mot-clé @end étant obligatoire pour fermer une batterie de conditions (à l'instar d'endif; en PHP si l'on n'utilise pas d'accolades quand plusieurs instructions sont indiquées) ; la variable @_jscript_version permet de récupérer la version de JScript (le JavaScript à la sauce IE) utilisée par les différentes versions d'IE (5.6 pour IE 6, 5.7 pour IE 7), ce qui est idéal pour cibler telle ou telle version d'IE ; bien entendu, les navigateurs autres qu'IE traitement ces commentaires conditionnels comme de simples commentaires.

14 sept. 2008, 00:38

Ok, merci pour la rapidité, alors j'ai testé le code, je veux finalement plutôt tester avec des inputs

Voilà :

function findinput(){
	var inputs;
	var i = 0;
	var inputs = document.getElementsByTagName('input');
	alert(inputs);
	while( i<inputs.length ){
		var Object = inputs[i];
		Object.onmouseover=function(){invC(Object.name);};
		var i=i+1;
	}
} 

function invC(object){
	alert(object);
	/*...*/
}

Si le code s'est autant modifier depuis, c'est parce-que je cherche à le débugger, mais sans succès... en fait, quand je survole un input (checkbox dans mon cas) il m'envoie un alert (normal) mais le contenu de celui si est TOUJOURS le même, à savoir le name du dernier (= de la page) input... bizarre !

et quand je fais directement :

	while( i<inputs.length ){
		inputs[i].onmouseover=function(){invC(inputs[i].name);};
		var i=i+1;
	}

Ça marche pas du tout... alala, il a le sens de l'humour JavaScript ^^

Merci de votre aide !

Attribuer un évènement OnMouseOver à toutes les balises img

Qui est en ligne