Image Effect Javascript

I think the image effect in "Union day" post must be interesting for some people. My friend, Mayvelous, asked about that and she also has a post about “LightBox JS” on her blog. So, I think it would be helpful if I post about the script I used here too.

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