Ergebnis 1 bis 6 von 6

Thema: Bildervorschau

  1. #1
    Azubi(ne) Avatar von Roland Rafael Repczuk
    Registriert seit
    12.02.2008
    Beiträge
    95
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Bildervorschau

    Hallo

    Ich möchte gerne auf meinem Index ( Kunstseite ) viele meiner Bilder als kleine Thumbnails einfügen. Wenn man dann die Maus über das Bild bewegt soll sich das Bild als Vorschau auf der selben Seite größer öffnen. Ich hoffe ihr versteht, was ich meine.
    Also keinen Link, sondern eine einfache Bildervorschau und wenn die Maus das Bildverlässt, schließt sich auch das große Vorschaubild automatisch.

    Ich hoffe Ihr könnt mir weiterhelfen.

    Grüße Roland
    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
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Bildervorschau

    des kann man mit javascript regeln..
    haste schon irgendeinen code geschrieben? also quellcode für den html-teil.
    das javascript is grundlegend nich viel arbeit.. du kannst aber auch vorgerfertigte sachen nehmen wie zum beispiel highslide...
    kannste dir hier angucken: http://schule.kkw-forum.de/index.php...id=10&Itemid=3
    klick da einfach mal auf eins von den bildern, da gehen dann die dinger in gross auf und man kann se verschieben
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Azubi(ne)
    Themenstarter
    Avatar von Roland Rafael Repczuk
    Registriert seit
    12.02.2008
    Beiträge
    95
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bildervorschau

    ich war auf der seite, aber kannst du mir vielleicht einen Code basteln. Und außerdem muss man da doch auch noch i-was runterladen oder?


    Grüße

    Roland

  4. #4
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Bildervorschau

    http://highslide.com/download.php

    im downloadpaket haste auch alle codebeispiele, die du brauchen wirst
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  5. #5
    Großmeister(in) Avatar von Dr. Gore
    Registriert seit
    14.08.2008
    Alter
    39
    Beiträge
    566
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bildervorschau

    Das ist ja mal ne Top Sache.... danke für den Link synaptic !
    Werde ich mal für mein nächstes Projekt im Hinterkopf behalten... mal was anderes als die Lightbox.
    Jetzt kostenlos spielen !
    -YAKUZA SQUAD-

  6. #6
    Azubi(ne)
    Themenstarter
    Avatar von Roland Rafael Repczuk
    Registriert seit
    12.02.2008
    Beiträge
    95
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bildervorschau

    Erst einmal danke für eure Bemühungen...
    Ich habe jetzt den Code für solch ein Roll-Over Bild erhalten.

    HEAD

    Code:
      <style type="text/css">
    /*Credits: Dynamic Drive CSS Library */
    /*URL: http://www.dynamicdrive.com/style/ */
    .gallerycontainer{
    position: relative;
    /*Add a height attribute and set to largest image's height to prevent overlaying*/
    }
    .thumbnail img{
    border: 1px solid white;
    margin: 0 5px 5px 0;
    }
    .thumbnail:hover{
    background-color: transparent;
    }
    .thumbnail:hover img{
    border: 1px solid blue;
    }
    .thumbnail span{ /*CSS for enlarged image*/
    position: absolute;
    background-color: lightyellow;
    padding: 5px;
    left: -1000px;
    border: 1px dashed gray;
    visibility: hidden;
    color: black;
    text-decoration: none;
    }
    .thumbnail span img{ /*CSS for enlarged image*/
    border-width: 0;
    padding: 2px;
    }
    .thumbnail:hover span{ /*CSS for enlarged image*/
    visibility: visible;
    top: 0;
    left: 230px; /*position where enlarged image should offset horizontally */
    z-index: 50;
    }
      </style>


    BODY z.B.


    Code:
    <div class="gallerycontainer">
    
    <a class="thumbnail" href="http://www.roland-rafael-repczuk.de/gemaelde-galerie-filigraner-surrealismus-fantastischer-realismus-kunst.html#evolution"><img src="bilder/evolution.jpg" width="76px" height="96px" border="0" /><span><img src="bilder/evolution.jpg" /><br /></span></a>
    
    </div>
    ( Bspl. eines Bildes )


    Mein Problem: ich viele will kleine Bilder in vier verschiedene Reihen setzen. Auf der linken Seite ist das kleine Bild und auf der rechten Seite öffnet sich dann das Große. ( wegen
    Code:
    left: 230px
    )

    das finde ich soweit ganz gut, doch in der letzten Spalte überschreitet das große Bild die Monitorfläche und wird nicht ganz angezeigt!Könnte ich vielleicht extra für diese Tabelle einextra CSS Befehl im BODY einfügen?


    Liebe Grüße

    Roland

Stichworte

Berechtigungen

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