Forum d'entraide PHPFrance

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 !

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

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.

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 !

Forum d'entraide PHPFrance

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

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