The present publication exposes a comparative between the different strategies to implement a rollover image effect for web development.
Pure HTML
In this case the img tag has directly defined the two events: onmouseover and onmouse out, each event defines which value will get the src property when the mouse cursor is over and when is out.
The result is then as follows:
Javascript
This case depicts the use of javascript methods to change the src property from the img tag events that invokes them. In this case instead of define only a property change for each event, this time a javascript method call is defined for each one.
The result is then as follows:
This case employs the javascript library jquery. The main difference is that the img tag has not directly defined the events and everything is done after loaded the webpage calling a reference of the image using jquery and then defining the mouseover and mouseout events using also jquery to get the references to src property of the img in order to change it.
The result is then as follows:
Browser support
The employed HTML events are fully compatible with all the set of most used browsers(See browser support for onmouseover and onmouseout)
However according to each case there is a slight variable compatibility:
Plain HTML is the most compatible because it employs only a basic sentences for each event.
Javascript is the next one because it has a two methods definition and call for each event.
JQuery has some compatility resctrictions according to the kind and version of browser (See JQuery browser support)
Pure HTML
In this case the img tag has directly defined the two events: onmouseover and onmouse out, each event defines which value will get the src property when the mouse cursor is over and when is out.
The result is then as follows:
Javascript
This case depicts the use of javascript methods to change the src property from the img tag events that invokes them. In this case instead of define only a property change for each event, this time a javascript method call is defined for each one.
The result is then as follows:
JQuery
This case employs the javascript library jquery. The main difference is that the img tag has not directly defined the events and everything is done after loaded the webpage calling a reference of the image using jquery and then defining the mouseover and mouseout events using also jquery to get the references to src property of the img in order to change it.
The result is then as follows:
Browser support
The employed HTML events are fully compatible with all the set of most used browsers(See browser support for onmouseover and onmouseout)
However according to each case there is a slight variable compatibility:
Plain HTML is the most compatible because it employs only a basic sentences for each event.
Javascript is the next one because it has a two methods definition and call for each event.
JQuery has some compatility resctrictions according to the kind and version of browser (See JQuery browser support)
