View Single Post
  #1 (permalink)  
Old Mar 11th, 2006, 17:05
svenjafour svenjafour is offline
Junior Member
Join Date: Nov 2005
Location: WV, U.S.
Posts: 10
Thanks: 0
Thanked 0 Times in 0 Posts
thumb nail gallery

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

Last edited by svenjafour; Mar 12th, 2006 at 16:25.
Reply With Quote