Hi Leute, ein kleines Problem zum nachdenken.
Ich versuche, über ein Image via Javascript via onmouseover eine popup-Vorschau des Bildes zu legen und hab dabei das Problem der z-index Zuweisung.
JS ist folgender:
...und meine html-Seite sieht folgendermaßen aus:
...in dieser Form funktioniert der JS so, dass das Vorschaubild über dem thumbnail angezeigt wird.
Setze ich dieses Thumbnail aber in einen AP-Div (ist notwendig, da via Schleife aus Datenbank generiert), plaziert sich die JS-Vorschau grundsätzlich hinter dem Thumbnail.
Sieht dann im Code schematisch folgendermaßen aus:
Bin entweder blind oder zu blöd zu suchen. Hab bisher keine Lösung gefunden.
Kann da jemand weiterhelfen?
Vielen Dank im voraus...
krabbat
Ich versuche, über ein Image via Javascript via onmouseover eine popup-Vorschau des Bildes zu legen und hab dabei das Problem der z-index Zuweisung.
JS ist folgender:
Code:
var w=1
var h=1
if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px;border:1px solid #888888;background:#DDDDDD;"><img id="ttimg" src="img/s.gif" /></div>')
function gettrailobj()
{
if (document.getElementById) return document.getElementById("trailimageid").style
else if (document.all) return document.all.trailimagid.style
}
function truebody()
{
return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}
function hidetrail()
{
document.onmousemove=""
document.getElementById('ttimg').src='/img/s.gif'
gettrailobj().visibility="hidden"
gettrailobj().left=-1000
gettrailobj().top=0
}
function showtrail(width,height,file)
{
if(navigator.userAgent.toLowerCase().indexOf('opera') == -1)
{
w=width
h=height
// followmouse()
document.getElementById('ttimg').src=file
document.onmousemove=followmouse
gettrailobj().visibility="visible"
gettrailobj().width=w+"px"
gettrailobj().height=h+"px"
}
}
function followmouse(e)
{
if(navigator.userAgent.toLowerCase().indexOf('opera') == -1)
{
var xcoord=20
var ycoord=20
if (typeof e != "undefined")
{
xcoord+=e.pageX
ycoord+=e.pageY
}
else if (typeof window.event !="undefined")
{
xcoord+=truebody().scrollLeft+event.clientX
ycoord+=truebody().scrollTop+event.clientY
}
var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)
if (xcoord+w+3>docwidth)
xcoord=xcoord-w-(20*2)
if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
ycoord=ycoord-h-20;
gettrailobj().left=xcoord+"px"
gettrailobj().top=ycoord+"px"
}
}...und meine html-Seite sieht folgendermaßen aus:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tooltip.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body>
<div style="display: none; position: absolute;
z-index: 110; left: 400; top: 100; width: 15;
height: 15" id="preview_div"></div>
<img src="smallpic.jpg" width="100" height="142" style="padding-top:23px;" onmouseover="showtrail(310,440,'largepic.jpg');" onmouseout="hidetrail();" />
</body>
</html>...in dieser Form funktioniert der JS so, dass das Vorschaubild über dem thumbnail angezeigt wird.
Setze ich dieses Thumbnail aber in einen AP-Div (ist notwendig, da via Schleife aus Datenbank generiert), plaziert sich die JS-Vorschau grundsätzlich hinter dem Thumbnail.
Sieht dann im Code schematisch folgendermaßen aus:
HTML:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="tooltip.js"></script>
<script type="text/javascript" src="ajax.js"></script>
<style type="text/css">
#apDiv1 {
position:absolute;
width:200px;
height:115px;
z-index:1;
}
</style>
</head>
<body>
<div style="display: none; position: absolute;
z-index: 110; left: 400; top: 100; width: 15;
height: 15" id="preview_div"></div>
<div id="apDiv1">
<img src="smallpic.jpg" width="100" height="142" style="padding-top:23px;" onmouseover="showtrail(310,440,'largepic.jpg');" onmouseout="hidetrail();" />
</div>
</body>
</html>Bin entweder blind oder zu blöd zu suchen. Hab bisher keine Lösung gefunden.
Kann da jemand weiterhelfen?
Vielen Dank im voraus...
krabbat
