hover im IE ,suckerfish modifizieren?

06.02.2006, 14:24

hallo,
habe ein problem mit dem IE aufgrund seiner unfï¿½higkeit nicht a elemente nicht :hovern zu kï¿½nnen.
suche jetz nach einer einfachen unkomplizierten lï¿½sung um ihm das beizubringen, habe mir schon suckerfish angeschaut das dem IE das ganze per javascript beibringt, leider beherrsche ich absolut kein javascript und weiï¿½ nicht was ich wie anpassen muss damit das ganze bei mir funktioniert , werde aus dem beispiel auch nicht schlau da es auch wieder in eine andere richtung geht.
also wie bekomm ich es hin das es bei mir funktioniert ?
also das z.b. suckerfish statt mit LI mit DIV funktioniert und eben mit den verscheidenen definieretn boxen die ich habe..
am besten schaut ihr euch das ganze mal im firefox und mal im IE an , verdeutlicht das prob wohl am ehesten:
www.illuminatepictures.de.tk/karte.htm

alternativ hab ich es mal versucht das ganze mit <a> explorerkonform darzustellen aber eher mit nï¿½ï¿½igem erfolg , aber vielleicht lï¿½sst sich das ja mit kleineren ï¿½nderungen irgedwie verwenden:
www.illuminatepictures.de.tk/karte2.htm

ansonsten hier mein quelltext (noch etwas unordentlich sry):

Code:

<html>
<head>
<style type="text/css">
#map { position:absolute; top:10px; left:100px; z-index:1; }
#collector { position:absolute; top:440px; left:110px; width:130px; height:64px; z-index:2; cursor:move; }
#vakis { position:absolute; top:420px; left:360px; width:150px; height:40px; z-index:6; cursor:move; }
#thenothas { position:absolute; top:472px; left:610px; width:110px; height:40px; z-index:6; cursor:move; }
#lair { position:absolute; top:170px; left:100px; width:140px; height:40px; z-index:6; cursor:move; }
#liga { position:absolute; top:210px; left:428px; width:120px; height:70px; z-index:6; cursor:move; }
#golgothia { position:absolute; top:150px; left:265px; width:120px; height:70px; z-index:6; cursor:move; }
#norcent { position:absolute; top:253px; left:595px; width:90px; height:40px; z-index:6; cursor:move; }

#collector div{display:none;}

#vakis div{display:none;}

#thenothas div{display:none;}

#lair div{display:none;}

#liga div{display:none;}

#golgothia div{display:none;}

#norcent div{display:none;}

#collector:hover div{
display:block;
width:352px; height:400px;
background:white;
position:absolute;top:-405px;left:10px;
border:2px solid black;
font:normal 14px verdana, sans-serif;
padding:0px;}

#vakis:hover div{
display:block;
width:352px; height:400px;
position:absolute;top:-400px;right:-100px;
border:2px solid black;
background:white;
padding:0px;
font:normal 14px verdana, sans-serif;}

#thenothas:hover div{
display:block;
width:352px; height:400px;
position:absolute;top:-395px;right:0px;
border:2px solid black;
background:white;
padding:0px;
font:normal 14px verdana, sans-serif;}

#lair:hover div{
display:block;
width:352px; height:400px;
position:absolute;top:0px;right:-355px;
border:2px solid black;
background:white;
padding:0px;
font:normal 14px verdana, sans-serif;}

#liga:hover div{
display:block;
width:352px; height:400px;
position:absolute;top:-120px;right:120px;
border:2px solid black;
background:white;
padding:0px;
font:normal 14px verdana, sans-serif;}

#golgothia:hover div{
display:block;
width:352px; height:400px;
position:absolute;top:0px;right:-354px;
border:2px solid black;
background:white;
padding:0px;
font:normal 14px verdana, sans-serif;}

#norcent:hover div{
display:block;
width:352px; height:400px;
position:absolute;top:-150px;right:85px;
border:2px solid black;
background:white;
padding:0px;
font:normal 14px verdana, sans-serif;}

</style>
</head>
<body>




<div id="map">[img]veald.gif[/img]
[img]map.jpg[/img]</div>

<div id="collector">

<div> 

<table cellspacing="0">

<tr>
<td>
[img]col.jpg[/img]
</td>
</tr>

<tr>
<td>
Das ist ein test!
</td>
</tr>

<tr>
<td>
test test test test
</td>
</tr>

</table>

</div>


</div>




<div id="vakis" >

