Hej superflydk,
Læste lige din problemstilling igen og det kunne godt lyde som om du ville have mulighed for at klikke på eventuelle links i popup'en. Så jeg har udvidet scriptet så dette også er muligt (når musen føres hen over popup'en lukkes den ikke, den lukkes først når musen føres udenfor grænserne af popup'en). Hvis du ønsker at popup'en lukkes når musen føres hen over den skal du bare sætte "clickable" til "false" i javascriptet. Scriptet er desuden browser-uafhængigt og virker derfor fint i IE, FF og Opera. :)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 Transitional//EN" "
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="
http://www.w3.org/1999/xhtml"> <head>
<title>popup demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
<script type="text/JavaScript">
var margin = 2;
var hideDelay = 0.1;
var clickable = true;
var curDiv;
var timeoutDate;
var performHide;
function Show(elm, divId, position)
{
catchEvent(elm, "mouseout", StartTimeout);
if(curDiv != null)
Hide(curDiv.id);
curDiv = document.getElementById(divId);
var elmPos = findPos(elm);
//Get element dimensions
var elmPosX = elmPos[0];
var elmPosY = elmPos[1];
var elmWidth = elm.offsetWidth;
var elmHeight = elm.offsetHeight;
//Get div dimensions
var popupWidth = curDiv.offsetWidth;
var popupHeight = curDiv.offsetHeight;
var posX = 0;
var posY = 0;
switch(position)
{
case 'top':
posX = (elmPosX + elmWidth/2) - (popupWidth/2);
posY = elmPosY - popupHeight - margin;
break;
case 'bottom':
posX = (elmPosX + elmWidth/2) - (popupWidth/2);
posY = elmPosY + elmHeight + margin;
break;
case 'left':
posX = elmPosX - popupWidth - margin*2;
posY = (elmPosY + elmHeight/2) - (popupHeight/2);
break;
default: // 'right'
posX = elmPosX + elmWidth + margin*2;
posY = (elmPosY + elmHeight/2) - (popupHeight/2);
break;
}
posX = Math.max(posX, 0);
posY = Math.max(posY, 0);
curDiv.style.left = posX + "px";
curDiv.style.top = posY + "px";
curDiv.style.visibility = 'visible';
StopTimeout();
if(clickable)
{
catchEvent(curDiv, "mouseout", StartTimeout);
catchEvent(curDiv, "mouseover", StopTimeout);
}
}
function StartTimeout()
{
performHide = true;
timeoutDate = new Date();
timeout = setTimeout("Timeout()", 100);
}
function StopTimeout()
{
performHide = false;
}
function Timeout()
{
if(!performHide)
return;
var date = new Date();
var diff = (date - timeoutDate)/1000;
if(diff > hideDelay)
{
if(curDiv != null)
Hide(curDiv.id);
return;
}
timeout = setTimeout("Timeout()", 100);
}
//Hides div-tag
function Hide(divId)
{
var popup = document.getElementById(divId);
popup.style.visibility = 'hidden';
}
//Returns the position of an object
function findPos(obj)
{
var curleft = curtop = 0;
if (obj.offsetParent)
{
curleft = obj.offsetLeft;
curtop = obj.offsetTop;
while (obj = obj.offsetParent)
{
curleft += obj.offsetLeft;
curtop += obj.offsetTop;
}
}
return [curleft,curtop];
}
function catchEvent(elm, strEvent, Function)
{
if (elm.addEventListener) // FireFox
elm.addEventListener(strEvent, Function, false);
else if (elm.attachEvent) // IE
elm.attachEvent("on"+strEvent, Function);
else // IE can do this, maybe some XYZbrowser has none of the above.
{
elm["on"+strEvent] = Function;
elm[strEvent] = Function;
}
}
</script>
</head>
<body>
<table>
<tr style="height: 100px;">
<td></td>
</tr>
<tr>
<td style="width: 200px;"></td>
<td><div id="test1" onmouseover="Show(this, 'pop1', 'top');" style="border: solid 1px gray"> test1 popup over</div></td>
</tr>
<tr>
<td style="width: 200px;"></td>
<td><div id="Div1" onmouseover="Show(this, 'pop2', 'right');" style="border: solid 1px gray"> test2 popup højre</div></td>
</tr>
<tr>
<td style="width: 200px;"></td>
<td><div id="Div2" onmouseover="Show(this, 'pop2', 'left');" style="border: solid 1px gray"> test3 popup venstre</div></td>
</tr>
<tr>
<td style="width: 200px;"></td>
<td><div id="test2" onmouseover="Show(this, 'pop2', 'bottom');" style="border: solid 1px gray"> test4 popup under</div></td>
</tr>
</table>
<div id="pop1" style="position: absolute; visibility: hidden; border: solid 1px black;">Her kan indsættes hvad som helst (billede, knap, etc.)</div>
<div id="pop2" style="position: absolute; visibility: hidden; border: solid 1px black;">
<table width="200px">
<tr align="center">
<td> test</td>
</tr>
<tr align="center">
<td colspan="2">alt kan indsættes</td>
</tr>
<tr align="center">
<td>
<a href="
http://www.google.dk">link til google</a>
</td>
</tr>
</table>
</div>
</body>
</html>
Håber du kan bruge det! :)
Mvh.
- Snap
