I've created a thumb nail gallery that works ok, but not quite the way I'd like it to work. The thumb nails should produce a large picture in the middle of the screen on mouse-over. The whole mouse-over thing works fine, but the picture does not show up in the thumb nail gallery, there's just an empty frame.
Here's the
CSS I used:
- Code: Select all
#container {
position:relative;
width:770px;
height:396px;
margin:20px auto 0 auto;
border:1px solid #aaa;
}
#container ul {
padding:0;
margin:0;
list-style-type:none;
}
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#fff;
}
#container a.gallery, #container a.gallery:visited {
display:block;
color:#000;
text-decoration:none;
border:1px solid #000;
margin:1px 2px 1px 2px;
text-align:left;
cursor:default;
}
#container a.slidea {
background:url(../Images/welpen/060305-Bluemli1.jpg);
height:64px;
width:93px;
}
#container a.slideb {
background:url(../Images/welpen/060305-Bluemli2.jpg);
height:61px;
width:93px;
}
#container a.slidec {
background:url(../Images/welpen/060305-Bluemliundstups1.jpg);
height:93px;
width:93px;
}
#container a.slided {
background:url(../Images/welpen/060305-Bluemliundstups2.jpg);
height:70px;
width:93px;
}
* html #container a.slided {
width:91px;
w\idth:93px;
}
#container a.slidee {
background:url(../Images/welpen/060305-Bluemliundstups3.jpg);
height:70px;
width:93px;
}
#container a.slidef {
background:url(../Images/welpen/060305-Bluemliundstups4.jpg);
height:70px;
width:93px;
}
* html #container a.slidef {
width:91px;
w\idth:93px;
}
#container a.slideg {
background:url(../Images/welpen/060305-Bluemliundstups5.jpg);
height:70px;
width:93px;
}
#container a.slideh {
background:url(../Images/welpen/060305-Bluemliundstups6.jpg);
height:70px;
width:93px;
}
#container ul {
width:198px;
height:386px;
}
#container li {
float:left;
}
#container ul {
margin:5px;
float:right;
}
#container a.gallery:hover {
border:1px solid #fff;
}
#container a.gallery:hover span {
position:absolute;
width:372px;
height:372px;
top:10px;
left:75px;
color:#000;
background:#fff;
}
#container a.gallery:hover img {
border:1px solid #fff;
float:left;
margin-right:5px;
}
#container a.slideb:hover img, #container a.slidei:hover img {
float:right;
}
And here's the webpage with the gallery:
http://webpages.charter.net/svenjafo...en/welpen.html
Any help with this is very much appreciated :-)
Svenja
