Comment se passer de OnMouseOver ?

[php_addict]

bonjour

je sollicite une fois de plus votre avis sur une question qui me turlupine depuis peu:

est ce possible de se passer de OnMouseOver dans mon cas:

j'ai tout un tas d'images cliquables de la sorte:

Code :

<area shape="poly" coords="262,250,298,..." href="#" onmouseover="fonction('47');return false;"

j'attribut un OnMouseOver sur des dixaines de area shape

j'ai calculé que si je pouvais me passer de ce code JS, j'economiserais plus de 7 Ko de données à générer pour PHP

je sais 7Ko de donnée c'est pas grand chose et je me prends la tête pour rien, cependant:

est il possible de ne pas mettre OnMouseOver (et OnMouseOut) sur les images cliquables mais de les mettre...heu...je sais pas...dans un fichier .JS externe??

- est ce possible?
- de quelles fonctions ou event JS ais je besoin pour réaliser cela?
- vais je avoir des problèmes de compatibilité entre IE, FF, chrome, opera, etc... ?

merci de m'avoir lu

bonne journée

[Allwise]

Au lieu de mettre un onmouseover sur toutes tes balises area,
tu fais une boucle en javascript sur tous les éléments de type area et tu leur ajoutes l'événement onmouseover.
T'auras ton code qu'une seule fois dans la page, de cette façon.

[Roworll]

Les bibliothèques JS du style mootools ou jquery font cela très bien.

[php_addict]

merci pour vos reponses, je n'avais pas envisagée la chose comme ca

Au lieu de mettre un onmouseover sur toutes tes balises area,
tu fais une boucle en javascript sur tous les éléments de type area et tu leur ajoutes l'événement onmouseover.
T'auras ton code qu'une seule fois dans la page, de cette façon.

quand tu dis "tu leur ajoutes l'événement onmouseover." :
ca se passe comment ?: un truc du genre document.getElementById('id').innerHTML

autant dire que PHP je commence un peu à maitriser, mais le JS reste dans bien des domaines une enigme...

[Sephi-Chan]

Non, plutôt en ajoutant des listeners.

for(element in elements){

  element.addEventListener('mouseover', function(overed_element){

    /* ... */

  });

}

Mais l'ajout de listeners n'est pas cross-browser, d'où l'intérêt des librairies.

• MDC - element.addEventListener
  

Sephi-Chan

[php_addict]

une derniere question:

dans mootools ou jquery , quelle API dois je utiliser? j'avous n'avoir j'avais utilisé ni l'un ni l'autre...

C'est penible le JS...je veux dire suivant un navigateur ou un autre...grrrr....

encore merci

[Sephi-Chan]

Oui, c'est pénible. Mais on a d'excellents outils pour ne pas être emmerdés. Contrairement à CSS…

Avec jQuery, la méthode à utiliser est mouseouver() ça pourrait donner.

$('#map area').mouseover(function(event){

  /* Dans ce contexte, this pointera sur l'élément survolé. */

  /* Et plutôt que return false, on utilisera event.prevendDefault(); */

});

En revanche, comme tu n'est plus dans du Javascript in-line, les arguments à passer (tels que ton 47) doivent être transmis autement en script.
Pour ma part, j'exploite le côté XML de XHTML en faisant une entorse à ce dernier en utilisant des attributs personnalisés.

<area shape="poly" coords="…" href="#" territory_id="47" />

Et je peux récupérer cette valeur ainsi (en reprenant le fragment de code) :

$('#map area').mouseover(function(event){

  var territory_id = $(this).attr('territory_id');

  /* Je fais c'que je veux, avec mes cheveux. */



  event.prevendDefault();

});

Voilà. Certains n'aiment pas, ils utilisent alors des plugins comme jQuery Metadata. Moi je trouve que c'est une approche pragmatique.

Alors c'est clair que ce n'est pas valide : pour l'être, il faut créer un DTD à soi qui change les règles de validation (en autorisant la balise <area /> à recevoir un attribut territory_id, par exemple). Mais après on tombe dans le débat de la sémantique : va-t-on briser la sémantique du document en ajoutant de tels attributs ? Et après tout, pourquoi être valide ? Etc.


Petit note à ce sujet, HTML 5 autorise les attributs personnalisés. Il utilise la syntaxe suivante :

<area shape="poly" coords="…" href="#" data-territory_id="47" />

Sephi-Chan

[php_addict]

whaou, merci pour ta reponse...

moi qui m'étais dis que je n'utiliserais pas de framework...je vais peut être revoir mon point de vue...

utilises-tu JQUERY comme tel, ou extrait tu du code des librairies pour les integrer à ton code?

ce qui me déplait dans les framework, c'est si le framework n'est plus mis à jour, ou que le projet soit abandonné...enfin bref, c'est une autre histoire...

merci pour ton aide

[NicoMSEvent]

j'utilise le framework "prototype + scriptaculous", si il n'est plus maintenu, je continuerai a fonctionner avec la version actuelle que j'ai actuellement, et qui fonctionne très bien pour ce que j'en fait

gros avantage, j'utilise les même fonctions peu importe le navigateur... j'en ai vite eu marre de maintenir mon JS pour 4 navigateurs différents (sans compter tous les autres plus petits navigateurs et/ou anciennes versions)

@sephichan : pas bête les attributs personnalisés
Ce n'est pas très valide, mais tant que tu es certain que cet attribut n'est pas déja utilisé ou ne sera jamais utilisé...
Par contre, si un navigateur est tres strict, et qu'il n'affiche que les pages 100% valides, la tienne ne s'affichera pas (et l'internaute qui a ce navigateur ne verra pas les 99,99% des sites web aussi )

[php_addict]

Par contre, si un navigateur est tres strict, et qu'il n'affiche que les pages 100% valides, la tienne ne s'affichera pas (et l'internaute qui a ce navigateur ne verra pas les 99,99% des sites web aussi )

tu pense à quels navigateurs "stricts" ? linx ?