Gallery

csH web workbooks

web workflow

Explore

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.