css galerie

aila

ich möchte eine bildergalerie erstellen, bei der man auf kleine vorschaubilder klickt und rechts das große bild erscheint. ich habe diese funktion zwar schon mit java script erstellt, aber ich möchte davon weg kommen und es komplett mit css erstellen.

weiß jemand einen ansatz?

thilda

Da würde ich sagen kann dir CSS auch nicht wirklich weiterhelfen.
Dazu könnte man dann eine Serverseitige scriptsprache benutzen.

Oder ein i-frame oder sowas...
Aber CSS dient ja nur dem Styling.

kyr

Ich habe es so gemacht http://portaball.ch/muba.htm, aber bin nicht so glücklich mit dieser Galerie.

http://www.cssplay.co.uk/menu/ hier findest du weitere Galerien.

sejuma

Da ist es sicher einfacher, eine fertige Gallerie zu verwenden.
Ansonsten sieh mal hier

aila

ich habe im internet etwas gefunden und habe den quelltext entsprechend auf mein dokument umgeändert. naja, in IE5 - IE7 funktioniert auch alles (IE8 muss ich noch testen), aber im firefox habe ich das problem, dass die großen bilder nur angezeigt werden, solange man die thumbs mit der maus gedrückt hält. sobald man loslässt, verschwinden die wieder. und wenn ich mit :hover arbeite, flackern die großen bilder.

css-code

HTML

#main {
display:block;
position:absolute;
width:480px;
height:508px;
}
 
.mylink_90_0 {
text-decoration:none;
overflow:hidden;
z-index:5;
}
 
.mylink_90_0:active {
text-decoration:none;
position:absolute;
left:260px;
top:30px;
width:480px;
height:508px;
background-repeat:no-repeat;
z-index:2;
}
 
.i_90_0_0 {position:absolute;left:30px;top:30px;width:60px;height:60px;}
.l_90_0_0 {position:absolute;left:30px;top:30px;width:60px;height:60px; line-height: 60px; font-size: 60px;}
.l_90_0_0:active {background-image:url(m-o1g.jpg);background-position:0px 0px;}
 
.i_90_0_1 {position:absolute;left:120px;top:30px;width:60px;height:60px;}
.l_90_0_1 {position:absolute;left:120px;top:30px;width:60px;height:60px; line-height: 60px; font-size: 60px;}
.l_90_0_1:active {background-image:url(m-o2g.jpg);background-position:0px 0px;}
 
.i_90_0_2 {position:absolute;left:30px;top:120px;width:60px;height:60px;}
.l_90_0_2 {position:absolute;left:30px;top:120px;width:60px;height:60px; line-height: 60px; font-size: 60px;}
.l_90_0_2:active{background-image:url(m-o3g.jpg);background-position:0px 0px;}
 
.i_90_0_3 {position:absolute;left:120px;top:120px;width:60px;height:60px;}
.l_90_0_3 {position:absolute;left:120px;top:120px;width:60px;height:60px; line-height: 60px; font-size: 60px;}
.l_90_0_3:active{background-image:url(m-o4g.jpg);background-position:0px 0px;}

Alles anzeigen

html-code:

HTML

<body>
 
<div id="main">
<img src='m-o1.jpg' alt='bild01' class='i_90_0_0'/><a href='#' class='l_90_0_0 mylink_90_0' title='bild01'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
<img src='m-o2.jpg' alt='bild02' class='i_90_0_1'/><a href='#' class='l_90_0_1 mylink_90_0' title='bild02'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
<img src='m-o3.jpg' alt='bild03' class='i_90_0_2'/><a href='#' class='l_90_0_2 mylink_90_0' title='bild03'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
<img src='m-o4.jpg' alt='bild04' class='i_90_0_3'/><a href='#' class='l_90_0_3 mylink_90_0' title='bild04'>
&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
</div>

Alles anzeigen

vielleicht kennt ja jemand noch eine andere lösung. ich möchte aber auf jeden fall, dass die bilder erst erscheinen, wenn man auf die thumbs drückt und nicht durch rollover.

sejuma

Ersetze mal überall "active" durch "hover".
Dann sollten die Bilder angezeigt werden, solange man "mit der Maus drüber fährt".

aila

Zitat von sejuma

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.

HTML

<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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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'>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</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.

Tags