The Full Wiki

More info on Mouseover

Mouseover: Wikis

Advertisements
  

Note: Many of our articles have direct quotes from sources you can cite, within the Wikipedia article! This article doesn't yet, but we're working on it! See more info or our list of citable articles.

Encyclopedia

From Wikipedia, the free encyclopedia

A Mouseover or hover box refers to a GUI event that is raised when the user moves or "hovers" the cursor over a particular area of the GUI. The technique is particularly common in web browsers where the URL of a hyperlink can be viewed in the status bar. Site designers can easily define their own mouseover events using Javascript[1] and Cascading Style Sheets.[2] In case of multiple layers the mouseover event is triggered by the uppermost layer.

Mouseover events are not limited to web design and are commonly used in modern GUI programming. Their existence might not even be known to the user as the events can be used to call any function and might affect only the internal workings of the program.

Contents

Tooltip

A special usage of mouseover event is a tooltip showing a short description of the GUI object under the cursor. The tooltip generally appears only after the mouse is held over the object for a certain amount of time.

Examples

<!-- Direct usage not recommended | does not conform with web standards -->
<img id="myImage" src="/images/myImage.jpg" onMouseOver="alert('your message');">
// javascript without any framework
var myImg = document.getElementById('myImage');
 
function myMessage() {
    alert('your message');
}
 
if(myImg.addEventListener) { //addEventListener is the standard method to add events to objects
    myImg.addEventListener('mouseover', myMessage, false);
}
 
else if(myImg.attachEvent) { //for Internet Explorer
    myImg.attachEvent('onmouseover', myMessage);
}
 
else { //for other browsers
    myImg.onmouseover = myMessage;
}
// jQuery example | degrades well if javascript is disabled in client browser
$("img").mouseover(function(){
   alert('your message');
});

References

External links

  • Hidden CSS Menu—A multilevel mouseover-menu in pure CSS (i.e. no JavaScript)
Advertisements

Advertisements






Got something to say? Make a comment.
Your name
Your email address
Message