Cut & Paste Overlap Image Viewer
|
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!
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.