Ergebnis 1 bis 4 von 4
  1. #1
    krabbat ist offline Grünschnabel
    registriert
    06-09-2011
    Beiträge
    1

    z-index Zuweisung für JS onmouseover

    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:

    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-Code:
    <!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-Code:
    <!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

  2. #2
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: z-index Zuweisung für JS onmouseover

    Wieso gibst du deinem "trailimg" nicht ein z-index: 10000; ?

    PS: Dein Code ist irgendwie unoptimal. document.all braucht man bei keinem gebräuchlichen Browser mehr... und warum du Opera komplett außen vor nimmst, verstehe ich auch nicht ganz.

  3. #3
    Avatar von jspit
    jspit ist offline Lounge-Member
    registriert
    19-06-2009
    Beiträge
    1.712

    AW: z-index Zuweisung für JS onmouseover

    Nach meinen Wissensstand braucht man gar kein z-index, wenn das div mit dem Vorschaubild im HTML-Code hinter den anderen Grafiken platziert wird.
    Das sollte im Normalfall immer möglich sein.
    Beispiel: Santorini Bildergalerie (dort rechts auf die Karte gehen)

  4. #4
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.757

    AW: z-index Zuweisung für JS onmouseover

    So kann man eine Node natürlich auch in den Vordergrund bringen... aber nur, wenn die anderen Elemente keinen z-index > 1 haben.

Ähnliche Themen

  1. Antworten: 18
    Letzter Beitrag: 23-02-2011, 18:30
  2. for schleife und variablen zuweisung - problem
    Von atrioom im Forum JavaScript
    Antworten: 2
    Letzter Beitrag: 28-05-2010, 13:34
  3. Antworten: 4
    Letzter Beitrag: 13-09-2005, 09:33
  4. Problem bei Zuweisung von event Handlern
    Von BlackHawk im Forum JavaScript
    Antworten: 4
    Letzter Beitrag: 08-06-2005, 14:24
  5. Problem mit Zuweisung eines Formularwertes
    Von JoseY im Forum JavaScript
    Antworten: 0
    Letzter Beitrag: 14-10-2004, 17:54

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •