onmouseover mit Vorschaubild

Crunk Jay · 10.05.2007

Hallo allerseits!

Ich bin auf der Suche nach einem kleinen HTML-Code. Ich suche schon die ganze Zeit bei Google, werde aber leider nicht fündig, da ich auch nicht genau weiß, wie man das nennt, was ich suche.
Ich kenne das von manchen Communities.
Also:
Ich habe mir eine kleine Webpräsenz gebastelt, wo es auch eine Userliste gibt und wenn man da in dieser Userliste auf einen der Namen klickt, kommt man auf seine "persönliche Seite"... Also eine Art persönliches Profil (mit Bild etc.)

Ich möchte nun, wenn man mit der Maus über diesen Usernamen fährt (hinter dem sich ein Link verbirgt), dass man ein kleines Vorschaubild seines Fotos bekommt. Also so etwa 150x150 Pixel groß. Das Bild soll aber, solange der Mauszeiger über dem Link ist, dem Zeiger folgen und keinen festen Platz haben, an dem das Bild auf der Seite angezeigt wird.

Ich hoffe, ihr versteht, was ich meine.
Wenn nicht, bitte fragt mich, mir ist das alles wohl mehr oder weniger wichtig.

Dankeeeee

[EDIT]
Hier nochmal schnell ein Beispiel... den Mauszeiger habe ich eben dazu gemalt...

Solange man hier mit der Maus über einer der Icons in der Userliste dort fährt, erhält man ein Vorschaubild von dem User... und dieses Vorschaubild ist in dem genau dem Abstand immer von dem Mauszeiger entfernt.
[/EDIT]

fox99 · 10.05.2007

hab mir mal das beispiel von http://www.wendenburg.de/jstipps/mousepos.php ausgeliehen und ein wenig geändert... meinst du das so ungefähr?

HTML:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
	
	<title>Mouseposition</title>

<meta name="Description" content="Mausposition herausfinden">
<meta name="Keywords" content="mouse,position,mouseposition,javascript,tipp,webdesign,onmousemove,event,scrollposition">
<meta name="Author" content="[email protected]">

<style type="text/css">
body, html {
    margin:0;
    padding:0;
}

input {
    border: 1px solid gray;
    width:160px;
    margin:30px 0 0 30px;
    padding:2px;
    font-family: sans-serif;
    font-size: 12px;
}
</style>

<script language="javascript1.2" type="text/javascript">

var dx=20;
var dy=20;

// find out if ie runs in quirks mode
//
var docEl = (
             typeof document.compatMode != "undefined" && 
             document.compatMode        != "BackCompat"
            )? "documentElement" : "body";

// register event
// capture it for nc 4x (ok it's a dino)
//
function init_mousemove() {
    if(document.layers) document.captureEvents(Event.MOUSEMOVE);
    document.onmousemove =	dpl_mouse_pos;
}

function dpl_mouse_pos(e) {

    // position where mousemove fired
    //
    var xPos    =  e? e.pageX : window.event.x;
	var yPos    =  e? e.pageY : window.event.y;

	
	// for ie add scroll position
	//
	if (document.all && !document.captureEvents) {
	    xPos    += document[docEl].scrollLeft;
	    yPos    += document[docEl].scrollTop;
    }
    
    // display position
    //
    document.feld.ausg.value    =  "Left = " + xPos + " : Top = " + yPos;
	var box = document.getElementById("blubb");
	box.style.left=(xPos+dx)+"px";
	box.style.top=(yPos+dy)+"px";
    
    // for the dino pass event
    //
    if (document.layers) routeEvent(e);
}
function setcol(col){
var box = document.getElementById('blubb');
box.style.backgroundColor="#"+col;
box.innerHTML = col;
box.style.display ="block";
}

function hideit(){
var box = document.getElementById('blubb');
box.style.display ="none";
}
</script>

</head>
<body onload="init_mousemove()">
<form name="feld"><input type="text" name="ausg"></form>
<a href="#" onmouseover="setcol('00f');" onmouseout="hideit()">111</a><br>
<a href="#" onmouseover="setcol('0f0');" onmouseout="hideit()">222</a><br>
<a href="#" onmouseover="setcol('0ff');" onmouseout="hideit()">333</a><br>

<div style="position:absolute;background-color:#f00; width:100px; height:100px;" id="blubb"></div>
<div style="height:1000px"></div>
</body>
</html>

Crunk Jay · 10.05.2007

Ja, so meinte ich das

Bloß, dass da kein farbiges Fenster kommen sollte, sondern ein Bild.
Ich hatte nun auch herausgefunden, was ich genau suchte... das war ein Tooltip als Bild. Und dann hab ich mich mal rangesetzt, 3 verschiedene Tutorials zur Hand genommen und siehe da, es klappt sogar.
Trotzdem vielen Dank

onmouseover mit Vorschaubild

Crunk Jay

fox99

Crunk Jay

onmouseover mit Vorschaubild

ANGEBOTE & SPONSOREN

Neueste Beiträge

Statistik des Forums