Ajout dynamique de lien sur balise <img> [Résolu]

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,

Citation:

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

Citation:

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.

Citation:

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

Citation:

Envoyé par Bovino

Code :

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

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

ne fonctionnerait pas mieux ?

Citation:

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

Citation:

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

Citation:

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

Citation:

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

Citation:

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 ?

16/02/2011, 16h42	#2
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	a quel moment est lancé ce script ? ou est il placé sur la page ? __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/02/2011, 16h52	#4
SpaceFrog Rédacteur/Modérateur Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Inscription : mars 2002 Messages : 30 007 Détails du profil Informations personnelles : Sexe : Localisation : Royaume-Uni Informations professionnelles : Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Analyste Programmeur Secteur : Industrie Informations forums : Inscription : mars 2002 Messages : 30 007 Points : 45 091 Points : 45 091	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. __________________ Ma page Developpez Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts) Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir... Votre post est résolu ? Alors n'oubliez pas le Tag réalisations :www.planet-languages.com\|www.saftair.com\| www.ouestisol.fr \| www.sebemex.fr \| www.extramiante.fr \| www.sistac-alizay.fr \| www.acoustishop.fr \| www.litt.fr \| www.ouestventil.fr
	00

16/02/2011, 16h59	#5
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 805 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 805 Points : 35 807 Points : 35 807	Code : Sélectionner tout - Visualiser dans une fenêtre à part img.onclick = function(){window.open(this.src);}; ne fonctionnerait pas mieux ? __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	00

16/02/2011, 21h47	#11
Bovino Responsable Développement Web Didier Mouronval Développeur Web Inscription : juin 2008 Messages : 13 805 Détails du profil Informations personnelles : Nom : Didier Mouronval Âge : 41 Localisation : France, Gironde (Aquitaine) Informations professionnelles : Activité : Développeur Web Secteur : High Tech - Éditeur de logiciels Informations forums : Inscription : juin 2008 Messages : 13 805 Points : 35 807 Points : 35 807	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é... __________________ Pas de question technique par MP ! Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi ! Vous possédez un blog et aimeriez diffuser vos billets sur le forum, contactez-moi ! Mes formations video2brain : La formation complète sur JavaScript • JavaScript et le DOM par la pratique • PHP 5 et MySQL : les fondamentaux Mon livre sur jQuery
	10

16/02/2011, 16h49	#3
micmackill Invité régulier Inscription : août 2010 Messages : 28 Détails du profil Informations forums : Inscription : août 2010 Messages : 28 Points : 8 Points : 8	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.
	00

16/02/2011, 17h01	#6
micmackill Invité régulier Inscription : août 2010 Messages : 28 Détails du profil Informations forums : Inscription : août 2010 Messages : 28 Points : 8 Points : 8	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 !
	00

16/02/2011, 17h06	#7
micmackill Invité régulier Inscription : août 2010 Messages : 28 Détails du profil Informations forums : Inscription : août 2010 Messages : 28 Points : 8 Points : 8	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.
	00

16/02/2011, 21h29	#10
micmackill Invité régulier Inscription : août 2010 Messages : 28 Détails du profil Informations forums : Inscription : août 2010 Messages : 28 Points : 8 Points : 8	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.
	00

17/02/2011, 09h13	#15
micmackill Invité régulier Inscription : août 2010 Messages : 28 Détails du profil Informations forums : Inscription : août 2010 Messages : 28 Points : 8 Points : 8	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 !
	00

Outils de la discussion
Afficher une version imprimable Envoyer un lien vers cette page par email