✔ Mouseover-Effekt in Gallery

Status
Nicht offen für weitere Antworten.
A

alinapapa

Mitglied
Hallo erstmal.

Ich bin neu hier und habe gleich eine (hoffentlich) einfach zu klärende Frage.

In einer Bildergalerie hätt´ ich es gerne so, dass am Rand Thumbnails angezeigt werden und in der Mitte eines dieser Bilder in groß. Wenn man mit der Maus über die Thumbnails fährt, soll das große Bild ersetzt werden (ohne klicken).

Beispiel

Braucht man dazu Flash? Oder geht das auch mit CSS, javasript, whatever.

Achtung: Es geht mir nicht um den Lightbox-Effekt beim Öffnen (Klicken) eines Bildes - es geht mir nur um den "Mouseover"-Effekt, wie oben beschrieben. Wie kann man das am einfachsten erreichen?

Vielen Dank Euch schon mal,

Alinapapa ;-)
 
MAN hat gesagt.:
Es führen natürlich viele Weg nach Rom. Javascript ist einer davon ;)

http://www.script-inside.de/Java/Bildjav/rollover.php

Viele Grüße,
MAN
Zum Vergrößern anklicken....

Hi und danke schon mal.

Hmm..., in dem Beispiel-Link geschieht aber was anderes?! Dort ändert sich das Bild selber, wenn man mit der Maus drüber fährt. Ich wollte es aber so, dass sich das große Bild in der Mitte ändert, wenn man über die Thumbnails fährt.

Oder habe ich was nicht richtig verstanden?

Viele Grüße, Alinapapa
 
Maik hat gesagt.:
Hi,

http://www.cssplay.co.uk/menu/photo_simple dürfte deinem Vorhaben eher entgegenkommen, und wurde mit reinem CSS realisiert.

Eine weitere Möglichkeit mit Javascript findest du in dem Thema JavaScript-basierte Bildergalerie, wobei in diesem Beispiel dann der onclick-Eventhandler durch onmouseover zu ersetzen ist.

Da dies alles mit Flash nichts zu tun hat, schiebe ich den Thread bis auf weiteres in das HTML-Forum.

mfg Maik
Zum Vergrößern anklicken....

Hi.

Vielen Dank

Genau das habe ich gesucht!
Und danke auch fürs Verschieben!

Viele Grüße, Alinapapa
 
Maik hat gesagt.:
http://www.cssplay.co.uk/menu/photo_not_so_simple.html
Zum Vergrößern anklicken....

Hi Maik.

Wo findet man denn den dazugehörigen Code? Ich finds irgendwie nicht...
Ich könnte ihn mir zwar aus dem html-code der Seite rausholen, aber da steckt natürlich noch der ganze Rest außenrum drin (Werbung etc), und da wirds schon ziemlich unübersichtlich...

Alinapapa

Nachtrag: OK, hab´s gefunden. Für die Nachwelt:

Zitat aus den FAQ:

...8. But where's the code, zip file, how do I download the example?
I have had many emails asking where the code/style, zip file can be downloaded for the various demonstrations.
Well there is no download facility. The (x)html is always placed in the #info div, so examine the source code, find the <div id="info">.....</div> and in between is the 'code'.
In most case the style is embeded in the page <head>...</head>. This is done to keep it all together on the same page making it easier to find. In some cases the css is held in a separate file (where it should be) and is loaded in the normal way <link rel="stylesheet" media="all" type="text/css" href="path to css file.css" /> so just add this path to the address in your browser to see the css file.


Puh..., für mich als CSS-DAU wird das ein schöner Spass LOL
Aber ich wurschtel mich da schon durch. Kann sein, dass ich mich noch mal melde hehe...

Cheers und danke nochmal, Alinapapa
 
Zuletzt bearbeitet:
Sodala, da bin ich wieder... :)

Hat alles bestens funktioniert.

Siehe: http://3d-phase.de/still.htm

Ein bisschen schade ist, dass das Thumbnail grau wird, wenn man mit der Maus drüber fährt. Schöner wäre, wenn es einfach stehen bleiben würde, und ideal wär natürlich, wenn es stehen bleiben würde und vielleicht etwas dunkler würde.

Geht das auch mit CSS?
 
Hi,

dann schau dir mal diese Regel etwas genauer an, was für den grauen Hintergrund verantwortlich ist:

Code: 
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:#444444;}
Wenn das Thumbnail beim Überfahren dunkler werden soll, benötigst du eine entsprechende zweite Grafik, um diese dann anstelle der derzeitigen Hintergrundfarbe aufzurufen.

mfg Maik
 
Maik hat gesagt.:
Wenn das Thumbnail beim Überfahren dunkler werden soll, benötigst du eine entsprechende zweite Grafik, um diese dann anstelle der derzeitigen Hintergrundfarbe aufzurufen.

mfg Maik
Zum Vergrößern anklicken....

Oh. Das Erstellen der zweiten, dunkleren Grafik wäre nicht das Problem, aber würde dann nicht auch das große Bild dunkler werden? Denn die Thubnails werden ja aus den großen generiert...

bzw. Wie müsste die von Dir genannte Zeile aussehen, damit ein eigenes Bild eigens für das Thumbnail geladen wird beim Mouseover?

Alinapapa
 
Wie ich schon heute Mittag schrieb, rufst du anstelle der derzeitigen Hintergrundfarbe das dunklere Thumbnail als Hintergrundbild auf - also:

Code: 
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333; background:url(pfad/zur/grafik.jpg);}
Da aber für jeden Link sein individuelles Hintergrundbild erscheinen soll, übergibst du den Links einen ID-Bezeichner:

Code: 
<ul>
        <li><a href="#nogo" id="t1"><b><img src="..." title="" alt="" /><span>This is where the descriptive text goes</span></b></a></li>
        <li><a href="#nogo" id="t2"><b><img src="..." title="" alt="" /><span>More descriptive text here</span></b></a></li>
        <!-- usw. -->
</ul>
und wendest darauf nun folgende Regeln an:

Code: 
#gallery ul li a:hover {white-space:normal; border-color:#555 #ddd #eee #333;}
#gallery ul li a#t1:hover {background:url(pfad/zur/grafik1.jpg);}
#gallery ul li a#t2:hover {background:url(pfad/zur/grafik2.jpg);}
/* usw. */
Und nein, das größere Bild wird dadurch nicht dunkler dargestellt, da die eine Grafik mit der anderen nichts zu tun hat.

mfg Maik
 
Status
Nicht offen für weitere Antworten.

Neue Beiträge

Zurück