Skip to content

JavaScript techniques

Mouse events code
onmouseover="javascript code"
onmouseout="javascript code"
onclick="javascript code"
<element id="reference">
<script> .. </script>
function() { .. }
function(parameter) { .. parameter .. }
document.getElementById(id)
this
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
<img class="mountainImages" src="../images/downhillHelmet.jpg" onmouseover="this.src='../images/downhillHelmet2.jpg'" onmouseout="this.src='../images/downhillHelmet.jpg'">
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
<script>
function showLarge(thisGraphic)
{thisGraphic.style.width='300px';
thisGraphic.style.height='225px';}

function showNormal(thisGraphic)
{thisGraphic.style.width='200px';
thisGraphic.style.height='150px';}
</script>
element responding to mouse event calls one or other function and sends a parameter referring to itself
<img class="BMXImages" src="../images/bmxRacing3.jpg"
onMouseOver="showLarge(this)"
onMouseOut="showNormal(this)">
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
<script>
function displayTeam() {
document.getElementById("team").style.display="block";
document.getElementById("keirin").style.display="none";
document.getElementById("pursuit").style.display="none";
document.getElementById("sprint").style.display="none";
}
</script>
element which responds to mouse action, it
<img class="buttonTrack" src="../images/buttonTeam.png" onclick="displayTeam()">
element hidden when the page loads and later shown and re-hidden
<section id="team" style="display:none">
<img src="../images/teamSprint.jpg" style="float:right;margin-left:30px;margin-bottom:30px">
<h2>Team Races</h2>
<p>The team sprint is not a conventional cycling sprint event.</p>
</section>

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.