Lupe als Rollover über Bilder

[SusiBunterblume]

Hallo,

könntet ihr mir vielleicht ein paar Tipps geben, wie ich sowas am besten realisieren kann?

Also ich möchte, dass sobald der User mit der Maus über ein Bild fährt, eine kleine Lupe in der Mitte des Bildes angezeigt wird, um ihn dazu zu animieren, darauf zu klicken.

Ich hab mir gedacht, ich könnte z.B. ein DIV ohne Hintergrund über das Bild einfügen und dann bei :hover das BG Bild des DIVs in eine Lupe ändern?

[ChrisB]

Hi,

Also ich möchte, dass sobald der User mit der Maus über ein Bild fährt, eine kleine Lupe in der Mitte des Bildes angezeigt wird, um ihn dazu zu animieren, darauf zu klicken.

Tut das der normale Pointer-Cursor nicht schon gut genug?
Den kennt der Nutzer, und er weiß, dass dieser etwas klickbares signalisiert.

Ich hab mir gedacht, ich könnte z.B. ein DIV ohne Hintergrund über das Bild einfügen und dann bei :hover das BG Bild des DIVs in eine Lupe ändern?

Ist das eine Frage, ob du dir das gedacht hast?
Dann lautet die Antwort: Ja, sieht so aus, als ob du dir das gedacht hättest.
Dann mach's doch erst mal so (wenn du es nicht lieber gleich mit dem Cursor machen willst, s.o.)

MfG ChrisB

[SusiBunterblume]

Der Cursor wird eh nicht angefasst. Es soll zusätzlich in der Mitte des Bildes eine Lupe angezeigt werden.

Ich bin mir eben nicht sicher ob meine Methode auch wirklich gut durchdacht ist, weil es automatisch per PHP auf über 200 Bilder angewedet werden soll.

[Felix Riesterer]

Liebe SusiBunterblume,

weil es automatisch per PHP auf über 200 Bilder angewedet werden soll.

PHP ist hier irrelevant. Du sprichst von einer clientseitigen Sache.

Dein Vorhaben klingt nach einer typischen JavaScript-Spielerei, denn mit reinen CSS-Mitteln halte ich Dein Vorhaben für schlecht umsetzbar, bzw. für schlicht unmöglich.

Liebe Grüße,

Felix Riesterer.

[SusiBunterblume]

Mit der Anmerkung zu PHP wollte ich nur aufzeigen, dass ich eine gut überlegte Methode hierfür brauche, weil sie oft in Einsatz kommen soll.

JS wollte ich vermeiden, aber wenns ohne nicht geht, dann auch gut.

Wie stell ich das mit JS am besten an? Brauche keine Anleitung, nur Denkanstöße.

Danke für eure Hilfe!

[Felix Riesterer]

Liebe SusiBunterblume,

Wie stell ich das mit JS am besten an? Brauche keine Anleitung, nur Denkanstöße.

Du vergibst jedem <img>-Element dynamisch über JS einen onmouseover- und einen onmouseout-Eventhandler. Diese Eventhandler machen nichts anderes, als ein <div>-Element ein- bzw. auszublenden. Beim Einblenden werden dann die Koordinaten des Bildes ermittelt, und das <div>-Element in seiner absoluten Positionierung entsprechend ausgerichtet. Wenn es dann noch die Abmessungen des Bildes erhält, dann deckt es das Bild genau passend ab.

Um ein Flackern zu vermeiden (das Einblenden des <div>-Elements verdeckt das Bild und löst ein "vorzeitiges" onmouseout-Event aus), sollte das <div>-Element auch ein onmouseover- und onmouseout-Event haben, das die Anzeige des Elements erhält bzw. "repariert".

Wozu Du allerdings den Play-Button anzeigen willst, ist mir nicht klar. Wenn das <div>-Element mit dem Play-Button das Bild "verdeckt" (auch wenn es transparent ist), kann man das ursprüngliche Bild nicht mehr anklicken.

