✔ Bild/Div bei MouseOver einblenden

[schutzgeist]

N'Abend

Ich steh grad gedanktlich etwas auf dem Schlauch, weil ich mir nicht genau erklären kann, wie ich mein Vorhaben am besten realisieren kann.

Ich hab mehrer kleine Bildausschnitte, bei denen ich wenn man mit der Maus drüber fährt (evtl. auch erst bei drauf klicken) ein DIV eingeblendet wird, in dem man dann das ganze Bild sehen kann.

Stellt sich erst mal die Frage: Wie krieg ich dieses Div hin? Also was muss ich im CSS-Sytle notieren, damit es beim Over/Click angezeigt wird? Kann ich dort mit a:hover arbeiten?
Hat mir jemand einen entsprechenden Link zum Thema?

Die zweite große Frage, die sich mir dabei stellt:
Muss ich für jedes einzelene Bild eine eigene Klasse erstellen?

Danke schonmal,
Steffi

 

[Maik]

Hi,

schau dich mal in Stu Nicholls' Photo Galleries um. Vielleicht findest du dort den passenden Lösungsansatz.

 

[Soophie]

Grundsätzlich ist eine Selektion mittels des Selektors :hover möglich. Du kannst einfach ein div anlegen, dort das bild reinpacken und in css div:hover machen, oder sogar direkt img:hover (habs noch nie probiert, sorry)

jedoch solltest du bedenken, dass Internet Explorer (i.e. IE6) den Hover-Befehlt nur für Links setzen und nicht für andere Elemente. Daher wirst du wohl um etwas Javascript nicht drum herum kommen

 

[schutzgeist]

Hab mir jetzt eine Variante rausgesucht und soweit ein-/umgebaut.

Nur "springen" bei mir die Thumbs beim drüber fahren, was ziemlich nervig ist..
Ich bekomms nicht hin, dass die stehen bleiben..
Hätte lieber als hover-Effekt einen anders farbigen Rahmen...

Hier mal in live:
klick

CSS:

#gallery {
position:relative;
width:420px;
margin-right: -60px;
height: 320px; 
padding-top: 10px;}
#thumbs {width:120px; float:left;}
#thumbs a {display:block; float:left; margin:0 0 5px 5px; width:50px; height:50px; border:1px solid #000;}
#thumbs a img {width:50px; height:50px; border:0; }
#thumbs a:hover {border-color:#ddd; }
#thumbs a:hover img {position:absolute; width:auto; height:auto; left:125px; top:0; border:1px solid #333; margin-top: 10px;}

HMTL:

<div id="gallery">

<em id="thumbs">
<a href="#nogo"><img src="img/1.png" title="" alt="" /></a>
<a href="#nogo"><img src="img/2.png" title="" alt="" /></a>
<a href="#nogo"><img src="img/2.png" title="" alt="" /></a>
</em>
</div>

 

[Maik]

Hi,

folgende Änderungen müssen zunächst vorgenommen werden, damit der letzte Thumb im IE nicht eine Zeile nach unten rutscht:

#thumbs {width:125px; float:left;}
#thumbs a:hover img {position:absolute; width:auto; height:auto; left:130px; top:0; border:1px solid #333; margin-top: 10px;}

Das Springen der Thumbs liegt an der folgenden Angabe im Stylesheet web.css, die auf die "Gallery-Links" einen negativen Einfluß hat, da sie sich ebenfalls im DIV content befinden:

#content a{
color: #999999;
text-decoration: none;
border-bottom: 1px dotted #000000;
}
#content a:hover{
color:#999999;
border-bottom: none;
}

Lösungsvorschlag:

#content a{
color: #999999;
text-decoration: none;
border-bottom: 1px dotted #000000;
}
#content a:hover{
color:#999999;
border-bottom: 1px solid #fff; /* entspricht der Seitenhintergrundfarbe */
}

Die Rahmenfarbe beim Hovern kann in diesem Selektor eingestellt werden:

#thumbs a:hover {border-color:#ddd }

 

[schutzgeist]

Es ist Absicht, dass ich einen Umbruch erzwingen will.
Ich möchte pro "Zeile" nur 2 Bilder anzeigen..

Blöderwiese "hüpft" es immer noch..
Ich hab jetzt mal noch mehr Bilder dazu genommen

<div id="gallery">

<em id="thumbs">
<a href="#nogo"><img src="img/1.png" title="" alt="" /></a>
<a href="#nogo"><img src="img/2.png" title="" alt="" /></a>
<a href="#nogo"><img src="img/3.png" title="" alt="" /></a>
<a href="#nogo"><img src="img/4.png" title="" alt="" /></a>
</em>
</div>

Im IE6 rutscht das 4te ganz wo anders hin, beim Hovern vom Bild oben rechts spielen sie wieder Memory...
Und dass die Bilder beim überfahren nicht ausgeblendet werden haut auch vorne und hinten nicht hin :suspekt:

#thumbs a:hover {border-color:#ddd }

Hier müsste ich doch notieren können, dass das Bild ebenfalls angezeigt werden soll?
Nur wie?

 

[Maik]

Wie gesagt, das Hüpfen der Bilder resultiert aus der border-bottom:none-Angabe im Selektor #content a:hover in der CSS-Datei web.css.

Und dass das letzte Thumb im IE nach unten rutscht, liegt daran, dass das em-Element (#thumbs) mit 120px zu schmal ist.

Nimm doch mal die empfohlenen Änderungen vor, denn bislang kann ich sie in den beiden Stylesheets nicht entdecken.

 

[schutzgeist]

Ui, Wahnsinn..
Wie immer bin ich dir zu Dank verpflichtet

 

[Maik]

Ich hab heute Morgen eine knappe Stunde darüber gesessen, bis ich dem Übeltäter auf die Spur gekommen bin, der für das Hüpfen verantwortlich ist.

 

[schutzgeist]

Eine ganze Stunde? Auweia..
Wo kann ich den Dankes-Blumenstrauß und die Pralinen hinschicken? ;-)