The use of this effect is that you wanna put big image on ur page but it would mess up your layout or it would load big image against user’s will. So, what do we do? We put small thumbnail and link it to high-resolution image. Not quite cool. You gotta click the thumbnail. Look the image. Hit the back button. Wait for page loading again. No good!!!! That’s not rock n’ roll.
Ok… whatever… no more blah blah blah.
Here is the demo with Mandy Moore image. ;-)
Here is the script.
CSS
<style>
<!--
img.small_to_large {
border-width:0;
}
img.small_to_largelarge {
position: absolute;
top: 0;
left: 0;
z-index: 1;
display: none;
border: 1px solid #3366cc;
}
div.small_to_large {
position: relative;
overflow: visible;
}
-->
</style>
HTML (place the following where you wanna see your image.)
<div class="small_to_large">
<a href="javascript:return(void)"
onmouseover="document.large_img_mandy.style.display='block';">
<img
src="http://img369.imageshack.us/img369/5032/mandywall6vv.th.jpg"
alt="Mandy Moore" name="img_img" class="small_to_large" />
</a>
<a href="javascript:return(void)"
onmouseout="document.large_img_mandy.style.display='none';">
<img
src="http://img369.imageshack.us/img369/5032/mandywall6vv.jpg"
alt="Mandy Moore" name="large_img_mandy"
class="small_to_largelarge"
/>
</a>
</div>
Replace the yellow text accordingly.
Here…
mandywall6vv.th.jpg is thumbnail image
mandywall6vv.jpg is big image
large_img_mandy is element name.
HTH
Technorati Tags: javascript
Wow bro,
ReplyDeleteThis one is really short and simple CSS+JS effect. Pretty handy in some places. It's fast loading too. Cool.
Thanks for the code bro. :)
Cool effect for images :-)
ReplyDelete