JavaScripts -> Bilder -> Bild als Tooltip

Mit dem Image Tooltip können Sie beim Berühren eines Elementes mit der Maus ein Bild einblenden lassen (mit Preloader).

Kompatibilität getestet:
Beispiel Anzeigen >>

Script-Code

<script type="text/javascript">
<!--
// = = ================================================================== = =
// = = Image Tooltip v1.0 (c) 2004 Triple-M / http://www.htmlarsenal.de = =
// = = ================================================================== = =

// --------------------------------------------------------------------------
// -- Dieses Script und viele andere im --
// -- This script and many more in the --
// --------------------------------------------------------------------------
// -- HTML ARSENAL - Die Quelle für HTML, JavaScript, PHP --
// -- HTML ARSENAL - Your Source for HTML, JavaScript, PHP --
// --------------------------------------------------------------------------
// -- -= http://www.htmlarsenal.de =- --
// --------------------------------------------------------------------------

// Benutzung
// =========

// In ein HTML-Element, für das das Bild angezeigt werden soll, fügen Sie bitte den folgenden Code ein
// (<tag ...) onMouseOver="imagetip(Nummer)" onMouseOut="kill()" (...>)
// wobei "Nummer" die Position des Bildes in der Bilderliste ist (beginnend bei 0)
// also z.B. <a onMouseOver="imagetip(0)" onMouseOut="kill()" ...>

// Usage
// =====

// Insert the following code in a HTML-Element, for that the image should be displayed:
// (<tag ...) onMouseOver="imagetip(Number)" onMouseOut="kill()" (...>)
// where "Number" means the position of the image in the image list (starting with 0)
// e.g.: <a onMouseOver="imagetip(0)" onMouseOut="kill()" ...>

// Veränderbare Einstellungen / Adjustable Settings
// ================================================

var imgurls=new Array("/pics/examples/gallery01.jpg","/pics/examples/gallery02.jpg","/pics/examples/gallery03.jpg","/pics/examples/tt0.gif");
  // Bilderliste. Sie können beliebig Bilder entfernen oder hinzufügen
  // Image list. You may freely remove or add images.

// Script-Code
// ===========

// Ab hier bitte nichts mehr verändern
// Please do not change anything from here on

var mousex=0;
var mousey=0;

var images=new Array();
var i;
var displayed=0;

for(i=0;i<imgurls.length;i++) {
  images[i]=new Image();
  images[i].src=imgurls[i];
}

function capturemaus(nsevent) {
  if(window.event) {
    mousex=window.event.clientX;
    mousey=window.event.clientY;
  }
  else {
    mousex=nsevent.pageX;
    mousey=nsevent.pageY;
  }
  if(displayed) {
    el=document.getElementById("imagetip");
    el.style.left=(mousex+12)+"px";
    el.style.top=(mousey+20)+"px";
  }
}

document.onmousemove=capturemaus;


function imagetip(num) {
  var el;
  displayed=1;
  el=document.createElement("img");
  el.src=images[num].src;
  el.style.position="absolute";
  el.style.left=(mousex+12)+"px";
  el.style.top=(mousey+20)+"px";
  el.setAttribute("id","imagetip");
  document.getElementsByTagName("body")[0].appendChild(el);

}

function kill() {
  displayed=0;
  var tip=document.getElementById("imagetip");
  tip.parentNode.removeChild(tip);
}

// ----------------------------
// -- Ende / End Script-Code --
// ----------------------------
// -- Image Tip --
// -- Author: Triple-M --
// -- www.htmlarsenal.de --
// -- 24.Mar.2004 --
// ----------------------------

//-->
</script>