Scribd
Upload
2 views

Css Exp 13 PDF Updated Tuesday

Uploaded by

ansari.abdullahsohel
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
2 views

Css Exp 13 PDF Updated Tuesday

Uploaded by

ansari.abdullahsohel
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

Name: Ansari Abdullah Sohel

Roll No: 220402


Subject: CSS
Practical No: 13
AIM: Create a webpage with Rollovers Effects.
1. Write a program to create following roll over effect in JavaScript Enlarge the
image on mouseover event Decrease the image.
Code:
<html>
<head>
<title>Experiment No.13</title>
</head>
<body>
<h2>Ansari Abdullah Sohel - 220402</h2>
<img src="bike.jpg" onmouseover="big()" onmouseout="small()" id="testImage" width="100px"
height="100px">
<p id="myData"></p>

<script>
function big() {
document.getElementById('testImage').style.height = "150px";
document.getElementById('testImage').style.width = "150px";
document.getElementById('myData').innerHTML = "On mouse over.";
}

function small() {
document.getElementById('testImage').style.height = "100px";
document.getElementById('testImage').style.width = "100px";
document.getElementById('myData').innerHTML = "On mouse out.";
}
</script>
</body>
</html>Output:

2. Write a program to create roll over effect on an HTML element.


Code:
<html>
<head>
<title>Experiment No.13</title>
</head>
<body>
<h3>Ansari Abdullah - 220402</h3>
<textarea rows="2" cols="70" name="rollovertext"
onmouseover="this.value='Hello'"
onmouseout="this.value='Hello Ansari Abdullah here'">
</textarea>
</body>
</html>
Output:
3. Write a program to create roll over effect on text.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Experiment No.13</title>
</head>
<body>
<h1 id="head1" onmouseover="mouseover()" onmouseout="mouseout()">
Ansari Abdullah !!
</h1>
<script>
function mouseover() { document.getElementById("head1").style.color = "red"; }
function mouseout() { document.getElementById("head1").style.color = "blue"; }
</script></body></html>

Output:
4. Write a program to create roll over effect on image.
Code:
<!DOCTYPE html>
<html>
<head>
<title>Experiment No.13</title>
<script>
function Overfunction() { document.form1.Img.src = "F3.jpg";}

function Outfunction() { document.form1.Img.src = "F1.jpg"; }


</script></head>
<body>
<h4>Ansari Abdullah - 220402</h4>
<form name="form1">
<center>
<img id="Img" name="Img" src="F2.jpg" onmouseover="Overfunction()"
onmouseout="Outfunction()" width="600" height="400"/>
</center>
</form></body></html>
Output:

You might also like