[Erledigt] hover im IE ,suckerfish modifizieren?

06.02.2006, 15: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

Zergling-new · 06.02.2006, 15: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

06.02.2006, 16: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>

Zergling-new · 06.02.2006, 16: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?

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Thema bewerten
Thema bewerten:

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
JS: Spezieller Image Hover	GSJLink	HTML, Usability und Barrierefreiheit	7	18.06.2007 17:24
Link modifizieren	Kein Genie	HTML, Usability und Barrierefreiheit	1	31.10.2006 00:11
CSS Hover	JanM	HTML, Usability und Barrierefreiheit	3	27.06.2006 21:13
probleme mit Tabellenhintergrundbild bei hover	stephan000	HTML, Usability und Barrierefreiheit	4	09.04.2006 13:23
IE interpretiert :hover nicht	scooter	HTML, Usability und Barrierefreiheit	2	29.03.2006 12:04
CSS Hover bei Bildern im IE	juhuwoorps	HTML, Usability und Barrierefreiheit	12	01.03.2006 20:28
CSS / JS: mehrere divs bei hover auf visible schalten ?	Cytrix	HTML, Usability und Barrierefreiheit	3	04.01.2006 11:33
image map mit hover		HTML, Usability und Barrierefreiheit	1	21.12.2005 16:04
Bild mit clip:rect verkleinern und per hover wieder normal		HTML, Usability und Barrierefreiheit	3	21.12.2005 14:54
[Erledigt] linktext - hover Problem		HTML, Usability und Barrierefreiheit	1	18.10.2005 03:46
Hover Effekt für Textfelder?	Masteroi	HTML, Usability und Barrierefreiheit	3	27.07.2005 14:36
farbe von tabellenzeile verändern bei hover		HTML, Usability und Barrierefreiheit	4	04.07.2005 09:40
CSS-Datei übern Browser modifizieren		HTML, Usability und Barrierefreiheit	6	31.03.2005 18:57
[Erledigt] uploadformular modifizieren		HTML, Usability und Barrierefreiheit	5	30.03.2005 17:23
[CSS] Table und :hover ???		HTML, Usability und Barrierefreiheit	16	21.01.2005 15:17


Mister Ad PHP Code Flüsterer Registriert seit: 21.08.2005 Beiträge: 4682 PHP-Kenntnisse: Fortgeschritten

06.02.2006, 15:36
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	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`

06.02.2006, 16:05
Gast Beiträge: n/a	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>

06.02.2006, 16:52
Zergling-new Erfahrener Benutzer Registriert seit: 21.05.2008 Beiträge: 9.937	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?