An image or portion of an image that changes in appearance when the mouse cursor moves over it

This article needs to be updated. The reason given is: Dated information, mouseover events do a lot more these days.. Please help update this article to reflect recent events or newly available information. (December 2018)

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.

It is also known as rollover, which refers to a button created by a web developer or web designer, found within a web page, used to provide interactivity between the user and the page itself. The term rollover in this regard originates from the visual process of "rolling the mouse cursor over the button" causing the button to react (usually visually, by replacing the button's source image with another image), and sometimes resulting in a change in the web page itself. The part of the term 'roll' is probably referring to older mice which had a mechanical assembly consisting of a hard rubber ball housed in the base of the mouse (which rolls) contrary to the modern optical mouse, which has no rolling parts.

Rollovers can be done by imagery, text or buttons. The user only requires two images/buttons (with the possible addition of "alt" text to these images) to perform this interactive action. Rollover imagery can be done either by a program with a built-in tool or script coding. The user will have to pick a first image and select an alternate secondary image. A mouse action will have to be set to either "click on" or "mouse over" in order for the rollover to be triggered. When the mouseover moves on the image, the alt image/secondary image will appear but won't stay - when the user "mouses out" by moving the mouse away from the image, the original source image will reappear.[citation needed]

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]

<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'); });

^ JavaScript OnMouseOver
^ Advanced CSS Menu | by Web Designer Wall
^ "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)

Retrieved from "https://en.wikipedia.org/w/index.php?title=Mouseover&oldid=1076662205"

A cursor is a moveable icon (generally moved with the mouse) that shows the user where any input into the computer will be placed or where an action will occur. For example, if the cursor is moved on the screen to a button in a program or application and the mouse left button is clicked, it will action.

Key features of a cursor

Some people call the cursor the ‘mouse pointer’ or ‘arrow’. The arrow or pointer is the generally how the cursor will look as you move it around the screen.
However, the cursor will change to a text cursor – called a ‘text select’ or ‘i-beam’ when it is over editable text such as text boxes on websites or in word documents. This shows you that it is a text area. The i-beam can sometimes be difficult to see and can be changed as shown later in the guide.

The cursor also changes on websites when it moves over a hyperlink or link. It will change to a hand to show that the link can be clicked on to take you to another webpage.

When you are in an area where you can type and you click in that area to enter text, the cursor will change to a text cursor – a flashing vertical line to show where the next letter will be placed. If you find this difficult to see and are using a Windows PC go to the Start Menu/Control Panel/Ease of Access/Ease of Access Center/make the computer easier to see/set the thickness of the blinking cursor. You can then change the thickness of the vertical line to your own needs.

There are also different cursors available within windows to make it easier to see or just be a little different. These can be found on a Windows PC by going into the Start Menu/Control Panel/Hardware and Sound/Mouse/Pointers. From here you can choose larger pointers, different colours and types. ‘Normal Select’ is the standard pointer type, ‘Link Select’ is the hand that shows on websites and ‘Text Select’ is the cursor that shows over editable text. These are the main types that people wish to change or resize, as they are seen most often.
Other features can be changed with regards to the cursor to make it easier to see and also to control the speed of the cursor if you find it a little fast. Go to Start menu/Control Panel/Hardware and Sound/Mouse/Pointer Options. Here you can change the cursor speed and also add trails to it if you are finding it hard to spot.
The mouse controls the cursor, so unfortunately sometimes if you click on the mouse accidentally the cursor may have been somewhere you did not mean it to be and you may find yourself somewhere else. Don’t panic… you can always close down the window or program and start again. Alternatively, make sure the cursor is where you want it to be and click the mouse again. This should override what you inadvertently did previously.

Karen Maxwell is a Digital Unite tutor and assessor/trainer of computer accessibility.