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:
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>
<!--
// = = ================================================================== = =
// = = 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>