Ergebnis 1 bis 7 von 7

Thema: css galerie

  1. #1
    Teeny
    Registriert seit
    22.04.2009
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard css galerie

    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?
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Meister(in)
    Registriert seit
    27.03.2009
    Ort
    Berlin
    Beiträge
    278
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css galerie

    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.

  3. #3
    Azubi(ne)
    Registriert seit
    30.11.2008
    Beiträge
    50
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css galerie

    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.

  4. #4
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css galerie

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

  5. #5
    Teeny
    Themenstarter

    Registriert seit
    22.04.2009
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css galerie

    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-Code:
    #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;}
    html-code:
    HTML-Code:
    <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>
    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.

  6. #6
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css galerie

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

  7. #7
    Teeny
    Themenstarter

    Registriert seit
    22.04.2009
    Beiträge
    28
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: css galerie

    Zitat Zitat von sejuma Beitrag anzeigen
    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-Code:
    <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>
    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.

Ähnliche Themen

  1. Galerie
    Von Tamira im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 20
    Letzter Beitrag: 22.08.2007, 14:03
  2. Galerie
    Von Slider2 im Forum HTML & CSS Forum
    Antworten: 8
    Letzter Beitrag: 17.11.2006, 09:01
  3. Galerie
    Von stero im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 6
    Letzter Beitrag: 24.05.2006, 11:30
  4. Galerie
    Von geandy89 im Forum Eure Homepages und Foren - Vorstellung und Bewertungen
    Antworten: 2
    Letzter Beitrag: 15.05.2006, 12:23
  5. Die Galerie
    Von T0b3 im Forum Forum-Hilfe.de intern
    Antworten: 6
    Letzter Beitrag: 05.04.2005, 18:43

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •