Mouseover

From Wikipedia, the free encyclopedia
Jump to navigation Jump to search

In computing, a mouseover, mouse hover or hover box is a graphical control element that is activated when the user moves or hovers the pointer over a trigger area, usually with a mouse, but also possible with a digital pen. Mouseover control elements are common in web browsers. For example, hovering over a hyperlink triggers the mouseover control element to display a URL pn the status bar. Site designers can define their own mouseover events using JavaScript[1] or cascading style sheets.[2]

Mouseover events are frequently used in web design and the programming of the graphical user interface.

Tooltip

A special usage of mouseover event is a tooltip which shows a short description of the object under the pointer. The tooltip appears only after the mouse or stylus is held over the object for a certain amount of time.

On images, these may be produced using the HTML title attribute.[3]

Examples

<!-- Direct usage is not recommended. It does not conform with web standards. -->
<img id="myImage" src="/images/myImage.jpg" onMouseOver="alert('your message');">
// JavaScript code without any framework
<ref>var myImg = document.getElementById('myImage');</ref>
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. It degrades well if JavaScript is disabled in the client browser.
$("img").mouseover(function(){
   alert('your message');
});

References

  1. ^ JavaScript OnMouseOver
  2. ^ Advanced CSS Menu | by Web Designer Wall
  3. ^ "A vocabulary and associated APIs for HTML and XHTML". Retrieved 16 February 2015.

External links

  • Hidden CSS Menu A multilevel mouseover-menu in pure CSS (i.e. no JavaScript)
  • DontClick.it Demonstration of navigation using only mouseover (requires Flash Player)
Retrieved from "https://en.wikipedia.org/w/index.php?title=Mouseover&oldid=872720222"
This content was retrieved from Wikipedia : http://en.wikipedia.org/wiki/Mouseover
This page is based on the copyrighted Wikipedia article "Mouseover"; it is used under the Creative Commons Attribution-ShareAlike 3.0 Unported License (CC-BY-SA). You may redistribute it, verbatim or modified, providing that you comply with the terms of the CC-BY-SA