|
jQuery: jaunty little squares 1. |
|
Written by Luca Bonacorsi
|
|
21 January 2012 |
|
CLICK HERE TO SEE THE WORKING EXAMPLE. This example shows how to create HTML elements in run-time in jQuery. Once generated, each element is given the possibility to react to the mouse pointer interaction ('over' and 'out'). The elements, specifically '<P>' items, turn out to cover a whole '<DIV>' (which works as a contanier constantly centered in the web page) and inside it are laid in a tabular manner.

Every time the mouse pointer moves over the surface of a little square, a function is executed to change values of some of its style properties while, when the mouse pointer moves away from the square, its style properties are properly restored. Each '<P>' element can react to the 'mouseover' and 'mouseout' events by means of the 'hover()' method which accepts two functions as parameters: one to be executed when the user mouses over a little square and another one to be triggered when the user mouses out a little square. Once again this example highlights the power of HTML/HTML 5, CSSC/SS3 and jQuery working together. Have fun and stay tuned! :)
|