Fisheye Menu Effect in JavaScript

Introduction

In this article, we will be discussing the Fisheye menu effect in JavaScript. For this follow these steps:

Step 1: First we create a table and use five images in it like this:

<table cellpadding="5" cellspacing="5">
<tr>
<td><img id="img1" src="Tulips.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show1()" /></td>
<td> <img id="img2" src="Desert.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show2()" /></td>
<td><img id="img3" src="Hydrangeas.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show3()" /></td>
<td><img id="img4" src="Jellyfish.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show4()" /></td>
<td><img id="img5" src="Koala.jpg" height="100pt" width="100pt" style="border: 2px solid black;" onmouseover="Show5()" /></td>
</tr>
</table>

Output

Step 2: In the previous step we call the JavaScript functions, so now we will write the JavaScript functions like this:

<script language="javascript">
function Show2() {
document.getElementById('img2').style.width = '150pt';
document.getElementById('img2').style.height = '150pt';
document.getElementById('img3').style.width = '120pt';
document.getElementById('img3').style.height = '120pt';
document.getElementById('img4').style.width = '100pt';
document.getElementById('img4').style.height = '100pt';
document.getElementById('img1').style.width = '110pt';
document.getElementById('img1').style.height = '110pt';
document.getElementById('img5').style.width = '100pt';
document.getElementById('img5').style.height = '100pt';
}
function Show3() {
document.getElementById('img3').style.width = '150pt';
document.getElementById('img3').style.height = '150pt';
document.getElementById('img4').style.width = '110pt';
document.getElementById('img4').style.height = '110pt';
document.getElementById('img2').style.width = '110pt';
document.getElementById('img2').style.height = '110pt';
document.getElementById('img5').style.width = '100pt';
document.getElementById('img5').style.height = '100pt';
}
function Show1() {
document.getElementById('img1').style.width = '150pt';
document.getElementById('img1').style.height = '150pt';
document.getElementById('img2').style.width = '110pt';
document.getElementById('img2').style.height = '110pt';
document.getElementById('img4').style.width = '100pt';
document.getElementById('img4').style.height = '100pt';
document.getElementById('img3').style.width = '100pt';
document.getElementById('img3').style.height = '100pt';
document.getElementById('img5').style.width = '100pt';
document.getElementById('img5').style.height = '100pt';
}
function Show4() {
document.getElementById('img1').style.width = '100pt';
document.getElementById('img1').style.height = '100pt';
document.getElementById('img2').style.width = '100pt';
document.getElementById('img2').style.height = '100pt';
document.getElementById('img4').style.width = '150pt';
document.getElementById('img4').style.height = '150pt';
document.getElementById('img3').style.width = '110pt';
document.getElementById('img3').style.height = '110pt';
document.getElementById('img5').style.width = '110pt';
document.getElementById('img5').style.height = '110pt';
}
function Show5() {
document.getElementById('img1').style.width = '100pt';
document.getElementById('img1').style.height = '100pt';
document.getElementById('img2').style.width = '100pt';
document.getElementById('img2').style.height = '100pt';
document.getElementById('img4').style.width = '110pt';
document.getElementById('img4').style.height = '110pt';
document.getElementById('img3').style.width = '100pt';
document.getElementById('img3').style.height = '100pt';
document.getElementById('img5').style.width = '150pt';
document.getElementById('img5').style.height = '150pt';
}
</script>

Here we set the width and height property of the image control.

Output

Complete Program

<html>
<head>
<title>New Document </title>
<script language="javascript">
function Show2() {
document.getElementById('img2').style.width = '150pt';
document.getElementById('img2').style.height = '150pt';
document.getElementById('img3').style.width = '120pt';
document.getElementById('img3').style.height = '120pt';
document.getElementById('img4').style.width = '100pt';
document.getElementById('img4').style.height = '100pt';
document.getElementById('img1').style.width = '110pt';
document.getElementById('img1').style.height = '110pt';
document.getElementById('img5').style.width = '100pt';
document.getElementById('img5').style.height = '100pt';
}
function Show3() {
document.getElementById('img3').style.width = '150pt';
document.getElementById('img3').style.height = '150pt';
document.getElementById('img4').style.width = '110pt';
document.getElementById('img4').style.height = '110pt';
document.getElementById('img2').style.width = '110pt';
document.getElementById('img2').style.height = '110pt';
document.getElementById('img5').style.width = '100pt';
document.getElementById('img5').style.height = '100pt';
}
function Show1() {
document.getElementById('img1').style.width = '150pt';
document.getElementById('img1').style.height = '150pt';
document.getElementById('img2').style.width = '110pt';
document.getElementById('img2').style.height = '110pt';
document.getElementById('img4').style.width = '100pt';
document.getElementById('img4').style.height = '100pt';
document.getElementById('img3').style.width = '100pt';
document.getElementById('img3').style.height = '100pt';
document.getElementById('img5').style.width = '100pt';
document.getElementById('img5').style.height = '100pt';
}
function Show4() {
document.getElementById('img1').style.width = '100pt';
document.getElementById('img1').style.height = '100pt';
document.getElementById('img2').style.width = '100pt';
document.getElementById('img2').style.height = '100pt';
document.getElementById('img4').style.width = '150pt';
document.getElementById('img4').style.height = '150pt';
document.getElementById('img3').style.width = '110pt';
document.getElementById('img3').style.height = '110pt';
document.getElementById('img5').style.width = '110pt';
document.getElementById('img5').style.height = '110pt';
}
function Show5() {
document.getElementById('img1').style.width = '100pt';
document.getElementById('img1').style.height = '100pt';
document.getElementById('img2').style.width = '100pt';
document.getElementById('img2').style.height = '100pt';
document.getElementById('img4').style.width = '110pt';
document.getElementById('img4').style.height = '110pt';
document.getElementById('img3').style.width = '100pt';
document.getElementById('img3').style.height = '100pt';
document.getElementById('img5').style.width = '150pt';
document.getElementById('img5').style.height = '150pt';
}
</script>
</head>
<body>
<br />
<br />
<br />
<br />
<br />
<table cellpadding="5" cellspacing="5">
<tr>
<td>
<img id="img1" src="Tulips.jpg" height="100pt" width="100pt" style="border: 2px solid black;"
onmouseover="Show1()" />
</td>
<td>
<img id="img2" src="Desert.jpg" height="100pt" width="100pt" style="border: 2px solid black;"
onmouseover="Show2()" />
</td>
<td>
<img id="img3" src="Hydrangeas.jpg" height="100pt" width="100pt" style="border: 2px solid black;"
onmouseover="Show3()" />
</td>
<td>
<img id="img4" src="Jellyfish.jpg" height="100pt" width="100pt" style="border: 2px solid black;"
onmouseover="Show4()" />
</td>
<td>
<img id="img5" src="Koala.jpg" height="100pt" width="100pt" style="border: 2px solid black;"
onmouseover="Show5()" />
</td>
</tr>
</table>
</body>
</html>

Fisheye Menu Effect in JavaScript

Reactions

1 Comment

Introduction