Hover - POP UP

[nentus]

Wie bekomme ich es hin, das wenn ich über ein bild mit der maus gehe, das ein kleines Pop Up erscheint mit einem Bild?

 

[Gottox]

Ganz einfach:

<a href="#" onmouseover="window.open('LINK','poup','width=BREITE,height=HÖHE')">Mouseover</a>

Ist aber nervig, wenn man aus versehen über den link fährt und dann ein neues Fenster auf geht... Besuchern gefällt das sicher nicht...

 

[fluessig]

Geht das nicht auch ohne ein neues Fenster, so dass man mit einem div eine neue Ebene einblendet und das nur bei onmouseover passiert?

 

[Gottox]

Jippie, auf die Frage hab ich gewartet:

In den Head:

<script>
function getLeft(elm)
	{
	var mOffsetLeft = elm.offsetLeft;
	var mOffsetParent = elm.offsetParent;

	while(mOffsetParent) {
		mOffsetLeft += mOffsetParent.offsetLeft;
		mOffsetParent = mOffsetParent.offsetParent;
	}
	return mOffsetLeft;
	}
function getTop(elm)
	{
	var mOffsetTop = elm.offsetTop;
	var mOffsetParent = elm.offsetParent;

	while(mOffsetParent){
		mOffsetTop += mOffsetParent.offsetTop;
		mOffsetParent = mOffsetParent.offsetParent;
	}
function setDiv(elem)
	{
	var popup = document.getObjectById('popup');
	popup.style.display = "block";
	popup.style.left = getLeft(elem);
	popup.style.top = getTop(elem);
	}
</script>

In den Body

<div id="popup" onmouseout="this.style.display='none'" style="position:absolute;display:none">
Inhalt
</div>
<a href="#" onmouseover="setDiv(this)">MOUSEOVER</a>

Beim Mouseover erschein der Layer an der Position des Links, wenn man den Layer mit der Maus verlässt verschwindet er wieder.

Wie immer keine garantie fürn funktionstüchtigen Script, ist ungetestet...

 

[fluessig]

Ich wußte du hast es drauf Gottox ;-)

 

[Gottox]

*lmao*
Das nehm ich mal als echtes Kompliment!
Danke!

 

[nentus]

Das habe ich gesucht , danke @ Gottox

 

[PhoenixXP]

Ist in dem JS-Script ein Fehler in der Funktion getTop() ?

Es fehlt die Rückgabe der vertikalen Position (return mOffsetLeft;) und die schließende Klammer (})

Korrekturvorschlag:

function getLeft(elm)
{
    var mOffsetLeft = elm.offsetLeft;
    var mOffsetParent = elm.offsetParent;

    while(mOffsetParent) {
        mOffsetLeft += mOffsetParent.offsetLeft;
        mOffsetParent = mOffsetParent.offsetParent;
    }
    return mOffsetLeft;
}
function getTop(elm)
{
    var mOffsetTop = elm.offsetTop;
    var mOffsetParent = elm.offsetParent;

    while(mOffsetParent){
        mOffsetTop += mOffsetParent.offsetTop;
        mOffsetParent = mOffsetParent.offsetParent;
    }
    return mOffsetTop;
}
function setDiv(elem)
{
    var popup = document.getObjectById('popup');
    popup.style.display = "block";
    popup.style.left = getLeft(elem);
    popup.style.top = getTop(elem);
}

 

[Gottox]

Tja, sowas passiert manchmal mit copy & paste... Danke für die Korrektur!

 

[OnkelGonzo]

Öhm... blöde Frage, aber wie kann ich diese DIVs bestimmen? Also wo sie liegen etc.



Gruß,
Gonzo