[go: up one dir, main page]
Scribd
Upload
59 views3 pages

Practical No

Uploaded by

gaytrifarde
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
59 views3 pages

Practical No

Uploaded by

gaytrifarde
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Practical.No.13. Create web page with Rollovers effect.

Objective : To create web page with Rollovers effect.


Resource Used
- Computer with a text editor (e.g., Notepad, Visual Studio Code)

- Web browser (e.g., Chrome, Firefox)

Theory

Rollover means a webpage changes when the user moves his or her mouse
over an object on the page. It is often used in advertising. There are two ways
to create rollover, using plain HTML or using a mixture of JavaScript and
HTML. We will demonstrate the creation of rollovers using both methods.

Change the style of the image on mouse rollover


In this method, to create the image rollover, we will use the onmouseover and
onmouseout event of JavaScript. When users take the mouse pointer on the image, it
will change the style of the image, and when the user takes out the mouse pointer
from the image, the default style will be applied to the image.

Syntax
Users can follow the below syntax to change styles of image on rollover.

Using JavaScript onmouseover and onmouseout events

object.onmouseover = function(){myScript};
object.onmouseout = function(){myScript};

Using the addEventListener() method

object.addEventListener("mouseover", myScript);
object.addEventListener("mouseout", myScript);

Algorithm
Step1 − Access the image element by id.

let deomImage = document.getElementById("demo");


Step 2 − Assign onmouseover event to image element deomImage.

deomImage.onmouseover = function() {
document.demo.style = "height:200px;width:200px";
});
Step 3 − Assign onmouseout event to image element deomImage.

deomImage.onmouseout = function() {
document.demo.style = "height:100px;width:100px;"
});
Events
onmouseover − It is an event that will be called whenever a user will rollover on the
image element.

onmouseout − This event will be triggered when the user will mouse pointer outside
the image.

Example
Using JavaScript onmouseover and onmouseout events

In the below example, we have created the image element and given the default
width and height to the image. We have added the “onmouseover” event to the
image element to apply a different style when the user rollover to the image.
Furthermore, when the user moves the cursor pointer outside the image element, we
have applied the “onmouseout” event to apply the default style.

Program :

Example

Using JavaScript onmouseover and onmouseout events

<!DOCTYPE html>
<html>
<body>
<h2> Image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the styles of the image. </h4>
<img src="durga.jpg" style="height:100px;width:100px;" id="demo"
name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.onmouseover = function() {deomImage.style = "height:200px;
width:200px";};
deomImage.onmouseout = function() {deomImage.style = "height:100px;
width:100px";};
</script>
</body>
</html>
Example

Using the addEventListener() method

<html>
<head>
<title> Show image rollover with mouse event. </title>
</head>
<body>
<h2> Showing image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the styles of the image. </h4>
<img src="durga.jpg" style="height:100px;width:100px;"
id="demo" name="demo" alt="demo Image">
<script>
let deomImage = document.getElementById("demo");
deomImage.addEventListener( "mouseover", function () {
document.demo.style = "height:200px; width:200px";
});
deomImage.addEventListener( "mouseout", function () {
document.demo.style = "height:100px; width:100px;"
})
</script>
</body>
</html>

Output :

Conclusion :

Marks Obtained Dated Signed of


teacher
Process Product Total(50)
Related(35) Related(15)

You might also like