Ajout dynamique de lien sur balise <img>

**micmackill** · 16/02/2011, 16h40

Bonjour à tous,

Je suis confronté à un problème que je n'ai réussi que partiellement à résoudre, n'étant pas expert en la matière je m'en remets à vous !

Je vous présente la situation :

Site intranet Sharepoint
IE8
WebPart des annonces

Pour ceux qui ne s'y connaissent pas, vous n'avez qu'à voir la chose comme un CMS, l'objectif étant de redimensionner automatiquement les images à l'intérieur des posts, et d'ajouter un lien vers elles-même sur celles-ci quand la résolution de l'écran de l'utilisateur est faible et qu'elles sont trop grandes, tout ceci sans intervention des rédacteurs.

Exemple simplifié :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div class="post" id="1">
...
<img src="SRC1" width="800"/>
...
</div>
<div class="post" id="2">
...
<img src="SRC2" width="500"/>
...
</div>

Devient si on ne veut pas d'image plus large que 700px :

Code html :

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

1
2
3
4
5
6
7
8
9
10
11
 
<div class="post" id="1">
...
<a href="SRC1"><img src="SRC1" width="700"/></a>
...
</div>
<div class="post" id="2">
...
<a href="SRC2"><img src="SRC2" width="500"/></a>
...
</div>

N'ayant pas trouvé comment rajouter une balise parent à une balise (ajouter <a> .. </a> en l'occurence), j'ai décidé de simplement rajouter un 'onclick',
Voici ce que j'obtiens :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
var imgs=document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; ++i) {
	var img = imgs[i];
  	if(img.width > 470 && screen.width < 1280){
  		imgsrc = img.src;
  		img.style.cssText = 'width: 470px !important; height: auto !important; cursor:pointer;';
                img.attachEvent("onclick", function(){window.open(imgsrc);});
  	}	
  	else if(img.width > 700) {
  		img.style.cssText = 'width: 700px !important; height:auto !important;';
  	}
}

Pourquoi attachEvent ? Parcequ'IE ne gère pas ou mal setAttribute (en l'occurence ça ne fonctionne pas du tout pour onclick).

Pas de souci au niveau du redimensionnement des images, le code fait exactement ce que je veux en fonction de la taille des images et/ou de la résolution de l'écran.

Le problème se trouve au niveau des liens des images : le code ajoute bien un 'onclick' à toutes les images, mais rajoute la même adresse pour toutes les images (adresse d'une image de la page, je ne sais pas pourquoi c'est l'adresse de telle image et pas d'une autre).
D'après moi cela devrait marcher puisque le code en question se trouve bien dans la boucle avec une variable ..

Précision : le code n'est destiné qu'à IE8, l'entreprise n'utilisant que ce navigateur.

Une idée ?

Merci d'avance

**SpaceFrog** · 16/02/2011, 16h42

a quel moment est lancé ce script ?
ou est il placé sur la page ?

**micmackill** · 16/02/2011, 16h49

Bonjour SpaceFrog, merci de ta contribution.

Le script est placé dans <head>, j'aurais voulut l'écrire en tant que fonction sur body.onload, mais ceci impliquerait de modifier une masterpage et donc de le lancer pour toutes les pages, or ce script n'est destiné qu'à une seule page du site Sharepoint.

**SpaceFrog** · 16/02/2011, 16h52

placé dasn le head sans etre lancé dans le onload implique que tu essaye d'atteindre des objets non encore créés !

place le dans une balise script en bas de page juste avant la balise de fermeture du body.

**Bovino** · 16/02/2011, 16h59

Code :

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

img.onclick = function(){window.open(this.src);};

ne fonctionnerait pas mieux ?

**micmackill** · 16/02/2011, 17h01

Pardon, je dis n'importe quoi.

La balise script contenant le code est placée en bas de page, bien après le contenu.

Ma page .aspx est un peu en foutoir et j'ai mal lu mon PlaceHolder.

Donc pas de souci à ce niveau, le code n'aurait pas du tout marché sinon

!

**micmackill** · 16/02/2011, 17h06

Bonjour Bovino,

