Mouseover

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 on 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 graphical user interface programming.

Tooltip
Main article: 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');
});
gollark: Doo doo doo... compiling...
gollark: Pushing new version now.
gollark: ++exec```haskellmain = error "oops"```
gollark: I'm going to make it say "typing"...
gollark: I mean, it trims the output to 1990 chars, *but* on the other hand there's a timeout and it should just error if it hit that.

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.
  • 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)
This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.