[rz] Rollover Layers *** UPD 2016-Oct-06 ***
Forum rules
*** IMPORTANT INFO REGARDING [RZ] EXTENSIONS ***
This section contains extensions that were created by [rz] who has sadly passed away.
These extensions are no longer available or supported, but the discussions may still be helpful for some users.
*** IMPORTANT INFO REGARDING [RZ] EXTENSIONS ***
This section contains extensions that were created by [rz] who has sadly passed away.
These extensions are no longer available or supported, but the discussions may still be helpful for some users.
[rz] Rollover Layers *** UPD 2016-Oct-06 ***
[rz] Rollover Layers v1.2.1
The lightweight solution to rollover layers.
Similar to the rollover extension, this one allows you to rollover almost any object!
It can be fully handled only by the keyboard (tab keys and so on) and solves the lack of the mouseover event in touch devices.
Sample project file included.
HTML 4.01 Transitional
W3C compliant
DEMO
Some features:
Move your mouse over the slideshow panels to see it in action or press the tab key until objects get the focus.
Fully keyboard support with smart mouse/keyboard detection and handling.
Touch devices are supported to workaround the lack of mouseover event.
The "over" layer can even have advanced scripting such as slideshows or images with effects.
Multi-instance.
Multi-objects-couples of ids for even easier setup.
Automated startup.
* New in version 1.2.1
- Improved core.
- Added optional blur to the effects.
Please note: Some browsers may not support or may partially support the above zoom/rotate/blur features.
* New in version 1.2.0.4
- Workaround for iOS 9 refresh issues.
* New in version 1.2.0.3
- Improved startup and compatibility with other [rz] extensions.
- Improved backward focus control compatibility.
- Fixed a timing error that prevents "over" layers to be shown correctly on some events.
* New in version 1.2.0.2
- Zoom: Selectively zoom-in for the base-layer contents.
- Rotate: Selectively rotate for the base-layer contents.
- Time in for the zoom/rotate effect.
- Time out for the zoom/rotate effect.
Please note: Some browsers may not support or may partially support the above mentioned features.
* New in version 1.2.0.1
- Improved iPad time/cycle handler.
- Smoother overall performance.
* New in version 1.2
- Fade-in delay factor.
- Fade-out delay factor.
- Opacity level.
(no jQuery required)
* New in version 1.1
- Added support for RWD.
* New in version 1.0.2
- Workaround for smoother performance in IE and solved an unstable mouse-click behavior under certain conditions.
- Workaround for better performance in tablets and other touch devices.
- Improved startup and keyboard handled navigability.
- Optimized the chained objects process.
* New in version 1.0.1
- Now the z-index is not internally swapped for the base and over layers (gives more design freedom to the developer).
- Improved tab/keyboard handling when the layers have links or not.
- Automatically synchronized for multi-instance and multi-access (simultaneous mouse and keyboard handling! Please note: in that case, the layers must be grouped/chained; see the notes at the bottom of this text).
- Improved functionality/performance on tablets.
- More autoresize options.
- More autoalign options.
- Enable/disable images dragging.
- Enable/disable text selection.
How to use?
1. build your 'base' layer as you usually do; it can have an images, texts, slideshows and so on...
2. build your 'over' layer as you usually do; it can also have links!
3. drag and drop the this extension.
4. setup the required parameters:
a) Layer1: is the 'base' layer.
b) Layer2: is the 'over' layer that will be shown over the 'base' layer.
5. setup the optional parameters if you want to customize some behavior details...
Enjoy!
Notes:
You can setup chained layers entering their ids separated by commas; in that case, you must enter the same number of 'base' and 'over' layers ids.
Layer1: MyBaseLayer
Layer2: MyOverLayer
or
Layer1: MyFirstBaseLayer, MySecondBaseLayer, MyThirdBaseLayer
Layer2: MyFirstOverLayer, MySecondOverLayer, MyThirdOverLayer
The lightweight solution to rollover layers.
Similar to the rollover extension, this one allows you to rollover almost any object!
It can be fully handled only by the keyboard (tab keys and so on) and solves the lack of the mouseover event in touch devices.
Sample project file included.
HTML 4.01 Transitional
W3C compliant
DEMO
Some features:
Move your mouse over the slideshow panels to see it in action or press the tab key until objects get the focus.
Fully keyboard support with smart mouse/keyboard detection and handling.
Touch devices are supported to workaround the lack of mouseover event.
The "over" layer can even have advanced scripting such as slideshows or images with effects.
Multi-instance.
Multi-objects-couples of ids for even easier setup.
Automated startup.
* New in version 1.2.1
- Improved core.
- Added optional blur to the effects.
Please note: Some browsers may not support or may partially support the above zoom/rotate/blur features.
* New in version 1.2.0.4
- Workaround for iOS 9 refresh issues.
* New in version 1.2.0.3
- Improved startup and compatibility with other [rz] extensions.
- Improved backward focus control compatibility.
- Fixed a timing error that prevents "over" layers to be shown correctly on some events.
* New in version 1.2.0.2
- Zoom: Selectively zoom-in for the base-layer contents.
- Rotate: Selectively rotate for the base-layer contents.
- Time in for the zoom/rotate effect.
- Time out for the zoom/rotate effect.
Please note: Some browsers may not support or may partially support the above mentioned features.
* New in version 1.2.0.1
- Improved iPad time/cycle handler.
- Smoother overall performance.
* New in version 1.2
- Fade-in delay factor.
- Fade-out delay factor.
- Opacity level.
(no jQuery required)
* New in version 1.1
- Added support for RWD.
* New in version 1.0.2
- Workaround for smoother performance in IE and solved an unstable mouse-click behavior under certain conditions.
- Workaround for better performance in tablets and other touch devices.
- Improved startup and keyboard handled navigability.
- Optimized the chained objects process.
* New in version 1.0.1
- Now the z-index is not internally swapped for the base and over layers (gives more design freedom to the developer).
- Improved tab/keyboard handling when the layers have links or not.
- Automatically synchronized for multi-instance and multi-access (simultaneous mouse and keyboard handling! Please note: in that case, the layers must be grouped/chained; see the notes at the bottom of this text).
- Improved functionality/performance on tablets.
- More autoresize options.
- More autoalign options.
- Enable/disable images dragging.
- Enable/disable text selection.
How to use?
1. build your 'base' layer as you usually do; it can have an images, texts, slideshows and so on...
2. build your 'over' layer as you usually do; it can also have links!
3. drag and drop the this extension.
4. setup the required parameters:
a) Layer1: is the 'base' layer.
b) Layer2: is the 'over' layer that will be shown over the 'base' layer.
5. setup the optional parameters if you want to customize some behavior details...
Enjoy!
Notes:
You can setup chained layers entering their ids separated by commas; in that case, you must enter the same number of 'base' and 'over' layers ids.
Layer1: MyBaseLayer
Layer2: MyOverLayer
or
Layer1: MyFirstBaseLayer, MySecondBaseLayer, MyThirdBaseLayer
Layer2: MyFirstOverLayer, MySecondOverLayer, MyThirdOverLayer
Last edited by [RZ] on Thu Oct 06, 2016 11:35 am, edited 13 times in total.
Re: Rollover Layers
hope you meant you love the extension... 

