yummy
09-04-2007, 04:20 AM
Hello all
I followed the instruction like a 'good woman should' and it all works fine with one exception. I want to use the 'enlarge pic' feature on my website where pics are spread out over a large area. The first row of pics works well. The second row and third etc do not because the enlarged pic is ALWAYS at the top of the page. Is it possible to have the pic enlarge immediately beside, or at least in the same viewing area, as the thumbnail itself? I am a real newbie when it comes to this stuff so if you can help me we might be able to marry someday..lol
Here is the code I have used on my style sheet
.
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: absolute;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 3px solid black;
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>
And here is the HTML i used
<link rel="stylesheet" type="text/css" href="new_page_1.css">
</head>
<body>
<div class="gallerycontainer height=300">
<a class="thumbnail" href="#thumb"><img src="3064.jpg" width="100px" height="200px" border="0" /><span><img src="3064zz.jpg" /><br />Unbelievable....This is only Php 950.00</span></a>
<a class="thumbnail" href="#thumb"><img src="1630B.JPG" width="100px" height="200px" border="0" /><span><img src="1630zz.jpg" /><br />Your man said to buy this!!!!</span></a>
<a class="thumbnail" href="#thumb"><img src="3064.jpg" width="100px" height="200px" border="0" /><span><img src="3064zz.jpg" /><br>Yeah I know....My boss always picks me for the review pics.</span></a>
<a class="thumbnail" href="#thumb"><img src="1630B.JPG" width="100px" height="200px" border="0" /><span><img src="1630zz.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="3064.jpg" width="100px" height="200px" border="0" /><span><img src="3064zz.jpg" /></span></a>
</div>
</body>
Any suggestions would be so helpful.
Any sorry, I did have a look at a million other posts and didn't see this request there but if it is then sorry to bother everyone.
Cheers
Daisy
I followed the instruction like a 'good woman should' and it all works fine with one exception. I want to use the 'enlarge pic' feature on my website where pics are spread out over a large area. The first row of pics works well. The second row and third etc do not because the enlarged pic is ALWAYS at the top of the page. Is it possible to have the pic enlarge immediately beside, or at least in the same viewing area, as the thumbnail itself? I am a real newbie when it comes to this stuff so if you can help me we might be able to marry someday..lol
Here is the code I have used on my style sheet
.
<style type="text/css">
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.gallerycontainer{
position: absolute;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}
.thumbnail img{
border: 3px solid black;
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>
And here is the HTML i used
<link rel="stylesheet" type="text/css" href="new_page_1.css">
</head>
<body>
<div class="gallerycontainer height=300">
<a class="thumbnail" href="#thumb"><img src="3064.jpg" width="100px" height="200px" border="0" /><span><img src="3064zz.jpg" /><br />Unbelievable....This is only Php 950.00</span></a>
<a class="thumbnail" href="#thumb"><img src="1630B.JPG" width="100px" height="200px" border="0" /><span><img src="1630zz.jpg" /><br />Your man said to buy this!!!!</span></a>
<a class="thumbnail" href="#thumb"><img src="3064.jpg" width="100px" height="200px" border="0" /><span><img src="3064zz.jpg" /><br>Yeah I know....My boss always picks me for the review pics.</span></a>
<a class="thumbnail" href="#thumb"><img src="1630B.JPG" width="100px" height="200px" border="0" /><span><img src="1630zz.jpg" /></span></a>
<a class="thumbnail" href="#thumb"><img src="3064.jpg" width="100px" height="200px" border="0" /><span><img src="3064zz.jpg" /></span></a>
</div>
</body>
Any suggestions would be so helpful.
Any sorry, I did have a look at a million other posts and didn't see this request there but if it is then sorry to bother everyone.
Cheers
Daisy