11548 sujets

JavaScript, DOM et API Web HTML5

[Résolu] Attribuer position souris à un div JS PB Firefox

Bonjour à tous,

voila je vous expose mon petit problème,
je souhaiterais attribuer un contenu et un attribut de position (celle de la souris en fait) à un div lorsque je survol un lien (par exemple).

voici le code JS que j'ai bricolé :
<script>
function register_position(){
 var posx = 0;
 var posy = 0;
 document.onmousemove = position;
}

function position(e){
 if (!e) var e = window.event;
 if (e.pageX || e.pageY){
  posx = e.pageX;
  posy = e.pageY;
 }
 else if (e.clientX || e.clientY){
  posx = e.clientX + document.body.scrollLeft + document.documentElement.scrollLeft;
  posy = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
 }
}

function affImage(contenu,contenant) {
  if (document.all) {
    with (document.all[contenant]) {
      innerHTML = contenu;
      style.display = "block";
	  style.left = posx + 10;
	  style.top = posy + 10;
      }
    }
  else if (document.getElementById) {
    with (document.getElementById(contenant)) {
      innerHTML = contenu;
      style.display = "block";
	  style.left = posx + 10;
	  style.top = posy + 10;
      }
    }
  }

function cachImage(contenant) {
  if (document.all) {
    document.all[contenant].style.display="none";
    }
  else if (document.getElementById)
    {
    document.getElementById(contenant).style.display = "none";
    }
  }
</script>


Et le HTML :
<body onLoad="javascript:register_position()">
<div id="texte">Lorem ipsum dolor sit amet, consecte <strong><em onMouseOver="affImage('bonjour<br /><img src=\'Sans titre-1.jpg\' />','affichage')" onMouseOut="cachImage('affichage')">(voir l'image)</em></strong> convallis dui arcu et dolor. Ut mauris. Sed odio est, condimentum ut, <strong><em onMouseOver="affImage('bonjour2<br /><img src=\'Sans titre-1.jpg\' />','affichage')" onMouseOut="cachImage('affichage')">Voir l'image 2</em></strong> molestie et, dapibus quis, ipsum. Integer sapien.</div>
 <div id="affichage" style="display:none; position: absolute; border: 1px solid #000; background-color: #FFF;"></div>
</body>


Et mon problème est donc que cela fonctionne très bien sur IE6, IE7, Opéra, mais pas sur Firefox ni Safari Smiley decu

Donc je me permet de solliciter votre aide.
Merci beaucoup, et désolé si le message est un peu long.
Modifié par Kapoue (26 Jun 2007 - 10:43)
J'avais fait un tooltip il-y-a quelque temps, c'est un peu semblable a ce que tu veux faire je penses, tu peu peut-etre t'en inspirer.

Voici mon fichier javascript :


var isIE = document.all;
var mouseX = 0;
var mouseY = 0;

function getMouseXY(e)
	{
		if (!e) e = window.event;	
		if (e)
			{
				mouseX = isIE ? (e.clientX + document.body.scrollLeft) : e.pageX;
				mouseY = isIE ? (e.clientY + document.body.scrollTop) : e.pageY;
			}
	}

document.onmousemove = getMouseXY;

function tooltipShow(msg)
	{
		document.getElementById("tooltip").innerHTML=msg;
		document.getElementById("tooltip").style.visibility ="visible";
		document.getElementById("tooltip").style.left = mouseX +"px";
  		document.getElementById("tooltip").style.top = mouseY +"px";
	}

function tooltipHide()
	{
		document.getElementById("tooltip").style.visibility ="hidden";
	}


Voici la div dans ma page html :


<div id="tooltip" style="position:absolute;visibility:hidden;"> </div>


dans tes liens tu peux mettre par exemple :

onmouseover="tooltipShow('message a afficher dans le tooltip');" onmouseout="tooltipHide();"

Voila, j'esperes que ca peux t'aider.
lol,
et dire que ça fait 1 semaine que je galère a essayer de trouver d'ou venait le bug, j'aurai du venir ici plus tôt,

merci beaucoup Krafton, c'est exactement ce qu'il me fallait.
Sujet clos
Aller à