PDA

Archiv verlassen und diese Seite im Standarddesign anzeigen : Bilder in layer oder ähnlich

Dane
2005-10-30, 18:41:57
Hallo,

ich suche den entsprechenden HTML Code für folgende Funktion:

Ich will ne Seite mit ein paar Thumbnails machen, fährt man mit der Maus über die Thumbnails, kommt in einem layer oder wie das heisst die große Version vom Bild. Also wenn man mit der Maus drüber fährt erscheint eine Art Popup, aber es ist kein richtiges Popup. Jedenfalls öffnet sich dadurch kein neues Browserfenster sondern das große Bild popt im gleichen Browserfenster auf.

Ich habe leider kein Beispiel auf Lager was ich meine, aber vielleicht reicht die Beschreibung ja auch.
clm[k1]
2005-10-30, 19:14:11
Dazu brauchst du nicht nur HTML-Code sondern auch JavaScript.

Du könntest zum Beispiel die großen Bilder in versteckte divs stecken. (verstecken mit css: "display:none")
Den divs gibst du dann mit css eine entsprechende Position.

Dann weist du den thumpnails JavaScript-Eventhandler zu (also zB: onmouseover="funtionZumVergroessern('bildId')")

Und mit der Funktion setzt du dann den css-wert display des entsprechenden divs auf nix, also leer... "document.getElementById(bild).style.display = ''"

bei onmouseout dann der umgedrehte fall.

eigentlich relativ einfach.


clm[k1]
PuppetMaster
2005-10-30, 20:12:34
Hab mal aus Interesse (und mit SelfHTML-Hilfe) was mit CSS-only probiert:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
<head>
<title>Bildergalerie</title>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1" />
<style type="text/css">
img {
border: 1px solid #000;
}
#galerie a {
display:block;
float:left;
margin:20px;
margin-top:75px;
}
#galerie a:hover {
border: none;
}
#galerie a span {
display:none;
}
#galerie a:hover span {
display:block;
position:absolute;
top:320px; left:330px;
}
</style>
</head>
<body>

<h1>Testumgebung</h1>

<div id="galerie">
<a href="#"><img src="thumb_Bild1.jpg" alt="Thumb1" /><span><img src="Bild1.jpg" alt="Bild1" /></span></a>
<a href="#"><img src="thumb_Bild2.jpg" alt="Thumb2" /><span><img src="Bild2.png" alt="Bild2" /></span></a>
<a href="#"><img src="thumb_Bild3.jpg" alt="Thumb3" /><span><img src="Bild3.jpg" alt="Bild3" /></span></a>
<a href="#"><img src="thumb_Bild4.jpg" alt="Thumb4" /><span><img src="Bild4.jpg" alt="Bild4" /></span></a>
<a href="#"><img src="thumb_Bild5.jpg" alt="Thumb5" /><span><img src="Bild5.jpg" alt="Bild5" /></span></a>
</div>

</body>
</html>

Für Insider: das #galerie a:hover ist eigentlich total unnötig, aber ohne machts der IE nicht. :ugly: :rolleyes:
/dev/NULL
2005-10-30, 21:55:21
Aber nachteil ist das dann jedes Bild beim Start schon in der großen Version geladen wird, oder?
--> arme Modem Nutzer
PuppetMaster
2005-10-30, 22:34:24
Stimmt, mit display:none werden alle Bilder schon bei Seitenaufruf geladen. Soweit hab ich jetzt nicht gedacht...