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:
