Mouse events code
Interactive content examples
content element hide and show alteration of element properties affect element itself (this) or another element (id) javascript code organisation
inline javascript: mouse event directly changes an element property mouse event calls a function (defined in <script> within <head>) internal <script> in the <head> without or with a parameter (usually ref the element to be altered - self or another element) parameter: referencing self (this) parameter: referencing another element using getElementById(id) Cycle Site uses of javascript
Downhill page: image rollover
Simple example: image rollover
All the mouse event handler code is within the element tag. The mouse-over and mouse-out events work as a pair to create and undo an effect. Target element is the interactive element itself and does not affect any other rollover.
element responding to mouse event
BMX page: image size change
function example: enlarge an image and return to normal
moving the mouse over an image makes that image itself bigger, moving away makes it smaller the interactive element changes itself, it does not affect any other element mouse-event handler in the interactive element calls a function a parameter is passed from the mouse-event handler to the function to identify the target to be altered in this case the parameter refers to the interactive element itself (this) the two mouse events work as a pair to create an effect and undo it
function code uses the parameter to change the property of the target element
element responding to mouse event calls one or other function and sends a parameter referring to itself
Types of Track page: show and hide elements
function example: show and hide
CSS code is used to set up the display property of other elements to none or block at the start (load) the elements to be targeted for show and hide are given an id so that they can be selected the interactive element changes more than one other element clicking a button element causes other elements to be shown or to become hidden there is only onclick instead of both onmouseover and onmouseout each button in the group of buttons targets the same set of elements and so a button can change or undo what the an other button has previously done mouse-event handler in the interactive element calls a function the function targets and changes several elements and uses the id property to select each element
the function alters the property of several page elements, it relies on the target elements having an id
element which responds to mouse action, it
element hidden when the page loads and later shown and re-hidden
JavaScript techniques