Ajout dynamique de lien sur balise <img>
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:
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:
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:
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
