mathertel -> AJAXEngine -> Visual Effects -> MouseHover
The effect of an HTML element changes it's color when the mouse is over it is well known for hyperlinks because there is a built-in functionality that enables this kind of effect.
a {color:blue}
a:hover {color: black;}
By specifying these rules you can change the color when the mouse is over a hyperlink element but you need more than this. When the HTML element is not a hyperlink, the CSS rules do not work in all browsers and other events like pushing a button are not supported.
Building a JavaScript behaviour to support these kind of effects is not so hard to implement. The One I'll show here also uses different CSS rules for the different states an object can have by using a naming convention together with the classNames.
All you have to declare in the <style> part of the page or in an attached css file are rules that know about the extended names. Here is an example for elements that have the className "norm":
/* these css attributes should stay the same, so they are attached to all classname variants: */
.norm, .normHover, .normPushed { border: solid 1px #203050; background-color:#CCCCCC;
text-align:center;cursor: pointer; }
/* untouched */
.norm { color:#203050}
/* the mouse is positioned over here */
.normHover { color:blue }
/* the mousebutton is pressed */
.normPushed { color:white;background-color:#23050 }
To attach this behaviour to any objects you have add the new attribute "hover" to it and set it's value to true:
<span style="display:inline-block;width:140px;height:30px;font-size:20px" hover="true" class="norm">one</span>
Here is the sample implementation you can play around:
The implementation of the behaviour is not so hard to understand. The Hover behaviour must be attached to the document level only once and there is a hover.js include file available, that does the registration of the events by itself. Using that include file there is not much impact to your existing pages.
var HoverBehaviour = {
// ----- Properties -----
_obj: null, // the current hovered object
// ----- Events -----
// add hover effect
onmouseover: function(evt) {
var obj = evt.srcElement;
if ((obj != null) && (obj.hover != null) && (obj != HoverBehaviour._obj)) {
if (HoverBehaviour._obj != null)
HoverBehaviour._obj.className = HoverBehaviour._class;
HoverBehaviour._obj = obj;
obj.className = obj.className + "Hover";
} // if
},
// remove hover effect
onmouseout: function(evt) {
var obj = evt.srcElement;
if ((obj != null) && (obj == HoverBehaviour._obj)) {
var cn = HoverBehaviour._obj.className;
obj.className = obj.className.replace(/(Pushed|Hover)$/, "");
HoverBehaviour._obj = null;
HoverBehaviour._class = null;
} // if
},
// remove hover effect
onmousedown: function(evt) {
var obj = evt.srcElement;
if (obj == HoverBehaviour._obj)
obj.className = obj.className.replace(/(Pushed|Hover)$/, "") + "Pushed";
},
// remove hover effect
onmouseup: function(evt) {
var obj = evt.srcElement;
if (obj == HoverBehaviour._obj)
obj.className = obj.className.replace(/(Pushed|Hover)$/, "") + "Hover";
}
} // HoverBehaviour
jcl.LoadBehaviour(document, HoverBehaviour);
To enable the effect on a specific side you can include JavaScript by including the script file hover.js or by including the Hover web control anywhere on the page. The later way of including the functionality takes care of also including the JavaScript behaviour script file:
<ve:Hover ID="Hover2" runat="server" />
Another sample of this behavior is the implementation behind the buttons on the AJAX engine home page. The background of these buttons is implemented by using a small image file:
.VEButton, .VEButtonHover, .VEButtonPushed {
display:inline; cursor:pointer; padding:2px 6px 2px 6px;
}
.VEButton {
background-image:url(controls/images/buttonback.png);background-color:#eaeef7;
background-position:bottom;background-repeat:repeat-x;
border:solid 1px #517dc7;
}
.VEButtonHover {
background-image:url(controls/images/buttonbackhover.png);background-color:#eaf7ee;
background-position:bottom;background-repeat:repeat-x;
border:solid 1px #51c77d;
}
.VEButtonPushed {
background-image:url(controls/images/buttonbackpushed.png);background-color:#eaeef7;
background-position:top;background-repeat:repeat-x;
border:solid 1px #517dc7;
}
These css rules as well as all the other css rules i use in the visual effects can be found in the comon css file I use on this site: (view source).
This visual effect is also used in the overlay panel. You can see the source code ot this page by using the view source command in the right upper corner. The source code of the hover.js file can be seen here.
This page is part of the http://www.mathertel.de/AJAXEngine/ project. For updates and discussions see The AJAX Engine blog.