JavaScript Mouse Events (SQA National 5 Computing Science): Revision Note
Exam code: X816 75
JavaScript mouse events
What are mouse events?
Mouse events allow a webpage to react when the user moves the cursor over or away from an element
These events are used in JavaScript to create interactivity on a webpage
The two required events to know are:
onmouseoveronmouseout
onmouseover event
onmouseoverruns when the cursor moves over an elementIt is used to trigger a change such as:
Swapping an image
Showing text
Highlighting an object
It creates interactivity because the webpage responds instantly to user movement
onmouseout event
onmouseoutruns when the cursor moves away from an elementIt is used to reverse or change an effect such as restoring an image or hiding text
It ensures the webpage returns to its original state when the cursor leaves the area
Typical scenarios
Scenario | Event used | What happens | Why it is interactive |
|---|---|---|---|
Logo changes when hovered |
| The image swaps when the cursor moves over it and returns when the cursor leaves | The user sees an instant visual change based on their movement |
Theme park ride reveals an opening date |
| Text appears when the cursor moves over the image | New information is displayed only when the user interacts |
Product image highlights on hover |
| The image becomes brighter or larger when hovered | The element visually responds to the user’s action |
Menu option shows a submenu |
| A submenu appears when the user moves over a navigation item | Navigation expands only when the user interacts |
Image changes to an alternative picture |
| The picture switches to a second image then returns to the first | The element reacts to movement and resets when left |
Text enlarges when hovered |
| Font size increases on hover and returns to normal when the cursor leaves | The user directly causes the change through cursor movement |
Button changes colour when hovered |
| The background colour changes on hover and resets afterwards | The button provides visual feedback to the user |
Example
<img src="fox1.png"
onmouseover="this.src='fox2.png'"
onmouseout="this.src='fox1.png'">
onmouseoverswaps the image when the cursor moves over itonmouseoutrestores the original image when the cursor leaves
Worked Example
The "Future Technologies" webpage includes a gallery of conceptual products. When the user hovers their mouse cursor directly over the image of a conceptual product, the image temporarily changes to a short video demonstration. When the cursor moves off the image, the display reverts back to the static image. This feature is implemented using mouse events to add interactivity to the page.
(i) Identify the specific JavaScript mouse event required to trigger the demonstration video when the cursor first moves onto the image
[1]
(ii) State the primary scripting language used to implement mouse event interactivity (onmouseover/onmouseout) on a webpage
[1]
Answers
(i)
onmouseover[1 mark](ii) JavaScript [1 mark]
Unlock more, it's free!
Did this page help you?