Liebe Grüße,

Felix Riesterer.

[Vinzenz Mai]

Hallo Felix,

Du vergibst jedem <img>-Element dynamisch über JS einen onmouseover- und einen onmouseout-Eventhandler. Diese Eventhandler machen nichts anderes, als ein <div>-Element ein- bzw. auszublenden. Beim Einblenden werden dann die Koordinaten des Bildes ermittelt, und das <div>-Element in seiner absoluten Positionierung entsprechend ausgerichtet. Wenn es dann noch die Abmessungen des Bildes erhält, dann deckt es das Bild genau passend ab.

Um ein Flackern zu vermeiden (das Einblenden des <div>-Elements verdeckt das Bild und löst ein "vorzeitiges" onmouseout-Event aus), sollte das <div>-Element auch ein onmouseover- und onmouseout-Event haben, das die Anzeige des Elements erhält bzw. "repariert".

das ist exakt das, was Alex CSS-Lösung auch macht - ohne die von Dir angerissenen Probleme zu haben.

Wozu Du allerdings den Play-Button anzeigen willst, ist mir nicht klar. Wenn das <div>-Element mit dem Play-Button das Bild "verdeckt" (auch wenn es transparent ist), kann man das ursprüngliche Bild nicht mehr anklicken.

Das lässt sich sehr einfach lösen, indem man (in Alex' Lösung) das click-Ereignes des a-Elementes nutzt ...

Freundliche Grüße

Vinzenz

[Felix Riesterer]

Lieber Vinzenz Mai,

wenn schon JS wegen der Lightbox, warum dann die Lupe nicht auch per JS?

Liebe Grüße,

Felix Riesterer.

[ChrisB]

Hi,

Dein Vorhaben klingt nach einer typischen JavaScript-Spielerei, denn mit reinen CSS-Mitteln halte ich Dein Vorhaben für schlecht umsetzbar, bzw. für schlicht unmöglich.

Wenn die Bilder sich jeweils in einem eigenen Containerelement befinden, kann das transparente Overlay mit :before/:after erzeugt werden.

MfG ChrisB

[Ale×]

Hallo,

Dein Vorhaben klingt nach einer typischen JavaScript-Spielerei, denn mit reinen CSS-Mitteln halte ich Dein Vorhaben für schlecht umsetzbar, bzw. für schlicht unmöglich.

Warum nicht?

Ale×

[Felix Riesterer]

Lieber Ale×,

Dein Vorhaben klingt nach einer typischen JavaScript-Spielerei, denn mit reinen CSS-Mitteln halte ich Dein Vorhaben für schlecht umsetzbar, bzw. für schlicht unmöglich.

Warum nicht?

Tabelle und verschachtelte leere <span>-Elemente? Machst Du Witze? Ich schrieb "schlecht umsetzbar". Dass es offensichtlich nicht unmöglich ist - OK. Aber willst Du Deine Lösung allen Ernstes als sinnvoll propagieren?

Liebe Grüße,

Felix Riesterer.

[Vinzenz Mai]

Hallo Felix,

Dein Vorhaben klingt nach einer typischen JavaScript-Spielerei, denn mit reinen CSS-Mitteln halte ich Dein Vorhaben für schlecht umsetzbar, bzw. für schlicht unmöglich.

Warum nicht?

Tabelle und verschachtelte leere <span>-Elemente? Machst Du Witze?

ich halte es für nicht besonders sinnvoll, sich zuallererst an solchen Sachen aufzuhalten. Für mich ist sowas nebensächlich. Die Idee zählt und die ist von dem, was Du kritisierst, unabhängig.

Ich schrieb "schlecht umsetzbar". Dass es offensichtlich nicht unmöglich ist - OK. Aber willst Du Deine Lösung allen Ernstes als sinnvoll propagieren?

Ein genauerer Blick in den Quellcode zeigt Dir, dass sich die vorliegende Idee problemlos auf den Einsatz eines einzigen zusätzlichen Elementes, das zur Anzeige der Lupe sowieso benötigt wird, reduzieren lässt:

<ul class="gallery">  
  <li>  
    <a href="photos/kuh.jpg"><img class="thumbnail" src="photos/kuh_thumbnail.jpg" title="" alt="Kuh" width="200" height="150" /><span class="magnifier" title="Bild vergrößern"></span></a>  
  </li>  
  <li>  
    <a href="photos/schwein.jpg"><img class="thumbnail" src="photos/schwein_thumbnail.jpg" title="" alt="Schwein" width="200" height="150" /><span class="magnifier" title="Bild vergrößern"></span></a>  
  </li>  
  <li>  
    <a href="photos/esel.jpg"><img class="thumbnail" src="photos/esel_thumbnail.jpg" title="" alt="Esel" width="200" height="150" /><span class="magnifier" title="Bild vergrößern"></span></a>  
  </li>  
  <li>  
    <a href="photos/elefanten.jpg"><img class="thumbnail" src="photos/elefanten_thumbnail.jpg" title="" alt="Elefanten" width="200" height="150" /><span class="magnifier" title="Bild vergrößern"></span></a>  
  </li>  
</ul>  

mit leicht modifiziertem CSS reicht fürs erste aus:

    ul {  
        padding: 0;  
        margin: 0;  
        list-style-type: none;  
    }  
    li {  
        padding: 0;  
        margin: 0;  
        display: inline;  
    }  
    img {  
        border: none;  
    }  
    .gallery a {  
        position: relative;  
        display: inline-block;  
        outline: none;  
        text-decoration: none;  
    }  
    .gallery .magnifier {  
        display: block;  
        position: absolute;  
        width: 200px;    /* Ausmaße ausreichend für Hintergrundbild */  
        height: 150px;  
        top: 0px;  
        left: 0px;  
        background: url(images/magnifier.png) no-repeat -200px -200px;  
    }  
    .gallery .magnifier:hover {  
        background: url(images/magnifier.png) no-repeat top right;  
    }  

Prinzip:
a-Element für die Großanzeige des Bildes, relativ positioniert.
span-Element für Lupe mit gleicher Größe wie das Bild und absolut exakt über dem Bild positioniert. Lupe ist Hintergrundbild, standardmäßig aus dem Anzeigebereich hinausgeschoben, bei hover in den sichtbaren Bereich verschoben.

Die Anpassung an die Anforderung im Ausgangsbeitrag, zentrierte Anzeige ist leicht möglich. die Position des Hintergrundbildes bei Hover ist einfach zentriert.

Ist das wirklich "schlecht umsetzbar"? Find' ich nicht.

Freundliche Grüße

Vinzenz

[Felix Riesterer]

Lieber Vinzenz Mai,

Ist das wirklich "schlecht umsetzbar"? Find' ich nicht.

Deine Version gefällt mir schon _wesentlich_ besser als die von Alex.

Wenn schon JS für die Lightbox benutzt wird, warum dann den Rest nicht auch noch per JS lösen?

Liebe Grüße,

Felix Riesterer.

[Ale×]

Hallo Felix,

Wenn schon JS für die Lightbox benutzt wird, warum dann den Rest nicht auch noch per JS lösen?

Die Lightbox ist eigentlich irrelevant. Wir wissen ja gar nicht, wie SusiBunterblume das umsetzten möchte.

Ale×

[Ale×]

Hallo,

Tabelle ...

Das habe ich befürchtet! ;-)

... und verschachtelte leere <span>-Elemente

Vinzenz hat es ja noch überarbeitet. Ich denke damit kann man leben.

Aber willst Du Deine Lösung allen Ernstes als sinnvoll propagieren?

Das war eigentlich nur eine Antwort darauf:

... denn mit reinen CSS-Mitteln halte ich Dein Vorhaben für schlecht umsetzbar, bzw. für schlicht unmöglich.

Aber was ist schon sinnvoll? ;-)

Ale×