( Please read this before considering using it)
Description
Stuffing HTML pages with inline javascript code for such simple things as changing image when the mouse goes over is really overkilling. Such useful features deserve a native HTML support. This module is an attemps to complement HTML image support with such universally used features.How to use it
Over state images
A huge number of websites use the "image mouseover trick", which consists of dynamically replacing an image by another when the mouse goes over it. This is especially useful for menus and image-based buttons. This module offer such features via simple HTML attributes, as demonstrated in this example:
| HTML |
<img src="../pictures/img.gif"
mjsoversrc="../pictures/img_over.gif"
width="66" height="31">
|
|---|---|
| UI | 
|
Smooth transitions via image morphing
Thanks the alpha transparency of DIV elements, we can provide a better transition between images and their respective over state version. This is done by declaring the "mjseffect=morph" attribute, as demonstrated in the following example:
| HTML |
<img src="../pictures/img.gif"
mjsoversrc="../pictures/img_over.gif"
mjseffect="morph"
width="66" height="31">
|
|---|---|
| UI |
|
Links on images
We often need to define an image acting as an hyper link by surrounding the IMG tag within a A anchor. You can do the same thing in the IMG tag by assing the 'mjshref' attribute, which is similar to the 'href' attribute of the A tag.
| HTML |
<img src="../pictures/img.gif"
mjsoversrc="../pictures/img_over.gif
|
|---|---|
| UI |
|
Technical notes
How it works
At initialization time, when the document is loaded, the module goes over all image (IMG) elements having a mjs attribute and build the document alterations based on properties via a handful of html node manipulations. When the image has an over state version, a DIV in created in replacement of the original image as a container for the two state images. The over state image starts hidden, which leave the original image visible. When the mouse goes over this DIV element, the over state image is unmasked and overrides the original image. The mouseout event does the contrary: it masks the over state image.
We obtain the morph effect by simply replacing the on/off masking technique by something using alpha transparency. By playing with the opacity of the over state image, we can introduce the intermediate steps we need. Changing the opacity factor is done by using short timers so that we perceive continuity in the morphing phases.
JavaScript API
mjs_setOvertStateEffect(effectName)