Scribd
Upload
7 views

CSS Pract-13

The document provides code examples to create rollover effects using JavaScript for images and text. It includes code to change an image source on mouseover and mouseout events, and code to change text color on similar events.

Uploaded by

Komal Rathod
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
7 views

CSS Pract-13

The document provides code examples to create rollover effects using JavaScript for images and text. It includes code to change an image source on mouseover and mouseout events, and code to change text color on similar events.

Uploaded by

Komal Rathod
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 6

Practical No.13: Create a webpage with Rollover effect.

Code-1: JavaScript to create rollover effect for image.

<!doctype html>

<html>

<head>

<title>How to Make a JavaScript Image Rollover</title>

<script language="javascript">

function MouseRollover(MyImage) {

MyImage.src = "image1.jpg";

function MouseOut(MyImage) {

MyImage.src = "image2.jpg";

</script>

</head>

<body>

<div align="center">

<img src="image1.jpg" boarder="0px" width="400px" height="400px"

onMouseOver="MouseRollover(this)" onMouseOut="MouseOut(this)" />

</div>

</body>

</html>
OUTPUT:
2)JavaScript to Create rollover effect for text

<HTML>

<head>

<title> Rollover Text </title>

</head>

<Body>

<table>

<tr>

<td>

<a>

<IMG src="Java.jpg" name= "lang">

</a>

</td>

<td>

<a

onmouseover="document.lang.src='Java.jpg'">

<b> <u> JAVA Programming </u> </b>

</a>

<br/><br/><br/><br/>

<a

onmouseover="document.lang.src='C++.jpg'">

<b> <u> C++ Programming </u> </b>

</a>

<br/><br/><br/><br/>

<br/><br/><br/><br/>

<a onmouseover="document.lang.src='C.jpg' ">

<b> <u> C Programming </u> </b>


</a>

</td>

</tr>

</table>

</body>

</html>

OUTPUT:
3)JavaScript to create rollover effect for text.

<HTML>

<Body>

<Textarea rows="2" cols="100" onmouseover="this.style.color='red'"


onmouseout="this.style.color='blue'">Move the mouse over this text to change its color to
red. Move the mouse away to change the text color to blue.</textarea>

</body>

</html>

OUTPUT:

You might also like