Ersetze mal überall "active" durch "hover".
Dann sollten die Bilder angezeigt werden, solange man "mit der Maus drüber fährt".
genau das will ich ja eben nicht. ich möchte, dass die bilder erst angezeigt werden, wenn man draufklickt.
und wenn ich hover verwende, flackern die großen bilder. das kann eventuell an den geschützten leerzeichen liegen.
aber beim original quelltext hat es nicht geflackert.
das wäre er. da die bilder im netz verfügbar sind, könnt ihr die auch sehen.
<style type='text/css'>
#becssg_holder_90_0 {width:480px;height:508px;margin:auto;padding:0;display:block;}
#becssg_main_90_0 {display:block;position:absolute;width:480px;height:508px;background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild01_480_360_95.jpg);background-position:0px 0px;background-repeat:no-repeat;}
.mylink_90_0 {text-decoration:none;overflow:hidden;z-index:5;}
.mylink_90_0:hover {text-decoration:none;position:absolute;left:0;top:0;width:480px;height:508px;background-repeat:no-repeat;z-index:2;}
.i_90_0_0 {position:absolute;left:0px;top:365px;width:92px;height:69px;}
.l_90_0_0 {position:absolute;left:0px;top:365px;width:92px;height:69px;line-height:69px;}
.l_90_0_0:hover {background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild01_480_360_95.jpg);background-position:0px 0px;}
.i_90_0_1 {position:absolute;left:97px;top:365px;width:92px;height:69px;}
.l_90_0_1 {position:absolute;left:97px;top:365px;width:92px;height:69px;line-height:69px;}
.l_90_0_1:hover {background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild02_480_360_95.jpg);background-position:0px 0px;}
.i_90_0_2 {position:absolute;left:194px;top:365px;width:92px;height:69px;}
.l_90_0_2 {position:absolute;left:194px;top:365px;width:92px;height:69px;line-height:69px;}
.l_90_0_2:hover {background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild03_480_360_95.jpg);background-position:0px 0px;}
.i_90_0_3 {position:absolute;left:291px;top:365px;width:92px;height:69px;}
.l_90_0_3 {position:absolute;left:291px;top:365px;width:92px;height:69px;line-height:69px;}
.l_90_0_3:hover {background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild04_480_360_95.jpg);background-position:0px 0px;}
.i_90_0_4 {position:absolute;left:388px;top:365px;width:92px;height:69px;}
.l_90_0_4 {position:absolute;left:388px;top:365px;width:92px;height:69px;line-height:69px;}
.l_90_0_4:hover {background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild05_480_360_95.jpg);background-position:0px 0px;}
.i_90_0_5 {position:absolute;left:0px;top:439px;width:92px;height:69px;}
.l_90_0_5 {position:absolute;left:0px;top:439px;width:92px;height:69px;line-height:69px;}
.l_90_0_5:hover {background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild06_480_360_95.jpg);background-position:0px 0px;}
.i_90_0_6 {position:absolute;left:97px;top:439px;width:92px;height:69px;}
.l_90_0_6 {position:absolute;left:97px;top:439px;width:92px;height:69px;line-height:69px;}
.l_90_0_6:hover {background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild07_480_360_95.jpg);background-position:0px 0px;}
.i_90_0_7 {position:absolute;left:194px;top:439px;width:92px;height:69px;}
.l_90_0_7 {position:absolute;left:194px;top:439px;width:92px;height:69px;line-height:69px;}
.l_90_0_7:hover {background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild08_480_360_95.jpg);background-position:0px 0px;}
.i_90_0_8 {position:absolute;left:291px;top:439px;width:92px;height:69px;}
.l_90_0_8 {position:absolute;left:291px;top:439px;width:92px;height:69px;line-height:69px;}
.l_90_0_8:hover {background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild09_480_360_95.jpg);background-position:0px 0px;}
.i_90_0_9 {position:absolute;left:388px;top:439px;width:92px;height:69px;}
.l_90_0_9 {position:absolute;left:388px;top:439px;width:92px;height:69px;line-height:69px;}
.l_90_0_9:hover {background-image:url(http://www.bretteleben.de/images/stories/cssgallery/images/bild10_480_360_95.jpg);background-position:0px 0px;}
</style>
<body id="body_bg">
<div id='becssg_main_90_0'>
<img src='http://www.bretteleben.de/images/stories/cssgallery/thumbs/bild01_92_69_80.jpg' alt='bild01' class='i_90_0_0'/><a href='#' class='l_90_0_0 mylink_90_0' title='bild01'> </a>
<img src='http://www.bretteleben.de/images/stories/cssgallery/thumbs/bild02_92_69_80.jpg' alt='bild02' class='i_90_0_1'/><a href='#' class='l_90_0_1 mylink_90_0' title='bild02'> </a>
<img src='http://www.bretteleben.de/images/stories/cssgallery/thumbs/bild03_92_69_80.jpg' alt='bild03' class='i_90_0_2'/><a href='#' class='l_90_0_2 mylink_90_0' title='bild03'> </a>
<img src='http://www.bretteleben.de/images/stories/cssgallery/thumbs/bild04_92_69_80.jpg' alt='bild04' class='i_90_0_3'/><a href='#' class='l_90_0_3 mylink_90_0' title='bild04'> </a>
<img src='http://www.bretteleben.de/images/stories/cssgallery/thumbs/bild05_92_69_80.jpg' alt='bild05' class='i_90_0_4'/><a href='#' class='l_90_0_4 mylink_90_0' title='bild05'> </a>
<img src='http://www.bretteleben.de/images/stories/cssgallery/thumbs/bild06_92_69_80.jpg' alt='bild06' class='i_90_0_5'/><a href='#' class='l_90_0_5 mylink_90_0' title='bild06'> </a>
<img src='http://www.bretteleben.de/images/stories/cssgallery/thumbs/bild07_92_69_80.jpg' alt='bild07' class='i_90_0_6'/><a href='#' class='l_90_0_6 mylink_90_0' title='bild07'> </a>
<img src='http://www.bretteleben.de/images/stories/cssgallery/thumbs/bild08_92_69_80.jpg' alt='bild08' class='i_90_0_7'/><a href='#' class='l_90_0_7 mylink_90_0' title='bild08'> </a>
<img src='http://www.bretteleben.de/images/stories/cssgallery/thumbs/bild09_92_69_80.jpg' alt='bild09' class='i_90_0_8'/><a href='#' class='l_90_0_8 mylink_90_0' title='bild09'> </a>
<img src='http://www.bretteleben.de/images/stories/cssgallery/thumbs/bild10_92_69_80.jpg' alt='bild10' class='i_90_0_9'/><a href='#' class='l_90_0_9 mylink_90_0' title='bild10'> </a>
</div>
</div>
Alles anzeigen
im internet habe ich auch noch andere varianten gefunden, nur weiß ich nicht, wie man die richtig definiert.
da wird mit span und li gearbeitet.
das müsste in der css datei definiert werden:
li
li a
li a:hover
li span
li a span
li a:hover span
nur weiß ich leider nicht, welche werte zugewiesen werden müssen. bei den quelltexten im internet hat es alles nur teilweise funktioniert.