Malheureusement dans ce cas là this ne renvoie pas à l'image actuelle (j'ai essayé, this.src renvoie 'undefined').

Merci de ton aide.

**SpaceFrog** · 16/02/2011, 17h12

ton souci provient des tests sur les width ...

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
 
<body>
<div class="post" id="1">
...
<img src="SRC1" width="800"/>
...
</div>
<div class="post" id="2">
...
<img src="SRC2" width="500"/>
...
</div>
<script type="text/javascript">
var imgs=document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; ++i) {
	var img = imgs[i];
  		imgsrc = img.src;
  		img.style.cssText = 'width: 470px !important; height: auto !important; cursor:pointer;';
         img.onclick= function(){alert(this.src)};
 
}
 
</script> 
</body>
 
</html>

**NoSmoking** · 16/02/2011, 19h01

Bonjour,

Envoyé par micmackill

N'ayant pas trouvé comment rajouter une balise parent à une balise (ajouter <a> .. </a> en l'occurence), j'ai décidé de simplement rajouter un 'onclick',

il existe des méthodes bien faite, createElement, inserBefore, removeChild et appendChild avec la particularité pour appendChild de déplacer l'élément si existe, mais il semblerait que cela soit dorénavant déconseillé.

Un exemple de code pour mettre une balise A autour d'une balise IMG

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
var oParent,
    oLien,
    oTmp,
    oImg = document.images;
 
var i = 0,
    nb = oImg.length;
 
for( ; i <nb; i++){
  // get le parent
  oParent = oImg[i].parentNode;
  // creation d'un lien
  oLien = document.createElement('A');
  // insertion du lien devant l'image
  oParent.insertBefore( oLien, oImg[i]);
  // retire l'element, pratique conseillee
  oTmp = oParent.removeChild(oImg[i]);
  // ajout de l'element image supprime au lien
  oLien.appendChild( oTmp);
  // affectation source via un getAttribute et non image.src
  oLien.href = oImg[i].getAttribute('SRC');
}

concernant les affectations de largeur je jouerai plutôt avec le CSS et des classes particulières.

**micmackill** · 16/02/2011, 21h29

Bonjour NoSmoking,

J'avais déjà trouvé ce genre de fonction mais il ne me semblait pas qu'on pouvait faire ce que je désirais, ou peut-être que je n'ai pas assez réfléchi.

En tout cas merci pour cet exemple de code je vais essayer dès demain matin.

**Bovino** · 16/02/2011, 21h47

