Categories:

Home / Free JavaScripts / Images & Music / Here

Cut & Paste Overlap Image Viewer

Credit: JavaScript Kit

Description: Overlap Image Viewer lets you quickly associate an image with any element on your page, so that when the mouse rolls over it, the desired image is shown on top of it. A nice "dimming" effect is applied to the element while the loaded image is shown. You simply give an element a special CSS class name plus a title attribute pointing to the URL/path of the desired image, and that's it! Rolling over that element now triggers the effect.

Examples: 

I love to have pancakes and milk for breakfast. For lunch it's usually something light, such as a sandwich. When the time comes for dinner, that's when I indulge, such as with a nice MeatLoaf finished off with some Lemon Cake. Life is good!

A DIv

 

 

 

   

Directions

Step 1: Copy the below code into the <head> section of your page:

The code above references two external .js files, including . Download them below:

Step 2: Then to add an overlapping image to any element on your page, just give that element a CSS class name of "jkimagelarge", and set its "title" attribute to point to the URL/path of the enlarged image. A few examples:

<a href="pancakes.jpg" class="jkimagelarge" title="pancakes.jpg">pancakes</a>

<div style="width: 150px; height: 150px; color: white; background: navy; padding: 5px;" class="jkimagelarge" title="http://www.nasa.gov/images/content/168531main_image_feature_752_ys_4.jpg">Some DIV</div>

<img src="netherlands.gif" width="50" height="31" class="jkimagelarge" title="netherlandslarge.gif" />

As you can see, you can specify either a relative path to the image on your server, or absolute URL inside the "title" attribute.


JavaScript Tools:
Site Info

CopyRight 1998-2014 JavaScript Kit. NO PART may be reproduced without author's permission.