Leider sollen aber thumbnails und Bilder unterschiedlich sein. Thumbnail zeigt z.B. unsere Bundeskanz Angie und das grosse Bild zeigt dann H. Schröder.
Aber eine andere Frage habe ich noch.
Duch den "Österreicher - Tipp" habe ich es hinbekommen, dass sich bei Mouseover ein grosses Bild zeigt. Jedoch möchte ich dass dies beim Klicken erscheint.
mein html ist:
//Anfang -----------------------
<div class="gallerycontainer">
<a class="thumbnail" href="#thumb"><img src="media/tree_thumb.jpg" width="100px" height="66px" border="0" /><span><img src="media/tree.jpg" /><br />Simply beautiful.</span></a>
</div>
mneine css:
<style type="text/css">
.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}
.thumbnail:hover{
background-color: transparent;
}
.thumbnail:hover img{
border: 1px solid blue;
}
.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}
.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}
.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}
</style>
// Ende Beispiel--------------
TEndenziell hätte ich gedacht, ich löse es über die css, aber wirklich geklappt hat es nicht.
Vielen Dank euch allen nochmal!
Andi.
WebsiteBaker Community Forum