Juste une petite erreur (d'inattention apparemment) : c'est bien de déclarer les variables hors de la boucle, mais du coup, il ne faut pas les re-déclarer dans la boucle

(et de façon générale, déclarer une variable dans une boucle est une mauvaise pratique).

Et l'astuce du jour :

Code :

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

oTmp = oParent.removeChild(oImg[i]);

Cette ligne utilise le fait que la méthode removeChild() renvoie le noeud supprimé, ce qui permet d'affecter cette valeur de retour à une variable

Sinon, en première intention, j'aurais plutôt utilisé cloneNode() pour remplir le lien créé et replaceChild() pour l'intégrer dans la page qui me semble (et de façon très subjective) plus "philosophiquement" adapté...

**NoSmoking** · 16/02/2011, 22h18

Envoyé par Bovino

Juste une petite erreur (d'inattention apparemment) : c'est bien de déclarer les variables hors de la boucle, mais du coup, il ne faut pas les re-déclarer dans la boucle

(et de façon générale, déclarer une variable dans une boucle est une mauvaise pratique).

comme tu as raison je m'en vais dans la foulée éditer le message, tel le pianiste fou j'ai tapé le code sans même me rendre compte de l'absurdité de la chose.

Envoyé par Bovino

Et l'astuce du jour :

Code :

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

oTmp = oParent.removeChild(oImg[i]);

Cette ligne utilise le fait que la méthode removeChild() renvoie le noeud supprimé, ce qui permet d'affecter cette valeur de retour à une variable

Sinon, en première intention, j'aurais plutôt utilisé cloneNode() pour remplir le lien créé et replaceChild() pour l'intégrer dans la page qui me semble (et de façon très subjective) plus "philosophiquement" adapté...

tout à fait pour l'astuce sur le removeChild, je préfère cette méthode au cloneNode, dans ce cas au moins, car on ne crée rien de plus.

**Willpower** · 17/02/2011, 01h35

Envoyé par Bovino

Code :

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

img.onclick = function(){window.open(this.src);};

ne fonctionnerait pas mieux ?

Envoyé par micmackill

Bonjour Bovino,

Malheureusement dans ce cas là this ne renvoie pas à l'image actuelle (j'ai essayé, this.src renvoie 'undefined').

Merci de ton aide.

la solution de bovino est pourtant la bonne et de loin la plus simple :

voici ton code en ligne avec cette fonction et ça fonctionne :

http://ulb.comli.com/onclick.html

(testé sous IE 8)

autrement, (si tu n'as pas confiance dans le this) ta solution deviendrait simplement :

Code js :

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

1
2
 
		img.onclick = (function(src){return function(){window.open(src);};})(imgsrc);

ou pour garder ton style d'écriture (attachEvent):

Code js :

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

1
2
 
		img.attachEvent("onclick", (function(src){return function(){window.open(src);};})(imgsrc));

bien que la première écriture est plus simple (et compatible à tous les navigateurs) donc même pour un usage unique à IE8, je l'utiliserai.

**Willpower** · 17/02/2011, 02h02

Envoyé par Bovino

(et de façon générale, déclarer une variable dans une boucle est une mauvaise pratique).

j'ai toujours ce (mauvais) reflexe aussi de définir une variable à l'intérieur d'une boucle, pensant que ça va limiter son scope à cette boucle. (sans doute que c'est le cas dans d'autres langages, sinon je ne sais pas d'où j'aurai pu avoir cette fausse idée)

**micmackill** · 17/02/2011, 09h13

Bonjour à tous, et avant tout merci de votre aide =)

Tout d'abord, ça y est j'ai réussi à faire ce que je voulais grâce à l'exemple et aux explications de Bovino et NoSmoking, vous êtes trop forts !

Pour te répondre Willpower, img.onclick est la première chose à laquelle j'ai pensé en élaborant mon code, sauf que ça n'a pas marché et qu'en faisant des recherches sur le web j'ai cru comprendre que cette solution présentait des incompatibilités avec IE. J'ai donc changé de méthode par la suite.

Toujours est-il qu'en testant le code de ton lien (qui est pratiquement identique au mien au départ) dans ma page .aspx, cela ne fonctionne pas. Je ne mets pas ta parole en doute puisqu'en cliquant sur ton lien je vois bien que cela fonctionne, peut-être le problème vient-il de chez moi ?

Encore merci à tous, problème résolu grâce à vous !

**SpaceFrog** · 17/02/2011, 09h15

Code :

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

1
2
3
 oTmp = oParent.removeChild(oImg[i]);
  // ajout de l'element image supprime au lien
  oLien.appendChild( oTmp);

a quoi sert le removeChild ?
un appendChild dans la balise a créé suffit non ?

**NoSmoking** · 17/02/2011, 18h22

Envoyé par SpaceFrog

a quoi sert le removeChild ?
un appendChild dans la balise a créé suffit non ?

oui tout à fait mais il est conseillé pour des problèmes de compatibilte de ne pas sauter l'étape

Si le noeud existe déjà, Il est recommandé d'utiliser la méthode element.removeNode avant element.appenChild
(compatibilité : dolphin browser / OS Bada - device samsung s8500)

le lien d'origine de la lecture

**SpaceFrog** · 17/02/2011, 20h47

Envoyé par SpaceFrog

Code :

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

1
2
3
 oTmp = oParent.removeChild(oImg[i]);
  // ajout de l'element image supprime au lien
  oLien.appendChild( oTmp);

a quoi sert le removeChild ?
un appendChild dans la balise a créé suffit non ?

Ajout dynamique de lien sur balise <img>

JavaScript

Discussions similaires

Partager

Partager