<div>
<table cellspacing="0">

<tr>
<td>
[img]vakis.jpg[/img]
</td>
</tr>

<tr>
<td>
Das ist ein test!
</td>
</tr>

<tr>
<td>
test test test test
</td>
</tr>

</table>


</div>


</div>






<div id="thenothas" >

<div>

<table cellspacing="0">

<tr>
<td>
[img]thenothas.jpg[/img]
</td>
</tr>

<tr>
<td>
Das ist ein test!
</td>
</tr>

<tr>
<td>
test test test test
</td>
</tr>

</table>
</div>


</div>





<div id="lair">

<div>
<table cellspacing="0">

<tr>
<td>
[img]lair.jpg[/img]
</td>
</tr>

<tr>
<td>
Das ist ein test!
</td>
</tr>

<tr>
<td>
test test test test
</td>
</tr>

</table>
</div>


</div>






<div id="liga">

<div>
<table cellspacing="0">

<tr>
<td>
[img]liga.jpg[/img]
</td>
</tr>

<tr>
<td>
Das ist ein test!
</td>
</tr>

<tr>
<td>
test test test test
</td>
</tr>

</table>

</div>

</div>





<div id="golgothia">

<div>
<table cellspacing="0">

<tr>
<td>
[img]kingdom.jpg[/img]
</td>
</tr>

<tr>
<td>
Das ist ein test!
</td>
</tr>

<tr>
<td>
test test test test
</td>
</tr>

</table>
</div>

</div>





<div id="norcent">

<div>
<table cellspacing="0">

<tr>
<td>
[img]norcent.jpg[/img]
</td>
</tr>

<tr>
<td>
Das ist ein test!
</td>
</tr>

<tr>
<td>
test test test test
</td>
</tr>

</table>
</div>


</div>









</body>
</html>

wï¿½re toll wenn ihr mit heute noch helfen kï¿½nntet ansonsten muss ich wohl ne doofe standart xml data island tabelle machen ( wollte den xml inhalt eigentlich dann in den boxen anzeigen lassen )
schonmal danke
gruï¿½
max

Stichworte: -

Zergling-new

Dabei seit: 21.05.2008

Beiträge: 9931
#2

06.02.2006, 14:36

Hallo,
ist mir jetzt ein bißchen zuviel Code, aber probiers mal hiermit:

PHP-Code:

<style type="text/css"> span.mouseout { background: white; color: black; } span.mouseover { background: red; color: white; } </style> JS: das ist <span class="mouseout" onMouseOver="this.className='mouseover'" onMouseOut="this.className='mouseout'">mein Text</span> und noch viel mehr
Kommentar
#3

06.02.2006, 15:05

mhhh habs mal ein bisschen modifiziert um zu testen obs geht ,
problem ist das der text bei mir in beiden boxen angezeigt wird , ich möchte die eine #box ja nur als rahmen benutzen sozusagen um den content dann in der beim drüberhovern angezeigten box anzuzeigen , das funktioniert irgendwie so nicht ...
ausserdem gibt es bei dem javascript im firefox anzeigeprobs und beim ie verscheibt der es nicht an die koordinaten wo die box sein sollte ...
ich poste jetz einfach mal den geänderten quellcode vielelicht wird ja jemand schlau draus ; )

Code:

<html> <head> <style type="text/css"> span.mouseout {position:fixed;top:300px;right:200px;width:100px;height:100px;background-color:green;} span.mouseover {position:fixed;top:70px;right:300px;width:300px;height:200px; background: red;} </style> </head> <body> <span class="mouseout" onMouseOver="this.className='mouseover'" onMouseOut="this.className='mouseout'"> texttexttexttexttexttext </span> </body> </html>
Kommentar
Zergling-new

Dabei seit: 21.05.2008

Beiträge: 9931
#4

06.02.2006, 15:52

Warum verschiebst du das ganze?
Logisch, dass wenn beim onMouseOver das Objekt verschoben wird danach ein onMouseOut ausgeführt wird (schließlich ist die Maus dank Verschiebung nicht mehr über dem Objekt), welches das Objekt wieder unter die Maus schiebt. Dadurch zuckt das Objekt hin und her (Schleife zwischen onMouseOver und onMouseOut).

Was hast du denn vor?
Kommentar

Ankündigung

hover im IE ,suckerfish modifizieren?

Neue Werbung 2019

hover im IE ,suckerfish modifizieren?

Kommentar

Kommentar

Kommentar