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 ?

**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.

**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.

Ajout dynamique de lien sur balise <img>

JavaScript

Vue hybride

Discussions similaires

Partager

Partager