How to Scroll Over on JavaScript

JavaScript scroll over creates an action on a Web page when users place a cursor over an object.

JavaScript is a programming language designed to create special visual effects on a website. These effects operate automatically or through a user's actions on the page. The scroll over function triggers a JavaScript effect when the cursor is moved over an HTML element. This function is also known as a mouseover or rollover effect and can perform actions such as changing an image from one to another or showing hidden items, such as a drop-down menu.

Instructions

1. Open the code editor of your choice and create a new HTML file. If you already have an existing HTML file you want a scroll over in, open that instead.

2. Create an <img> tag with a few attributes. For example: <img src="img.jpg" name="scroll" onmouseover="" onmouseout="" />.

3. Replace the "img.jpg" src attribute with the title and location of your image in relation to the HTML file you are working on.

4. Add to the "onmouseout" attribute, creating a JavaScript effect when the cursor moves away from the image. For example: <img src="img.jpg" name="scroll" onmouseover="" onmouseout="document.images['scroll'].src='img.jpg'" />.

5. Add to the "onmouseover" attribute, creating a JavaScript effect when the cursor moves over the image. For example: <img src="img.jpg" name="scroll" onmouseover="document.images['scroll'].src='img_two.jpg" onmouseout="document.images['scroll'].src='img.jpg'" />.

References

• W3Schools.com: Onmouseover Event