Javascript

JavaScript events (onmouseover, onmouseout and onclick) are used to add interactive web content.

Some possible actions include:

  • hiding page elements

  • revealing page elements

  • changing the position of an element

  • changing the size of an element

  • changing the colour of an element

  • changing the look of text

The JavaScript functions are placed within a <script> element in the <head> section where it can be called and used multiple times.

Changing the size of a Graphic

Script

<script>

function displayLarger(image)

{image.style.width=‘150px’; image.style.height=‘150px’;}

function displaySmaller(image)

{image.style.width=‘100px’; image.style.height=‘100px’;}

</script>

HTML

<img src=“guitar.jpg”

onmouseover=“displayLarger(this)”

onmouseout=“displaySmaller(this)”>


These functions can be called many times within the HTML code:

<img src=“drama.jpg”

onmouseover=“displayLarger(this)”

onmouseout=“displaySmaller(this)”>

<img src=“study.jpg”

onmouseover=“displayLarger(this)”

onmouseout=“displaySmaller(this)”>

<img src=“rugby.jpg”

onmouseover=“displayLarger(this)”

onmouseout=“displaySmaller(this)”>


Rollover Graphics

Rollover images can be created using onmouseover and onmouseout.

onmouseover displays an alternate graphic when the mouse passes over the graphic onmouseout displays the original graphic when the mouse pointer leaves the graphic.

This can be implemented using the inline code below:

<img src=“karate.jpg” onmouseover=“this.src=‘basketball.jpg’” onmouseout=“this.src=‘karate.jpg’”>


Like the last example, functions can be called many times within the HTML code.

Script

<script>

function displaySportOver(image)

{image.src=‘netball.jpg’;}

function displaySportOut(image)

{image.src=‘football.jpg’;}

</script>

HTML

<img src=“football.jpg”

onmouseover=“displaySportOver(this)”

onmouseout=“displaySportOut(this)”>

Change Text Colour

Text may be highlighted by changing its style when the mouse pointer passes over the element containing the text.

The example below highlights a paragraph element dark red, by using an onmouseover event:


<p onmouseover=“this.style.color=‘darkRed’”>

This is paragraph text displayed in the webpage

</p>


It’s possible to move the mouse over a graphic and change the colour of a text somewhere else on the page. An ID is required to identify the text element that will change colour.


A text element can be identified using document.getElementById(‘ ’)


<p id=“intro”>

<img src=“newsIcon.png”

onmouseover="document.getElementById(‘intro').style.color=

'darkRed'">

<br>Welcome to the webpage...

</p>


Revealing Text

When a webpage loads, elements may be initially hidden by applying the CSS declaration

.hidden{display:none}.

.hidden is a class that is used on all the elements that are to be hidden upon loading.

The graphic element reveal.png contains an onclick event that uses the paragraph element’s ID to execute the action ‘display=block’ on the paragraph.

The result of this action is that the paragraph text becomes visible on the page.

<p> Q1 - Do you make notes or draw diagrams when studying? </p>

<img src=“reveal.png”

onClick=“document.getElementById(‘showAnswer’).style.display=‘block’”>

<p id=“showAnswer” class=“hidden”> Research shows that...</p>

Revealing Multiple Elements

Graphics elements can be clicked to display hidden elements of the page.

Each onclick event is used to reveal a hidden <section> element containing a graphic and text.

Each onclick event calls a function:

<p> Click on an option below...<br>

<img src=“juniorChoir.png” onclick=“displayJC()”>

<img src=“seniorChoir.png” onclick=“displaySC()”>

<img src=“orchestra.png” onclick=“displayO ()”>

</p>

Here is one section element, containing the graphic and text to be revealed, identified by an ID and initially hidden using display:none.

<section id=“junior” style=“display:none”>

<img src="juniorChoir.jpg”>

<p> <b> Junior Choir </b> <br>

The junior meet every Monday...</p>

</section>

Each of the three JavaScript functions called by the onclick event reveals one of the three <section> elements and hides the other two using three style.display actions.

This is the code to display the Junior Choir section but keep the Senior Choir and Orchestra sections hidden:

<script>

function displayJC()

{document.getElementById("junior").style.display="block";

document.getElementById("senior").style.display="none";

document.getElementById("orch").style.display="none";}

</script>