Discussion :

[Negaton]

Bonjour,

Je suis loin d'être le meilleur en javascript !

J'ai développé un survol / preview d'image basé sur du code trouvé sur le net.

Le survol est sur le hover / on mouse move des balises html <img>

L'image de preview étant plus grande (autre chemin) que l'image survolée, j'ai ajouté des balises perso dans mon tag img. Par exemple, celle ci-devient

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="cheminpetiteimage.jpg" srcimagepreview="cheminimagepreview.jpg"/>

J'ai donc inventé la balise "srcimagepreview"

Dans le code javascript, j'utilise cette balise avec :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.srcimagepreview

Et ma question :
ce code marche en internet explorer mais pas sur chrome, firefox, opera et safari. Est ce un problème de syntaxe ?

Pour info :
> je suis sur une appli en asp.net
> ma page affiche 16 imagettes à survoler

Merci

[SpaceFrog]

J'ai donc inventé la balise "srcimagepreview"

Balise ??? ou attribut ...


je penche pour attribut

essaye

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

this.getAttribute('srcimagepreview')

sinon il faudra attribuer dynamiquement l'attribut aux images pour que les autres navigateurs les prennent en compte

[Negaton]

Merci pour ton aide

Tu as raison, ce doit être un "attribut"

J'ai tenté ta solution et j'ai du mal m'y prendre car ça marche toujours sur ie mais toujours pas sur firefox

Mon code html :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img class="ImagePreviewSurvol" chemin_image_preview="../articles/NC5143_2.jpg" coef_image2_preview="2.5" align="top" alt="" src="../articles/NC5143_1.jpg" style="border: 0px solid white;"/>

Extrait du javascript :

$("body").append("<p id='ImagePreviewSurvol'><img src='" + this.getAttribute('chemin_image_preview') + "' alt='Preview'/>" + sLocal_PiedPreview + "</p>");

[SpaceFrog]

essaye de l'attribuer sur la doc ready avant

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$('.imgspeciale').attr('chemin_image_preview','lecheminimage')

[Negaton]

Merci pour ton aide.

Ton premier post avait bien résolu le message mais pour je ne sais quelle raison, le code javasript exécuté était du code avant la modif (cache)

[sekaijin]

attention à la confusion entre propriété et attribut

malheureusement trops souvent on a vu une notation de propriété pour des attributs IE étant très laxiste
pas exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

myImg.src='/mon/images.jpg';

pour changer l'image d'un élément img
or selon la définition du DOM ceci corresponds à l'affectation d'une valeur à une propriété de l'objet myImg et non au changement de la valeur de l'attribut src. mais la force de l'usage fait que cela à été intégré au binding DOM/JS

dans l'interaction entre DOM et js chaque éléments du DOM est accessible à javascript sou la forme d'un objet javascript de type DomElement
cet objet est un élément du DOM et en ce sens doit implémenter la norme DOM il a donc des méthodes définies par le DOM et des attributs définies par le DOM il a ensuite un ensemble de propriété "standards" comme parent, childnodes etc.
enfin en tant qu'objet javascript il peut être enrichie dynamiquement de méthodes js et de propriété js

le DOM HTML est très souple et outre les attributs standards il autorise les attribut perso.

du coup on peut ajouter soit des attributs soit des propriétés
les propriétés sont accessible via la notation pointé
les attributs via les méthode setAttribute et getAttribute

tout serait parfaitement clair si ne s'ajoutait à cela une confusion entre DOM et HTML.
le code HTML de votre page n'est pas le contenu de votre page c'est un TEXTE et rien de plus. votre page est le résultat de l'interprétation de ce texte par le navigateur.
en quoi cette précision peut nous aider ? simplement en mettant de la distance entre ce qu'on écrit en html et ce qu'on obtient.
un exemple simple

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<table>test<tr><td/></tr></table>

ceci ne va pas créer comme on l'imagine un élément table contenant un texte test suivit d'un élément tr contenant un élément td comme ceci

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
element:table
  textnode:test
  element:tr
    element:td

l'interprète html du navigateur va corriger ce source pour le rendre conforme à la norme. (suivant le moteur) on obtient donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
textnode:test
element:table
  element:tbody
    element:tr
      element:td

vous conviendrez que ça diverge quelque peut le text node est sortit de la table et un tbody est apparu.

revenons à nos attributs et propriétés.
le source html ne permet pas de définir de propriétés
c'est un premier point important html ne connaît que les attributs.
et là encore il y a des écarts entre les attributs HTML et le DOM
là aussi un exemple sera plus parlant

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
<a marque="perso"
   href="lien.html" 
   onClick="alert(this.getAttribute('href'); return false">test</a>

voyons comment un tel code sera interprété

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
element:a {
  attributes:{marque:'perso', href:'lien.html'},
  href:'lien.html',
  onclick: function {
    this.getAttribute('href');
    return false
  }
  textnode:test

ici on constate que href est bien un attribut de l'objet DOM
Mais on constate que pour faciliter le travail une propriété href à aussi été ajoutée
Alors que marque est bien un attribut et rien d'autre.
autre constat onClick qui est un attribut HTML n'est pas un attribut du DOM et il n'est pas non plus une propriété ou une méthode.
l'interprétation de l'attribut HTML onClick donne une méthode du DOM qui s'appelle onclick et non onClick et qui ne contient pas le contenu de l'attribut HTML mais une fonction javascript dont le corps est le contenu de cet attribut HTML.
onClick est donc un attribut html contenant un texte (code source du corps d'une fonction)
onclick est une méthode de l'élément DOM (une fonction javascript crée par l'interprète avec le code source de onClick)

ces distinctions impliquent quelques adaptations de notre part.
utiliser getAttribute et setAttribute pour les attributs du DOM
utiliser la notation pointé pour modifier ou créer une méthode (standard ou pas)
utiliser la notation pointé pour les propriétés.
Donc

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
myAHref.setAttribute('marque', 'une marque à moi');
myAHref.prop=45;
myAHref.onmouseover = function () {....}

attention onClick et autres attributs d'événement html n'étant pas des attributs DOM ne permettent pas de définir un gestionnaire d'événement.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

myAHref.setAttribute('onMouseOut', 'alert(this.prop)');

ne définit pas de méthode pour gérer le l'événement onmouseout. ce code ajoute un attribut perso à l'élément qui contient le texte. 'alert(this.prop)'

A+JYT