InfoBulle dans un: echo "<a href=

Version imprimable

Mon code:

Code:

1
2
3
4
5
6
7
8
9
10
<?php
     echo "<a href='".$Variable[$i][9]."' target='_blank'
	 onmousemove='infoBulle('".$Variable[$i][9]."')'
	 onmouseout='hideBulle()'>";
	 $Dimensions = getimagesize($Image);
	 include("../REDIMENSIONNEMENT/Redimensionnement_.php");
	 $Sequence = 1;
	 $Dimensions = Redimensionnement_($Dimensions,$Sequence);
	 echo "<img id='Variable06R00' src='".$Image."' border='0' width='".$Dimensions[0]."' height='".$Dimensions[1]."' alt=''></img>";
	 echo "</a><br/><br/>";

J'achoppe sur l'affichage de mon InfoBulle.

Salut,

tu as un problème de guillemets ici :

Code:

onmousemove='infoBulle('

Ç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 :
Code:

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.
Code:

1 2 3 <a href="{$Variable[$i][9]}" target="_blank" onmousemove="infoBulle('{$Variable[$i][9]}')" onmouseout="hideBulle()" >
Code:

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 :

Code:

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

:arrow: La première solution est de faire une boucle pour ajouter les gestionnaires d’évènements à chaque lien :
Code:

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(); }); }
:arrow: 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.
Code:

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.

Débutant en JavaScript, j'avoue que pour un problème d'urgence, de compréhension et de facilité j'utiliserai la première solution en attendant de m'attaquer à la 2ème.
J'ai donc appliqué la solution ' echo <<<GROSECHO ', celui-ci fonctionne et la redirection s'effectue mais mon InfoBulle ne s'affiche toujours pas:
Code:

1 2 3 4 5 6 7 8 9 10 $Dimensions = getimagesize($Image); include("../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;
Si je remplace

Code:

onmousemove="infoBulle('{$Variable[$i][9]}')"

par

Code:

onmousemove="infoBulle('Ceci est mon InfoBulle')"

alors l'InfoBulle s'affiche.

14/01/2017, 07h17
NoSmoking

Bonjour,
tu n'as pas suivi les instructions du professeur Watilin à savoir

Citation:

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.

et tu as incomplètement lu son lien

Citation:

Une première façon de limiter les problèmes de guillemets est d’utiliser la syntaxe heredoc :

qui indique en substance

Citation:

Avertissement Il est très important de noter que la ligne contenant l'identifiant de fin ne doit contenir aucun autre caractère, mis à part un point-virgule (;). Cela signifie en particulier que l'identifiant ne doit pas être indenté, et qu'il ne doit y avoir aucun espace ou tabulation avant ou après le point-virgule.