magna
Follow @magnawebstudio on Twitter Follow @magnawebstudio on Twitter
Follow /magnawebstudio on LinkedIn Follow /magnawebstudio on LinkedIn
awarded site
BS"D
magna web studio
Contact us! Contact us!
WB-Developers' Corner
WB-Developers' Corner
       [rz] Pale Image


This extension allows you to have "pale images" and when they get the focus or the mouse is over them, they smoothly fade-in and when they lose the focus or the mouse goes out from them, they fade-out.


Additionally, they can have a tint simulation and, optionally, it can also fade-in/out with the images.
The opacity levels (to fade-in/out) can be bidirectional: pale when the mouse is out, or pale when the mouse is over.
The fade-in/out can have a custom delay factor for smoother effects.
It works with the Image, Slide Show, Roll Over (image/text) native objects.
The images can have links or events to interact with other objects/extensions.
It has a workaround for the slideshow object when the visitor navigates the page using the keyboard and the images in it have links.
Very useful for images/photographers portfolios.


Cross-browser, cross-platform and backward compatible.


HTML 4.01 Transitional
W3C compliant


DEMO


How to use?

1. Design your page with images, slide shows, etc; as you usually do.
2. Drag and drop the extension, enter the images-related objects ids and set-up the effects you want.

Enjoy!


Notes:
The opacity should always be more than 10% so as to the images can be visible.
For the images that have the same settings, you can simplify the process adding multiple objects ids separated by commas, i.e:
Image1, Image2, SlideShow1, RollOverText1
w3c compliant
© 2012-17 by MAGNA web studio • all rights reserved


new shop with