A Mouseover or hover box refers to a GUI A graphical user interface (sometimes pronounced gooey) is a type of user interface item that allows people to interact with programs in more ways than typing such as computers; hand-held devices such as MP3 Players, Portable Media Players or Gaming devices; household appliances and office equipment with images rather than text commands. A GUI event 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 that is raised when the user moves or "hovers" the cursor The literal meaning of the original Latin word cursor expresses the idea of someone or something that runs. Especially in the plural, Cursores 'runners', it was the name of certain functions, originally messengers. Cursor was also a Roman cognomen used by gens Papiria[disambiguation needed] over a particular area of the GUI. The technique is particularly common in web browsers 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. Hyperlinks present in resources enable users to easily navigate their browsers to where the URL In computing, a Uniform Resource Locator is a Uniform Resource Identifier (URI) that specifies where an identified resource is available and the mechanism for retrieving it. In popular usage and in many technical documents and verbal discussions it is often incorrectly used as a synonym for URI,. The best-known example of a URL is the " of a hyperlink In computing, a hyperlink is a reference to a document that the reader can directly follow, or that is followed automatically[citation needed]. The reference points to a whole document or to a specific element within a document. Hypertext is text with hyperlinks. Such text is usually viewed with a computer. A software system for viewing and can be viewed in the status bar 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 its window, although some status bars have extra. Site designers Web design is the skill of creating presentations of content that is delivered to an end-user through the World Wide Web, using a Web browser or other Web-enabled software . The intent of web design is to create a website—a collection of electronic documents and applications that reside on a Web server/servers. The website may include text, can easily define their own mouseover events using Javascript JavaScript is an implementation of the ECMAScript language standard and is typically used to enable programmatic access to computational objects within a host environment. It can be characterized as a prototype-based object-oriented scripting language that is dynamic, weakly typed and has first-class functions. It is also considered a functional[1] and Cascading Style Sheets Cascading Style Sheets is a style sheet language used to describe the presentation semantics (that is, the look and formatting) of a document written in a markup language. Its most common application is to style web pages written in HTML and XHTML, but the language can also be applied to any kind of XML document, including SVG and XUL.[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 In computer science, a subroutine or subprogram is a portion of code within a larger program, which performs a specific task and is relatively independent of the remaining code and might affect only the internal workings of the program.
Contents |
Tooltip
A special usage of mouseover event is a tooltip The tooltip 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 over 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)
Categories: Graphical user interface | Widgets Categories: Graphical user interface | User interface techniques
|
