Okay.. i'm assuming this is for myspace, maybe not though. although i'll make it work so it is for myspace.
start with your preview graphic code:
HTML Code:
<a href="#" class="preview"><img src="http://domain.com/preview_image.jpg" alt="alt text" /><div><img src="http://domain.com/full_image.jpg" /></div>
this will show two images at first, but with some careful css we can remove the second one.
HTML Code:
<style type="text/css">
a.preview {
width:50px;
height:50px;
border:0px;
overflow:hidden;
position:relative;
}
a.preview img {
width:50px; height:50px; border:0px;
}
a.preview div {
display:none;
} Now, this css will create the preview, and hide the full sized image attached inside it. Utilizing the hover action of css we can place the inside <div> anywhere we want on the page. Also, adding position:relative; to the anchor allows us to easily position the large picture in relation to the preview image.
HTML Code:
<style type="text/css">
a.preview:hover div {
display:block;
position:absolute;
top:0px;
right:0px;
float:right;
}
</style> Display:block reverts the <div> back to its origional state, it is now visible on the screen.
position:absolute; now places that div above everything else on the screen in relation to the anchor with position:relative;
the top, and right properties are just positioning properties. and float:right; is just to allow the inside image to manipulate the size of the <div>.
Hope that helped, i didn't test these at all... so it might not work but i'm pretty sure it will.
.
Linear Mode
