Salut,
tu as un problème de guillemets ici :
Ça arrive fréquemment quand on mélange les codes de différents langages, en l’occurence PHP, HTML et JS.
Tu peux voir facilement le problème en examinant le code HTML de la page (Ctrl+U), ou avec l’inspecteur des outils de développement (F12) de tout navigateur.
Une première façon de limiter les problèmes de guillemets est d’utiliser la syntaxe heredoc :
1
2
3
4
5
6
7
8
9
10
11
12
13
| <?php
$Dimensions = getimagesize($Image);
require_once '../REDIMENSIONNEMENT/Redimensionnement_.php';
$Sequence = 1;
$Dimensions = Redimensionnement_($Dimensions, $Sequence);
echo <<<GROSECHO
<a href="{$Variable[$i][9]}" target="_blank"
onmousemove="infoBulle('{$Variable[$i][9]}')"
onmouseout="hideBulle()">
<img id="Variable06R00" src="$Image" border="0" width="{$Dimensions[0]}" height="{$Dimensions[1]}" alt=""></img>
</a>
<br/><br/>
GROSECHO; |
Une façon plus « durable », au sens de plus facile à maintenir, est de séparer les couches HTML et JS, donc supprimer les attributs d’évènements (onmousemove, etc.) et de les remplacer par des gestionnaires d’évènement directement dans le code JS.
1
2
3
| <a href="{$Variable[$i][9]}" target="_blank"
onmousemove="infoBulle('{$Variable[$i][9]}')"
onmouseout="hideBulle()" > |
1
2
3
4
5
6
7
| var lien = … // réfléchir à un moyen de sélectionner le rien
lien.addEventListener('mousemove', function (event) {
infobulle(this.href);
});
lien.addEventListener('mouseout', function (event) {
hidebulle();
}); |
Si je ne t’ai pas donné directement le code de sélection du lien c’est parce que je remarque que ton bout de code fait probablement partie d’une boucle, à en juger par la présence de cette variable $i. Et dans cette boucle tu génères une image avec un id. Par conséquent tu vas te retrouver avec plusieurs images portant le même id dans ta page, et c’est une situation qu’il vaut mieux éviter.
Si cet id te permet d’ajouter du style à l’image, il te suffit de le changer en classe, et de changer les déclarations CSS #Variable06R00 en .Variable06R00. Mais si tu as réellement besoin de cibler l’image précise par son id, il suffit de rajouter une partie variable à l’attribut id, par exemple $i, comme ceci :
<img id="Variable06R00_$i" src="$Image" border="0" width="{$Dimensions[0]}" height="{$Dimensions[1]}" alt=""></img>
Pour en revenir à la sélection du lien, le problème est qu’il y a en fait plusieurs liens. Je te suggère de leur ajouter une classe, par exemple lien-infobulle. Ensuite tu as deux solutions.
La première solution est de faire une boucle pour ajouter les gestionnaires d’évènements à chaque lien :
1
2
3
4
5
6
7
8
9
| var liens = document.querySelectorAll('.lien-infobulle');
for (var i = 0, len = liens.length; i < len; i++) {
liens[i].addEventListener('mousemove', function (event) {
infobulle(this.href);
});
liens[i].addEventListener('mouseout', function (event) {
hidebulle();
});
} |
La seconde est de déléguer la gestion d’évènement, à l’élément qui contient tous les liens. Je vais supposer qu’il a un id #container.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| var container = document.querySelector('#container');
container.addEventListener('mousemove', function (event) {
var target = event.target;
if (target.className.indexOf('lien-infobulle') > -1) {
infobulle(target.href);
}
});
container.addEventListener('mouseout', function (event) {
var target = event.target;
if (target.className.indexOf('lien-infobulle') > -1) {
hidebulle();
}
}); |
Bien sûr j’écris tout ça en vanilla (sans framework), mais tu as l’idée générale. Si tu utilises un framework (par exemple jQuery), je pense qu’il ne te sera pas difficile de réécrire mon code à la manière de ce framework.
InfoBulle dans un: echo "<a href=
Répondre avec citation
Partager