JavaScript

We are also able to use JavaScript Functions to alter the size of the graphic. This is generally preferred as it increased the readability of the code. The two functions are shown below:

This achieves the same as the earlier example but the JavaScript functions are called instead.

Why use this approach? - Modularity

As with programming this allows us to reuse these functions and call them multiple times (supplying different parameters).

So in the example shown to the right the functions have been re-used. This will cause the same resizing to occur from the 3 images where the code has been called.

Creating a rollover image - Inline JavaScript

Rollover images can be created using two JavaScript events.

The first event (onmouseover) displays an alternate graphic when the mouse passes over the image element.
- onmouseover="this.src='../images/basketball.jpg'"
The second event (onmouseout) displays the original graphic when the mouse pointer leaves the image.
- onmouseout="this.src='../images/karate.jpg'"

This can be implemented using the inline JavaScript shown below:

<img class="sportImage" src="../images/karate.jpg"

onmouseover="this.src='../images/basketball.jpg'"

onmouseout="this.src='../images/karate.jpg'"

The src=' ' changes the source attribute of the image element to the new image address.

before and after

Creating a rollover image - JavaScript Functions

A rollover image can also be achieved using two functions.

The first function is called using the onmouseover event.
The second is called using the onmouseout event.

Each function is passed the img element as a parameter using the term this. As before each function changes the src property of the image.

Highlighting Text

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 to alter the colour of the element.

<img class="imageIconLeft" src="../images/newsIcon.png" > Wednesday 12th June.<br> The Computing … … Room B9. </p>

Changing an element using an ID

To implement an action on a different page element, an id attribute is required to identify the element the action will be performed on.

An element is identified using document.getElementById('IDNAMEHERE ')

IDNAME here would be replaced by the ID of the element that you want to target.

The example below highlights the paragraph text when the mouse passes over the image contained in the paragraph:

<p id="highlight"><img class="imageIconLeft" src="../images/newsIcon.png"

onmouseover="document.getElementById('highlight').style.color='darkRed'">

Thursday 13th June.

<br> The guidance … … suits them. </p>

Revealing hidden elements

When a web page loads, elements can be initially hidden by applying the CSS declaration display:none

This can be implemented using an inline or internal style, or by implementing an external style (using a class, as shown below):

.hidden{display:none}

The graphic element in the example below (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 becomes visible on the page.

Before and After

Hiding and revealing multiple elements

Image elements, with associated onclick events, can be used to offer users a choice of what they view on a web page. Each onclick event is used to reveal a hidden <section> element containing a graphic and text relating to each option.

The image below is a screenshot of the web page when it loads:

When we click on the junior choir button the image and paragraph elements for the Junior choir are displayed.

When we click on the Senior choir button the image and paragraph elements for the Junior choir are displayed.

But any Orchestra or Senior Choir elements have to be hidden.

Hiding elements initially

Although display:none has been entered into the section tag as an inline style it could just as easily been put in a class. The sections would then be assigned both the class and an ID.

Using the OnClick events and Functions

Each onclick event for either the Choirs or Orchestra calls a function:

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.

Only once element is set to display block at any one time, the rest are set to not display.

Next - Testing and Evaluation