Scribd
Upload
29 views

CSS Pract-13 Merged

Uploaded by

rathodharshalr1905
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
29 views

CSS Pract-13 Merged

Uploaded by

rathodharshalr1905
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/ 10

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:
Practical.No.14. Develop a webpage for implementing Menus

Code-1: Develop a JavaScript program to create simple Pulldown menu

<html>

<head>

<title>Pulldown Menu Example</title>

<script>

function displayPage(ch)

page = ch.options[ch.selectedIndex].value

if(page != "")

window.location = page

</script>

</head>

<body>

<form name='form1' action="#">

Select your favourite website:

<select name="mymenu" onchange="displayPage(this)">

<option value="https://www.google.com">Google</option>

<option value="https://www.yahoo.com">Yahoo</option>

<option value="https://www.msbte.org.in">MSBTE</option>

</select>

</form>
</body>

</html>

Output:

Code-2: Develop a JavaScript program to create Context Menu

<html>

<head>

<title>Context Menu Example</title>

<style>

.menu {

width: 150px;

border-style: solid;

border-width: 1px;

border-color: grey;

position: fixed;

display: none;

.menu-item {

height: 20px;

.menu-item:hover {

background-color: #6CB5FF;
cursor: pointer;

</style>

<script>

var menuDisplayed = false

var menuBox = null

window.addEventListener("contextmenu", showMenu, false)

window.addEventListener("click", hideMenu, false)

function showMenu()

var left = arguments[0].clientX

var top = arguments[0].clientY

menuBox = window.document.querySelector('.menu')

menuBox.style.left = left + 'px'

menuBox.style.top = top + 'px'

menuBox.style.display = 'block'

arguments[0].preventDefault()

menuDisplayed = true

function hideMenu()

if(menuDisplayed == true) {

menuBox.style.display = 'none'

}
}

</script>

</head>

<body>

</h2>Right click mouse to view Context Menu</h2>

<div class="menu">

<div class="menu-item">Google</div>

<div class="menu-item">Facebook</div>

<hr>

<div class="menu-item">MSN</div>

<div class="menu-item">Bing</div>

</div>

</body>

</html>

Output:

You might also like