Scribd
Upload
154 views

Css Practical 13

This document summarizes an experiment on creating a webpage with rollover effects. The experiment demonstrates rollover effects on both images and text. For images, it uses the onmouseover event to change the image source, showing different images when the mouse moves over the initial image. For text, it uses onmouseover to change the image source when hovering over different text links, each linked to a different image. The experiment provides code samples to implement these rollover effects and displays the output showing the image changes on rollover.

Uploaded by

Shekhar Jadhav
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
154 views

Css Practical 13

This document summarizes an experiment on creating a webpage with rollover effects. The experiment demonstrates rollover effects on both images and text. For images, it uses the onmouseover event to change the image source, showing different images when the mouse moves over the initial image. For text, it uses onmouseover to change the image source when hovering over different text links, each linked to a different image. The experiment provides code samples to implement these rollover effects and displays the output showing the image changes on rollover.

Uploaded by

Shekhar Jadhav
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

COMPUTER ENGINEERING DEPARTMENT

Subject: Client Side Scripting Subject Code: 22519


Semester: 5th Course: Computer Engineering
Laboratory No: L001B Name of Subject Teacher:
Name of Student: Roll Id:

Experiment No: 13
Title of Experiment Create a webpage with Rollover effect

Theory: -

• Rollover occurs when content of web page changes as mouse cursor moves over and
away from an object on the page.

• Object can be image , text or any element of a form.

• Rollover caused by an event called onmouseover

Program: -

<html>

<body>

<img src="penguin.jpg"

width=“600" height=“400“

onmouseover="src='Koala.jpg'"/>

</body>

</html>

Output:-

Page | 1
Initially

After Moving Mouse over image

Rollback:

Rollback caused by an event called onmouseout

Text Rollovers:

<html>
<body>
<a><img src="penguin.jpg" width="500" height="400"

Page | 2
name="cover“ /></a><br>
<a onmouseover="document.cover.src='penguin.jpg'">
<h3>Penguin</h3></a>
<br>
<a onmouseover="document.cover.src='Koala.jpg'">
<h3>Koala</h3></a>
<br>
<a onmouseover="document.cover.src='Jellyfish.jpg'">
<h3>Jellyfish</h3></a>
<br>
</body>
</html>

Grade and C (35M) P (15M) Total ( 50 M) Dated Sign


Dated
Signature of
Teacher

Page | 3

You might also like