Embedded Files
Course Content
Course Content
Describe, exemplify and implement coding of JavaScript functions related to mouse events:
onmouseover
onmouseout
onclick
Changing the size of a graphic - Inline JavaScript
Changing the size of a graphic - Inline JavaScript
Inline JavaScript can be used to increase and decrease the size of a graphic, as a mouse pointer passes over and out of a graphic.
<img src="../images/hockey.jpg"
onmouseover="this.style.width='150px';this.style.height='150px'"
onmouseout="this.style.width='100px';this.style.height='100px'"
>
It is inline JavaScript as it is embedded inside the HTML code as opposed to in a <script> tag.
There are two events used onmouseover and onmouseout.
In the code above this. meaning the element in which the JavaScript is contained. So in this case it refers to the graphic (img) element.
Changing the size of an image - JavaScript Functions
Changing the size of an image - JavaScript Functions
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
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
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
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
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.
<p onmouseover="this.style.color='darkRed'">
<img class="imageIconLeft" src="../images/newsIcon.png" > Wednesday 12th June.<br> The Computing … … Room B9. </p>
Changing an element using an ID
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
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
Before and After
Hiding and revealing multiple elements
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
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
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.
Page updated
Report abuse