The onmouseover event handler is used for generating various kinds of interactivity on web pages. It’s most often used for image rollovers. Image change on mouse over is actually quite simple once we understand the logic.
Here are the two images I made:
icon1.gif: Image for Mouse Out
icon2.gif: Image for Mouse Over
We’ll now construct an image tag and give the image a name using its NAME attribute.
<IMG SRC="icon1.gif" NAME="but" WIDTH="100" HEIGHT="50" BORDER="0" ALT="...">
We use icon1.gif as the value for the SRC attribute since this is the image used for mouseout. The image is named but.
The two event handlers are placed inside the starting <A> tag.
<A HREF="some.html" onmouseover="document.but.src='icon2.gif'" onmouseout="document.but.src='icon1.gif'"> <IMG SRC="icon1.gif" NAME="but" WIDTH="100" HEIGHT="50" BORDER="0" ALT="..."> </A>
As you would have guessed, images are a part the document object. The src property of the image object determines the source of the image.
Credit for creating the modern computer mouse with an optical encoder, single ball and two buttons goes to Jean-Daniel Nicoud of the Ecole Polytechnique Federale de Lausanne in Switzerland. This was a major improvement over original computer mouse created by Douglas Engelbart. Jean-Daniel Nicoud was assisted by André Guignard during the design process. The "Guignard mouse" was ready in 1977 and picked up by Logitech who saw the potential in the device. In 1980s, they started to get the computer peripheral manufactured from another Swiss company, Dubois Depraz SA. With the proliferation of GUI-based operating systems, the mouse soon became extremely popular. By the end of 2008, Logitech announced that they had sold 1 billion of these. [more...]