[rz] Pale Image
Posted: Sun Oct 12, 2014 4:52 pm
[rz] Pale Image v1.0
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
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