Posez votre question Signaler

Affichage au Survol de la souris [Résolu]

Messages postés
15
Date d'inscription
lundi 19 mai 2003
Statut
Membre
Dernière intervention
19 août 2019
 -
Javascript / DHTML Posez votre question Signaler
Bonjour et merci pour l'aide que vous m'accorderez,

Donc, voici mon problème, j'ai une page en php, sur laquelle j' affiche une icone et un texte au survol de la souris, du moins ce que je voudrais. 

 <div class="meteo">
        <!--<a href="#" onMouseOver="displayDivInfo('Je me nomme toto <br />essai');" onMouseOut="displayDivInfo()">-->
        <a href="#" onMouseOver="displayDivInfo('<?php echo($commentaire); ?>');" onMouseOut="displayDivInfo()">   
                            Météo du jour :   <img src=<?php echo($temps); ?> alt="Météo" /></a>
                       </div>


Mon JS


function displayDivInfo(text){
   alert(\''.$text.'\', \'Information !\');
    if(text){
        //Détection du navigateur
        is_ie = (navigator.userAgent.toLowerCase().indexOf("msie") != -1) && (navigator.userAgent.toLowerCase().indexOf("opera") == -1);
        
        //Création d'une div provisoire
        var divInfo = document.createElement('div');
        divInfo.style.position = 'absolute';
        document.onmousemove = function(e){
            x = (!is_ie ? e.pageX-window.pageXOffset : +event.x+document.body.scrollLeft);
            y = (!is_ie ? e.pageY-window.pageYOffset : +event.y+document.body.scrollTop);
            
           // divInfo.style.left = x+15+'px';
           // divInfo.style.top = y+15+'px';
                
                divInfo.style.left = x+20+'px';
                divInfo.style.top = y+30+'px';

        }
        divInfo.id = 'divInfo';
        divInfo.innerHTML = text;
        document.body.appendChild(divInfo);
    }
    else{
        document.onmousemove = '';
        document.body.removeChild(document?getElementById(divInfo));
    }
}


Si j'active le texte plutôt que la variable cela fonctionne, j en deduis que le navigateur n interprete pas mon php car j ai cette erreur
Uncaught SyntaxError: Invalid or unexpected token

mais voilà comment faire pour que cela fonctionne???

Merci de vos réponses.

Afficher la suite 

3 réponses

Signaler Commenter la réponse de @karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
 51
0
Merci
bonjour

pas sur que le probleme vient de php le code js est un peut vieux.

teste avec ce code 

function displayDivInfo(evt,text){

if(!document.getElementById('divInfo')){

var divInfo = document.createElement('div');
divInfo.id = 'divInfo';
divInfo.style.position = 'absolute';
document.body.appendChild(divInfo);
}


var el=document.getElementById('divInfo')

if(text){
	el.textContent=text;
	el.style.display='block'

	evt.currentTarget.onmousemove=function(evt){

		var el=document.getElementById('divInfo')
		var dde=document.body.scrollTop ? document.body : document.documentElement;
		evt =(!evt) ? window.event : evt;
		var XX =evt.clientX + dde.scrollLeft;
		var YY =evt.clientY + dde.scrollTop;
		el.style.top=YY-15+'px'
		el.style.left=XX+15+'px'
	}

}

else{
el.onmousemove = '';
el.style.display='none'
}
}


et il faut ajouter event dans la partie php 

<div class="meteo">
        <!--<a href="#" onMouseOver="displayDivInfo(event,'Je me nomme toto <br />essai');" onMouseOut="displayDivInfo()">-->
        <a href="#" onMouseOver="displayDivInfo(event,'<?php echo($commentaire); ?>');" onMouseOut="displayDivInfo()">   
                            Météo du jour :   <img src=<?php echo($temps); ?> alt="Météo" /></a>
                       </div>



Signaler Commenter la réponse de RaphaDragon
RaphaDragon
Messages postés
15
Date d'inscription
lundi 19 mai 2003
Statut
Membre
Dernière intervention
19 août 2019
 -
Bonjour et merci d'avoir pris le temps de me répondre,

Donc dans mes essais avec ton code, cela s'affiche si c'est du texte pure la ligne 'Je me nomme toto' par exemple mais si c'est la variable php rien ne s'affiche.
Un véritable casse-tête
Si tu as une idée je suis preneur.

Encore merci et bon dimanche
Signaler Commenter la réponse de RaphaDragon
RaphaDragon
Messages postés
15
Date d'inscription
lundi 19 mai 2003
Statut
Membre
Dernière intervention
19 août 2019
 -
Cela avance, avec ton code si je fais 

<div class="meteo">
                            <?php $commentaire = "Je me nomme Toto <br \>". "essai 2"; ?>
                            <!-- <a href="#" onMouseOver="displayDivInfo(event,'Je me nomme toto <br />essai');" onMouseOut="displayDivInfo()"> -->
                           <a href="#" onMouseOver="displayDivInfo(event,'<?php echo($commentaire); ?>');" onMouseOut="displayDivInfo()">  
                            Météo du jour :   <img src=<?php echo($temps); ?> alt="Météo" /></a>
                       </div>


Là cela fonctionne, même si il ne retourne pas à la ligne, donc maintenant cela provient du texte de ma variable.

Donc encore merci maintenant je recherche de ce coté là.
Signaler Commenter la réponse de RaphaDragon
RaphaDragon
Messages postés
15
Date d'inscription
lundi 19 mai 2003
Statut
Membre
Dernière intervention
19 août 2019
 -
Pour l'Affichage de l info au passage de la souris impeccable.
Probleme c est qu impossible qu il prenne en compte mon retour à la ligne dans le texte, une idée??

j'ai essayé avec <br /> avec "\r\n" plein de trucs pas moyen

Au cas ou merci
Commenter la réponse de @karamel
Signaler Commenter la réponse de @karamel
Messages postés
1731
Date d'inscription
vendredi 9 mai 2008
Statut
Modérateur
Dernière intervention
1 décembre 2019
 51
0
Merci
normalement pour conserver le formatage on utiliser la balise <p> 

var divInfo = document.createElement('p');
Commenter la réponse de @karamel
Signaler Commenter la réponse de RaphaDragon
Messages postés
15
Date d'inscription
lundi 19 mai 2003
Statut
Membre
Dernière intervention
19 août 2019
0
Merci
Merci d'avoir pris le temps de me répondre, en fait la solution était de remplacer 

       el.textContent=text;


par 

       el.innerHTML =text;


Encore merci pour ton aide.
Très bonne soirée
Commenter la réponse de RaphaDragon
Répondre Posez votre question