Forum

Réagissez dans les forums de JDN Développeurs

Le but ici est de permettre à l'utilisateur de n'afficher une image que s'il le souhaite. Nous avons choisi une méthode cachant un div via une CSS, et la remplissant/l'affichant grâce à JavaScript, ce qui permet de mettre plusieurs images de ce type sur une page.

Pour répondre à cette question, nous allons construire un script autour de notre petit script permettant de récupérer les coordonnées de la souris. Vous pouvez voir le résultat en passant la souris au-dessus du texte (voir l'image).

Le code
<script>
var posX=0;
var posY=0;
var decalageX=10;
var decalageY=10;

if(navigator.appName.substring(0,3) == "Net")
  document.captureEvents(Event.mousemove);
document.onmousemove = sourisxy;

function sourisxy(e)
  {
  posX = (navigator.appName=="Netscape") ? e.pageX : event.x + document.body.scrollLeft;
  posY = (navigator.appName=="Netscape") ? e.pageY : event.y + document.body.scrollTop;
  }

function affImage(contenu) {
  var posXdef = posX - decalageX;
  if (posXdef < 0) posXdef = 0;
  if (document.all) {
    with (document.all["affichage"]) {
      innerHTML = contenu;
      style.top = posY + decalageY;
      style.left = posXdef;
      style.visibility = "visible";
      }
    }
  else if (document.getElementById) {
    with (document.getElementById("affichage")) {
      innerHTML = contenu;
      style.top = posY + decalageY;
      style.left = posXdef;
      style.visibility = "visible";
      }
    }
  }

function cachImage() {
  if (document.all) {
    document.all["affichage"].style.visibility="hidden";
    }
  else if (document.getElementById)
    {
    document.getElementById("affichage").style.visibility = "hidden";
    }
  }
</script>

<div id="affichage" style="position:absolute; top:0; left:0; visibility:hidden"></div>
<div id="texte">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec tristique, est euismod tristique vehicula, pede nulla venenatis lacus, eget <i onMouseOver="affImage('<img src=\'http://www.journaldunet.com/developpeur/ image/tetiere/logo_jdn_developpeurs.gif\' width=\'302\' />')" onMouseOut="cachImage()">(voir l'image)</i> convallis dui arcu et dolor. Ut mauris magna, commodo ut, viverra vitae, eleifend nec, elit. Sed odio est, condimentum ut, molestie et, dapibus quis, ipsum. Integer sapien.</div>