Computing is usually defined as the activity of using and improving computer hardware and software. It is the computer-specific part of information technology...
a mouseover, mouse hover or hover box refers to a GUI
Graphical user interface
In computing, a graphical user interface is a type of user interface that allows users to interact with electronic devices with images rather than text commands. GUIs can be used in computers, hand-held devices such as MP3 players, portable media players or gaming devices, household appliances and...
In computer programming, event-driven programming or event-based programming is a programming paradigm in which the flow of the program is determined by events—i.e., sensor outputs or user actions or messages from other programs or threads.Event-driven programming can also be defined as an...
that is raised when the user moves or "hovers" the cursor
Cursor (computers)
In computing, a cursor is an indicator used to show the position on a computer monitor or other display device that will respond to input from a text input or pointing device. The flashing text cursor may be referred to as a caret in some cases...
over a particular area of the GUI. The technique is particularly common in web browser
Web browser
A web browser is a software application for retrieving, presenting, and traversing information resources on the World Wide Web. An information resource is identified by a Uniform Resource Identifier and may be a web page, image, video, or other piece of content...
In computing, a uniform resource locator or universal resource locator is a specific character string that constitutes a reference to an Internet resource....
In computing, a hyperlink is a reference to data that the reader can directly follow, or that is followed automatically. A hyperlink points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks...
A status bar, similar to a status line, is an information area typically found at the bottom of windows in a graphical user interface.A status bar is sometimes divided into sections, each of which shows different information. Its job is primarily to display information about the current state of...
Web design is the process of planning and creating a website. Text, images, digital media and interactive elements are used by web designers to produce the page seen on the web browser...
can easily define their own mouseover events using Javascript
JavaScript
JavaScript is a prototype-based scripting language that is dynamic, weakly typed and has first-class functions. It is a multi-paradigm language, supporting object-oriented, imperative, and functional programming styles....
Cascading Style Sheets is a style sheet language used to describe the presentation semantics of a document written in a markup language...
. 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.
The tooltip or infotip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear—a small "hover box" with information about the item being hovered...
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
// 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');
});
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)
The source of this article is wikipedia, the free encyclopedia. The text of this article is licensed under the GFDL.
