Ergebnis 1 bis 7 von 7

Thema: mouseover mit CSS

  1. #1
    HTML Newbie
    Registriert seit
    16.07.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard mouseover mit CSS

    Hallo,

    ich möchte auf einer Webseite thumbnails implementieren, die bei mouseover das vergrößerte Bild anzeigen. Auf der Suche nach Ideen für die Umsetzung bin ich auf folgende Seite gestossen:
    Stu Nicholls | CSSplay | Cross browser multi page photo gallery mark 2

    Die grundsätzliche Idee gefällt mir und ich hab den code dazu (Seitenquelltext) auch schon unter die Lupe genommen. CSS Grundlagen beherrsche ich, das meiste für mich intressante habe ich auch schon aus dem code "extrahiert", aber das hier ist schon höhere Kunst und ich finde was nicht heraus:

    Mir gefällt die Idee des Quadrats mit den thumbnails drin, aber ich hätte es gern, wenn das nicht erst hidden wäre, einen link wie "Portraits" oder "Birds" den man erst mit der Maus berühren muss, damit das Quadrat aufgeht, brauche ich nicht. Wie kann ich den code dahingehend modifizieren, dass das sofort ein Quadrat mit den thumbnails drin auf der webseite erscheint?

    Danke für Eure Hilfe! Kanila
    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
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: mouseover mit CSS

    Sieh mal, ob dir das weiterhilft:
    http://www.ohne-css.gehts-gar.net/0074.php
    In diesem Beispiel wird eine Liste verwendet. Du könntest aber ebenso eine Tabelle nehmen.
    Weitere Möglichkeit:
    http://www.ohne-css.gehts-gar.net/0023.php

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    16.07.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: mouseover mit CSS

    ja, der 2. link hilft mir weiter, wobei das auch noch nicht die Lösung des Problems ist, und das ist, dass das Ganze in einem Container staatfinden muss und dabei passiert es dann, dass das vergrößerte Bild nicht vollständig angezeigt wird, weil es über die Begrenzung hinaus gehen würde. Deswegen gefiel mir diese Quadrat bei meinem link gut und das das ganz große Bild auch dort in den Rahmen positioniert wird.
    Ich werde mal die Idee mit der Tabelle aufgreifen, da bekomm ich dann eher margin und padding umgesetzt
    Danke erst mal, und vielleicht hat ja noch jemand eine Idee, wie ich meine Ursprungsidee umgesetzt bekomme (da ist ja leider alles auf den Überschriften-links aufgebaut, so dass die nicht einfach zu umgehen sind)

  4. #4
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: mouseover mit CSS

    Vielleicht hilft das hier weiter:http://www.gipspferd.de/css/experime...rie/galerie06/
    Wenn es dir gefällt, dann solltest du für die img's im HTML width und height der Vorschaubilder angeben.
    Oder hier noch ein Beispiel:http://www.gipspferd.de/forumhilfe/t...rie/index9.htm
    Geändert von djheke (16.07.2012 um 19:31 Uhr)

  5. #5
    HTML Newbie
    Themenstarter

    Registriert seit
    16.07.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: mouseover mit CSS

    sieht auch ganz gut aus, allerdings ohne mouseover-Effekt

    (und was mir nebenbei bemerkt auffiel: für den IE fehlt ein text-decoration:none für die links, im FF wirds ohne blauen Rahmen dagestellt. Dann habe ich noch ein

    display:inline-block; entdeckt, kann auch nicht von jedem Browser interpretiert werden, meine ich gelesen zu haben)

    mal sehen, ich hab jetzt nochmal ganz neu angefangen und pack mir alle Elemente die mir gefallen rein...

  6. #6
    Meister(in)
    Registriert seit
    24.02.2007
    Beiträge
    460
    Danke
    0
    Bekam 47 mal "Danke" in 47 Postings

    Standard AW: mouseover mit CSS

    Also es nur Experimente und sollen/können/müssen weiterentwickelt werden. Display:inline-block kann durch float:left ersetzt werden. Einheitliche Rahmen können definiert werden. Übrigens das zweite Bsp. hovert.

  7. #7
    HTML Newbie
    Themenstarter

    Registriert seit
    16.07.2012
    Beiträge
    4
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: mouseover mit CSS

    Hallo,

    Die webseite schau ich mir insgesamt noch genauer an 2.Beispiel? weiss grad nicht, was du meinst, ich hab nur Galerie06 bei dem link auf dem Schirm, und da hovert nix.

    Ich hab mich aber jetzt für die Variante von sejuma entschieden(mit eigenen Variationen natürlich) , lass die Abstände etwas größer, mach die large-Bilder dann gleich auch ein bischen größer und verzichte auf den extra-link, den man ohnehin immer wieder extra wegklicken muss. Das Container-Problem hab ich mit einem overflow:visible gelöst (ich hoffe, das können alle Browser )

    Danke für Eure Hilfe!

    Bis zum nächsten Problem dann...., Kanila

Ähnliche Themen

  1. Mouseover mit CSS
    Von Darius im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 29.03.2007, 19:56
  2. Mouseover
    Von Posi im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 30.11.2006, 14:35
  3. mouseover
    Von Poketyce im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 30.09.2006, 12:57
  4. mouseover
    Von cthulhu im Forum HTML & CSS Forum
    Antworten: 6
    Letzter Beitrag: 29.09.2006, 08:53
  5. Mouseover
    Von starnet im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 18.11.2004, 17:14

Stichworte

Berechtigungen

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