I am rewriting an existing webpage. Part of the plan is to replace the existing Javascript driven photo gallery with one that looks and works better using only CSS. The whole thing looks pretty slick and handles about 12 images of a modest size which is all we want.
It works like this, all the large images are hidden from view until the user does a mouse over on a thumbnail of the same image. then the big image (around 400 px on the long side is all it is) pops up.
The big images are loaded into a unordered list. The thumbnails are loaded as background images for the list. All of that said, here are a few sniplets of the CSS stuff.
/* The containing box for the gallery. */
#container {
position:relative;
width:770px;
height:405px;
margin:20px auto 0 auto;
border:1px solid #aaa;
}
/* Removing the list bullets and indentation */
#container ul {
padding:0;
margin:0;
list-style-type:none;
}
/* Remove the images and text from sight */
#container a.gallery span {
position:absolute;
width:1px;
height:1px;
top:5px;
left:5px;
overflow:hidden;
background:#fff;
}
/* Adding the thumbnail images */
#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/Thumb/AHT-1-t.jpg);
height:62px;
width:93px;
}
#container a.slideb {
background:url(../images/thumb/AHT-2-t.jpg);
height:62px;
width:93px;
}
#container a.slidec {
background:url(../images/thumb/AHT-3-t.jpg);
height:62px;
width:93px;
}
#container a.slided {
background:url(../images/thumb/AHT-4-t.jpg);
height:62px;
width:93px;
}
* html #container a.slided {
width:91px;
width:93px;
}
------------------------------------------------- Thumb nail loading has been truncated to save space ----------------------------------------
The problem is this. when the thing runs and loads the thumb images the image used for the FIRST image of 12 total images it ALSO loads for the 11 image out of 12images loaded. and I have no Idea why.
As mentioned above we will at least need the full css and html to help with this but a link would be better. It sounds like something pretty simple but there is not enough to go on in the above code.
The code has not been put out on the web yet so I have no page for you to look at. I will do one of two things.
take a screen shot and paste it here. along with the code.
get permission to promote the code to production as is so we can solve the problem quicker. The error is nothing more than a nuisance. Even though thumb nail AHT-1-t.jpg populates it’s own space AND the space for AHT-11-t.jpg, when you hover over the 11th position, the correct large image comes up.
To the left is a snapshot of what the code produces. Notice that the first and 11th (out of 12) images are identical. They should not be. It is interesting to note that when a mouse is hovered over the 11th image the correct full size image pops up. Below is all of the HTML and CSS code.
This is GREAT news. I feel foolish to have missed something so simple and obvious, but I don’t even care. Great Job finding the error, and thanks a million.
If you ever need help with IBM’s WMQ Series let me know and I will be able to return the favor (I hope).