Re: Rollover Layers
i try to understand..
should we place the layer number 2 over the layer number 1 or it dosent matter.
should we place the layer number 2 over the layer number 1 or it dosent matter.
Re: Rollover Layers
it depends on what you want to accomplish...
Re: Rollover Layers
Great work RZ.
Re: Rollover Layers
@tommy
thank you!
btw, an update is available...
thank you!
btw, an update is available...
Re: Rollover Layers
New in version 1.0.1.0
- Now the Z-index is not internally swapped for the base and over layers (gives more design freedom to the developer).
- Improved tab/keyboard handling when the layers have links or not.
- Automatically synchronized for multi-instance and multi-access (simultaneous mouse and keyboard handling! Please note: in that case, the layers must be grouped/chained; see the notes at the bottom of this text).
- Improved functionality/performance on tablets.
- More autoresize options.
- More autoalign options.
- Enable/disable images dragging.
- Enable/disable text selection.
- Now the Z-index is not internally swapped for the base and over layers (gives more design freedom to the developer).
- Improved tab/keyboard handling when the layers have links or not.
- Automatically synchronized for multi-instance and multi-access (simultaneous mouse and keyboard handling! Please note: in that case, the layers must be grouped/chained; see the notes at the bottom of this text).
- Improved functionality/performance on tablets.
- More autoresize options.
- More autoalign options.
- Enable/disable images dragging.
- Enable/disable text selection.
Re: Rollover Layers *** UPDATED Apr-20-2014 ***
New in version 1.0.2.0
- Workaround for smoother performance in IE and solved an unstable mouse-click behavior under certain conditions.
- Workaround for better performance in tablets and other touch devices.
- Improved startup and keyboard handled navigability.
- Optimized the chained objects process.
- Workaround for smoother performance in IE and solved an unstable mouse-click behavior under certain conditions.
- Workaround for better performance in tablets and other touch devices.
- Improved startup and keyboard handled navigability.
- Optimized the chained objects process.
Re: Rollover Layers *** UPDATED Apr-20-2014 ***
is there someone that uses this extension?
I would like to create an effect like the one on the right in the demo http://www.zerajia.com/demo/rollover/main.html but I don't understand how to do it. It would be useful a little manual
I would like to create an effect like the one on the right in the demo http://www.zerajia.com/demo/rollover/main.html but I don't understand how to do it. It would be useful a little manual
Re: Rollover Layers *** UPDATED Apr-20-2014 ***
what do you want?
the rollover itself or the images slider?
please refer to the 1st post to see how to you use (the rollover)
the rollover itself or the images slider?
please refer to the 1st post to see how to you use (the rollover)
Re: Rollover Layers *** UPDATED Apr-20-2014 ***
it seems to me that in the right example there are both: the images are "moving" and there is a slide. My problem is how to obtain this effect...
Re: Rollover Layers *** UPDATED Apr-20-2014 ***
the images sliding extension in the online sample is not related with the rollover layers extension itself.
the images sliding extension is not free.
the rollover extension has two versions, free and paid.
please contact here: www.magnawebstudio.com/developer for more details.
best regards
the images sliding extension is not free.
the rollover extension has two versions, free and paid.
please contact here: www.magnawebstudio.com/developer for more details.
best regards
Re: [rz] Rollover Layers *** UPD 2014-Oct-14 ***
UPGRADE AVAILABLE
New in version 1.1.0.0
- Added support for RWD.
New in version 1.1.0.0
- Added support for RWD.
Re: [rz] Rollover Layers *** UPD 2015-Jan-08 ***
New in version 1.2
- Fade-in delay factor.
- Fade-out delay factor.
- Opacity level.
(no jQuery required)
- Fade-in delay factor.
- Fade-out delay factor.
- Opacity level.
(no jQuery required)
Re: [rz] Rollover Layers *** UPD 2015-Jan-08 ***
RZ You NEVER let me down! Thank you! 

