Mouse Tricks

Previously I have discussed how various cursor styles can be accessed via CSS. This current tutorial will go one step further, and give an insight how the cursor property can be changed to another setting dynamically once the page has already been loaded.

This article shows a simple script to obtain the mouse position from an event. The script will work all modern browsers and most older browsers too.

Create horizontal and vertical highlighting on your HTML tables. Highlighting is activated when the mouse hovers over a table cell.

If you have quality content on your webpage and want to prevent people stealing your resources, you can add this script to disable the right-mouse click.

An extremly simple and useful script for implementing a cross browser drag and drop game (IE 4+, NN 6+, Firefox). Place code in the header and simply append all images that are draggable with the class name (class="dragme"). That's it!

Mouse-events.html is a template for handling three basic mouse events: Moving, pressing down on a button, and releasing the button. It works in IE 5+ and should also work in NS 6+. When used in conjunction with DHTML, this can be used to create drag and drop web applications. The three handlers return a true value, changing it to false causes some default browser behaviours, like text highlighting, to become disabled.

Learn how to make your cell background colors change when your mouse is pointed over it.

Extremely simple example of turning background colors of the cells of the table on and off with mouse events to simulate a chalkboard. You can add more rows and columns.

This comprehensive tutorial explains various implementations of JavaScript rollovers. It discusses: How to use the document.images object, How to make your rollovers backward compatible, How to create an instance of the Image object, How to combine several rollovers to create a menu, How to create multiple rollovers, How to ensure maximum "transition" quality, and How to create nested rollovers.