How to Make a JavaScript Image Rollover

Steps

Prepare two images for the rollover effect. Select two different images to make a rollover image and save them in the same folder where you will save your HTML file displaying a rollover image.
Open any text editor of your choice. Dreamweaver will be used as the text editor in this article. Otherwise, if your text editor is blank when you open it, you need to enter HTML elements to build a web page.
Locate the section. JavaScript code will be inserted within the tag. Two JavaScript functions will be created to change the images. The two functions are named MouseRollover and MouseOut in the code below. The image's src property will be used to change the image's source when those two functions are called.

How to Make a JavaScript Image Rollover Picture 4

Copy the following JavaScript code:

<script language="javascript"> function MouseRollover(MyImage) { MyImage.src = "MyPicture2.jpg"; } function MouseOut(MyImage) { MyImage.src = "MyPicture1.jpg"; } </script>

Paste the JavaScript code in between the section onto your text editor. The MyPicture2.jpg in the function MouseRollover should be replaced by your rollover image's name and the MyPicture1.jpg in the function called MouseOut should be replaced by your original image's name.
Locate the section. The image tag will be applied to display the rollover image. In this example, the Alt='Title' that refers to the image title's name is omitted.

How to Make a JavaScript Image Rollover Picture 7

Copy the following code:

<div align="center">  <img src="MyPicture1.jpg" border="0px" width="650px" height="550px" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)" /> div>

Paste the code in between the section. The onmouseover property is added inside the image tag above and will be assigned to call the JavaScript function Image Rollover to change your original image to a new rollover image. Replace MyPicture1.jpg with your original image's name. Moreover, another property called onMouseOut is added in order to change the image back into its original one when you move your mouse away from the rollover image.

How to Make a JavaScript Image Rollover Picture 9

Review the entire code. Your code should look similar to the code below. You can play around with the code from this example and see how things change.

 <html> <head> <meta charset="utf-8"> <title>How to Make a JavaScript Image Rollovertitle>  <script language="javascript"> function MouseRollover(MyImage) { MyImage.src = "MyPicture2.jpg"; } function MouseOut(MyImage) { MyImage.src = "MyPicture1.jpg"; } script> head> <body> <div align="center">  <img src="MyPicture1.jpg" boarder="0px" width="650px" height="550px" onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)" /> div> body> html>

Click 'File' and select 'Save.'
Enter a name to save your HTML document. 'index.html' is used to test the file. Select 'Save as type' to HTML documents.
Click the 'Save' button.
Preview the finished web page in a browser. Click 'File' and then go to 'Preview in Browser.' Click 'Firefox' or any Web browser being installed in your text editor.

image code

Kareem Winters

Update 05 March 2020

You should read it

May be interested

! = and! == What is the difference in JavaScript?
javascript includes operators like in other languages. an operator performs some operations on one or more operands (data values) and produces a result. today's article will help readers learn about 2! = and! == operators in javascript.
Learn about ES6 in Javascript
es6 refers to version 6 of the ecma script programming language. ecma script is the standard name for javascript and version 6 is the next version after version 5, released in 2011.
How to Enable Cookies and JavaScript
this article shows you how to enable cookies and javascript in your web browser. cookies are pieces of data from visited websites that browsers store to make re-visiting and using those websites quicker and more personal. javascript is a computer language that allows browsers to load and display some eye-catching things on web pages. remember that if left on by default, javascript is usually enabled on most browsers.
JavaScript location in HTML File
there is flexibility in providing javascript code anywhere in an html document. however, the most preferred ways to include javascript in an html file.
How to Turn on JavaScript
javascript is a language used in many websites to provide additional functionality and access to the user. developers use javascript to deliver a large part of their site's functionality to you, the user. your browser must have javascript...
What is the difference between Java and JavaScript?
although the names of java and javascript seem to be related (javascript seems to be a script in java?), but that's the only similarity. these two languages are not technically related to each other.
Void keywords in JavaScript
void is an important keyword in javascript that can be used as a unary operator before its single operand, which can be in any type. this operator defines an expression to be evaluated without returning a value.
JavaScript code to generate error charts & graphs
the example below illustrates a sample variance chart created with javascript that incorporates a column chart. you will also get the source code for reference and editing as you wish.
How to Make a Basic JavaScript Quiz
making a game with javascript can be fun and satisfying as well as a bit of a puzzle. the code in the this article is one way of making a game using javascript. once you know the basics, feel free to adapt and play around with it. set up...
Introduction to 2D Array - 2-dimensional array in JavaScript
in the following article, we will introduce and show you some basic operations to create and access 2-dimensional arrays - 2d array in javascript. essentially, a 2-dimensional array is a concept of a matrix of matrices - a matrix, used to store information. each 1 element contains 2 separate indexes: row (y) - column and column (x) - column.