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