Running WYSIWYG Web Builder since 2007...
Re: [rz] Rollover Layers *** UPD 2015-Mar-11 ***
New in version 1.2.0.1
- Improved iPad time/cycle handler.
- Smoother overall performance.
- Improved iPad time/cycle handler.
- Smoother overall performance.
Re: [rz] Rollover Layers *** UPD 2015-Apr-13 ***
* New in version 1.2.0.2:
- Zoom: Selectively zoom-in for the base-layer contents.
- Rotate: Selectively rotate for the base-layer contents.
- Time in for the zoom/rotate effect.
- Time out for the zoom/rotate effect.
Please note: Some browsers may not support or may partially support these features.
- Zoom: Selectively zoom-in for the base-layer contents.
- Rotate: Selectively rotate for the base-layer contents.
- Time in for the zoom/rotate effect.
- Time out for the zoom/rotate effect.
Please note: Some browsers may not support or may partially support these features.
Re: [rz] Rollover Layers *** UPD 2015-Apr-13 ***
This is a fantastic gem with a very powerful hidden gem that I was introduced by RZ. Highly recommend!!!! Well done RZ always manage to surprise me!!!!
Running WYSIWYG Web Builder since 2007...
Re: [rz] Rollover Layers *** UPD 2015-Apr-13 ***
lol, this is a funny feedback! thank you for your words 

Re: [rz] Rollover Layers *** UPD 2015-Oct-15 ***
* New in version 1.2.0.3:
- Improved startup and compatibility with other [rz] extensions.
- Improved backward focus control compatibility.
- Fixed a timing error that prevents "over" layers to be shown correctly on some events.
- Improved startup and compatibility with other [rz] extensions.
- Improved backward focus control compatibility.
- Fixed a timing error that prevents "over" layers to be shown correctly on some events.
Re: [rz] Rollover Layers *** UPD 2015-Oct-15 ***
* New in version 1.2.0.4:
- Workaround for iOS 9 refresh issues.
- Workaround for iOS 9 refresh issues.
Re: [rz] Rollover Layers *** UPD 2016-Oct-06 ***
* New in version 1.2.1
- Improved core.
- Added optional blur to the effects.
Please note: Some browsers may not support or may partially support the above zoom/rotate/blur features.
- Improved core.
- Added optional blur to the effects.
Please note: Some browsers may not support or may partially support the above zoom/rotate/blur features.