Michi: Hover-Boxen an eine Auswahlliste (select / option) anknüpfen

Beitrag lesen

SELF-Forum

Hover-Boxen an eine Auswahlliste (select / option) anknüpfen

Michi
– Informationen zu den Bewertungsregeln

Hallo,

ich versuche, an die Einträge einer Auswahlliste, neben denen Grafiken platziert sind (habe mich dazu eines Beispiels aus selfhtml bedient), Hover-Boxen anzuknüpfen, wobei ich auf die recht bekannte Bibliothek OverLib zurückgreife. (Quellcode s. unten)

Problem:

In der einen Auswahlliste (<select size="3">) erscheinen die Hover über der Box, in der anderen dahinter und das auch im Firefox. Jetzt hab ich zwar schon öfter gelesen, dass der IE dieses Problem hat, dass irgendwelche Layer stets hinter Auswahllisten angezeigt werden, selbst, wenn der z-index des Layers über dem der Auswahlliste liegt, vom Firefox kannte ich das aber noch nicht.

Hat jemand eine Idee bzw. kennt jemand ein Demo, das für die genannte Anforderung - Auswahlliste mit Grafiken und Hover, die beim Überfahren der einzelnen Zeilen ÜBER der Auswahlliste aufspringen - eine Lösung zeigt?

Gruß Michi

Quellcode:

  
  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
<html>  
<head>  
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">  
<title>Testseite Graphiken in Option-Elementen</title>  
  
<script type="text/javascript" src="http://www.grundrissprofi.de/overlib/overlib.js"><!-- overLIB (c) Erik Bosrup --></script><style type="text/css">  
  
#box  
{  
  
z-index: 0;  
  
}  
  
<!--  
  
    option[value=deutschland]:before { content:url("/grafik/ausrufezeichen_1.gif"); }  
    option[value=irland]:before { content:url("/grafik/ausrufezeichen_1.gif"); }  
  
-->  
</style>  
</head>  
<body>  
    <table>  
        <tr>  
  
  
            <td>  
                <select id="box"> <!-- Einzeile Auswahlliste, aber Hover erscheint HINTER der Liste, soll DAVOR erscheinen! ;) -->  
                    <option value="irland" onmouseover="return overlib('Fall 1', HAUTO, VAUTO, DELAY, 50, WIDTH, 470, BORDER, 1, CELLPAD, 14, 18, FGCOLOR, '#FFFFCC', BGCOLOR, '#555555' );" onmouseout="return nd();">Fall 1</option>  
                    <option value="deutschland" onmouseover="return overlib('Fall 2', HAUTO, VAUTO, DELAY, 50, WIDTH, 470, BORDER, 1, CELLPAD, 14, 18, FGCOLOR, '#FFFFCC', BGCOLOR, '#555555' );" onmouseout="return nd();">Fall 2</option>  
                </select>  
            </td><td>  
  
                <select size="3"> <-- Hier erscheint der Hover VOR der Auswahlliste, aber die Liste soll eben nicht mehrere Zeilen lang sein, sondern zunächst eine und erst beim Annavigieren aufklappen. ;) -->  
                    <option value="irland" onmouseover="return overlib('Fall 1', HAUTO, VAUTO, DELAY, 50, WIDTH, 470, BORDER, 1, CELLPAD, 14, 18, FGCOLOR, '#FFFFCC', BGCOLOR, '#555555' );" onmouseout="return nd();">Fall 1</option>  
                    <option value="deutschland" onmouseover="return overlib('Fall 2', HAUTO, VAUTO, DELAY, 50, WIDTH, 470, BORDER, 1, CELLPAD, 14, 18, FGCOLOR, '#FFFFCC', BGCOLOR, '#555555' );" onmouseout="return nd();">Fall 2</option>  
                </select>  
            </td>  
        </tr>  
    </table>  
</body>  
  
</html>
Beitrag melden
–
Informationen zu den Bewertungsregeln