Skip to content
csH web workbooks
csH web workbooks
JavaScript techniques
web workflow
More
Share
Explore

icon picker
JavaScript techniques

Mouse events code

Interactive content examples

image rollover
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>
function { }
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

Mouse events code
Interactive content examples
javascript code organisation
Cycle Site uses of javascript
Downhill page: image rollover
BMX page: image size change
Types of Track page: show and hide elements
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.