CERTIFICATE

DEPARTMENT OF COMPUTER TECHNOLOGY.

Sanjivani K.B.P Polytechnic, Kopargaon.

This is to Certify that project entitled:

“Develop a Javascript to implement ImageRollover”
Submitted by:
Chavan Khushi Jitendra. (2200340449)

Is a bona-fide work carried out by above students under supervision

of Prof.S.A.Patil sir and it is submitted towards the partial fulfilment
of the requirements of MSBTE,Mumbai for the awards of Diploma
in Computer.

Prof.G.N.Jorvekar Prof.G.N.Jorvekar
(Guide) (H.O.D)

1
 A
PROJECT REPORT
ON
“Develop a Javascript to implement ImageRollover”
SUBMITTED BY:
Chavan Khushi Jitendra (2200340449)
Under the guidance of Mr.G.N.Jorvekar

DEPARTMENT OF COMPUTER TECHNOLOGY

Sanjivani Rural education Society’s

SANJIVANI K.B.P. POLYTECHNIC

KOPARGAON – 423601,DIST :AHMEDNAGER
2024-2025

ACKNOWLEDGEMENT

2
 First and the foremost we, express our deep sense of gratitude, sincere thanks and deep sense of
appreciation to Project Guide Mr.G.N.Jorvekar, Department of Computer Technology, Sanjivani K.B.P.
Polytechnic, Kopargaon. Your availability at any time throughout the year, valuable guidance, opinion,
view, comments, critics, encouragement, and support tremendously boosted this project work.
Lots of thanks to Head, Computer Technology Department, Mr.G.N.JORVEKAR for providing us
the best support we ever had.
We like to express our sincere gratitude to Mr. A.R. MIRIKAR, Principal, Sanjivani
K.B.P.Polytechnic, Kopargaon for providing a great platform to complete the project within the
scheduled time. We are also Thankful to all the faculty members, Computer Technology Department,
Sanjivani K.B.P. Polytechnic, Kopargaon for giving comments for improvement of work,
encouragement and help during completion of the Project. Last but not the least; We should say thanks
from my bottom of heart to our Family & Friends for their never-ending love, help, and support in so
many ways through all this time.

Yours Thankful,
Miss.Chavan Khushi Jitendra (2200340449)

Introduction
• Aim/Benefit of project

The project aims to enhance the user experience of a web page by implementing a
JavaScript mouseover effect for images within an HTML table. This interactive feature
will enable users to hover their mouse cursor over images in the table, triggering visual
changes or other effects, providing an engaging and dynamic user interface. JavaScript
will be employed to create this mouseover effect, adding interactivity and improving the
overall usability of the web page.
If you need assistance with the code or have any specific questions about the
implementation, please feel free to ask!

Course Outcomes Addressed

Create interactive web pages using program flow control structure.

1. Implement Arrays and functions in Java script.
2. Create event based web forms using Java Script.
3. Implement Image-rollover effect.

3
• Resource Requirements

1. Development Environment:
- A code editor (e.g., Visual Studio Code, Sublime Text, or any of your preference). -A
web browser for testing (e.g., Chrome, Firefox, or Safari).

2. Technologies and Libraries:

- HTML: To create the structure of the table and embed the images.
- CSS: For styling the table, images, and the mouseover effects.
- JavaScript: To implement the mouseover effect and interactivity.
- Any necessary JavaScript libraries, if you choose to use them (e.g., jQuery).

3. Images:
- Images that you want to display in the table and apply the mouseover effect to.

• Rationale
This enhancement serves to elevate the user experience by adding interactive
elements that capture and retain visitors' attention. Visual appeal is significantly
improved as users hover over images to witness dynamic changes such as color shifts,
enlargements, or overlay effects. These transformations not only enhance aesthetics but
also serve a functional purpose by highlighting specific details or providing
supplementary information. Furthermore, interactivity is a key driver, enabling users to
engage with the content, leading to longer page views and heightened satisfaction. In the
context of modern web design, such interactive elements have become a standard,
making the incorporation of mouseover effects an essential aspect of staying competitive
and meeting user expectations.
Ultimately, in business contexts, an engaging website with mouseover effects can
confer a competitive advantage by retaining visitors and influencing their decisions,
whether the website's purpose is e-commerce, blogging, or other online endeavors.

Program Code
4
<html>
<head>
<script> var
str; function
info(x)
{ if(x==document.getElementById("i1"))
{ str = '<h2 style ="color:red;">TOM & JERRY</h2><br><p
style="color:blue;fontsize:30px;"><b>Tom and Jerry is an American animated media
franchise and series of comedy short films ceated in 1940 by William Hanna and
Joseph Barbera.Best known for its 161 theatrical short films by Metro-
GoldwynMayer, the series centers on the rivalry between the titular characters of a
cat named Tom and a mouse named Jerry,Tom and Jerry: The Movie premiered in
1992 in Europe and appeared on American screens the following year. In 2006
Warner Bros. debuted a new television series, Tom and Jerry Tales, which was
closely modeled after the original theatrical shorts. Tom and Jerry (2021), a mix of
live action and animation, was a surprise box office hit, grossing more than $100
million worldwide.</p></b>'; document.getElementById("d").innerHTML = str;
} else if
(x==document.getElementById("i2"))
{ str = '<h2 style ="color:red;">MR BEAN</h2><br><p
style="color:green;fontsize:30px;"><b>Mr. Bean is a British sitcom created by
Rowan Atkinson and Richard Curtis, produced by Tiger Aspect and starring Atkinson
as the title character. The sitcom consists of 15 episodes that were co-written by
Atkinson alongside Curtis and Robin Driscoll; for the pilot, it was cowritten by Ben
Elton. The series was originally broadcast on ITV, beginning with the pilot on 1
January 1990[1] and ending with "The Best Bits of Mr. Bean" on 15 December
1995.</p></b>'; document.getElementById("d").innerHTML = str;
} else if
(x==document.getElementById("i3"))
{ str = '<h2 style ="color:red;">SHINCHAN</h2><br><p
style="color:green;fontsize:30px;"><b>Shinchan is a japanese created by Rowan
Atkinson and Richard Curtis, produced by Tiger Aspect and starring Atkinson as the
title character. The sitcom consists of 15 episodes that were co-written by Atkinson
alongside Curtis and Robin Driscoll; for the pilot, it was cowritten by Ben Elton. The

5
series was originally broadcast on ITV, beginning with the pilot on 1 January 1990[1]
and ending with
"The Best Bits of Mr. Bean" on 15 December 1995.</p></b>';
document.getElementById("d").innerHTML = str;
} else if
(x==document.getElementById("i4"))
{ str = '<h2 style ="color:red;">POKEMON</h2><br><p
style="color:green;fontsize:30px;"><b>Pikachu, a yellow mouselike creature, is the
undisputed face of Pokémon and helped the series become a worldwide
phenomenon. Pokémon inspired a cartoon series, movies, books, a toy line, sequels,
spinoffs, a clothing line, and a popular trading-card game. In spite of a friendly
interface and little violence, Pokémon has not been without controversy, however. In
1999 the parents of two nineyear-old boys sued Nintendo, stating that the Pokémon
card game had caused the children to develop gambling problems and likening the
trading-card craze to an illegal lottery.</p></b>';
document.getElementById("d").innerHTML = str;
} else if
(x==document.getElementById("i5"))
{ str = '<h2 style ="color:red;">POPEYE</h2><br><p
style="color:green;fontsize:30px;"><b>Popeye is an American animated media
franchise and series of comedy short films created in 1940 by William Hanna and
Joseph Barbera.Best known for its 161 theatrical short films by Metro-
GoldwynMayer, the series centers on the rivalry between the titular characters of a
cat named Tom and a mouse named
Jerry,Tom and Jerry: The Movie premiered in 1992 in Europe and appeared on
American screens the following year. In 2006 Warner Bros. debuted a new television
series, Tom and Jerry Tales, which was closely modeled after the original theatrical
shorts. Tom and Jerry (2021), a mix of live action and animation, was a surprise box
office hit, grossing more than $100 million worldwide.</p></b>';
document.getElementById("d").innerHTML = str;
} else if
(x==document.getElementById("i6"))
{

6
str = '<h2 style ="color:purple;">CHHOTA BHEEM</h2><br><p
style="color:green;fontsize:30px;"><b>Chhota Bheem is an Indian animated comedy
adventure television series. The series is created by Rajiv Chilaka. Premiered in 2008
on Pogo TV, it focuses on adventures of a boy named Bheem and his friends in the
fictional kingdom of Dholakpur. In this series, Bheem and his friends are usually
involved in protecting Raja Indravarma, the king of Dholakpur and his kingdom from
various evil forces.</p></b>'; document.getElementById("d").innerHTML = str;
} else if
(x==document.getElementById("i7"))
{ str = '<h2 style ="color:purple;">BEYBLADE</h2><br><p
style="color:green;fontsize:30px;"><b>Beyblade, known in Japan as Explosive
Shoot Beyblade (Japanese:
爆転シュートベイブレード, Hepburn: Bakuten Shūto Beiburēdo), is a Japanese
manga series written and illustrated by Takao Aoki [ja] to promote sales of spinning
tops called "Beyblades" developed by Takara Tomy. The series focuses on a group of
kids who form teams, which battle one another using Beyblades.</p></b>';
document.getElementById("d").innerHTML = str;
} else if
(x==document.getElementById("i8"))
{ str = '<h2 style ="color:purple;">POWERPUFF GIRLS</h2><br><p
style="color:green;font-size:30px;"><b> Powerpuff girls is an American animated
media franchise and series of comedy short films created in 1940 by William Hanna
and Joseph Barbera.Best known for its 161 theatrical short films by Metro-
GoldwynMayer, the series centers on the rivalry between the titular characters of a
girls,The Movie premiered in 1992 in Europe and appeared on American screens
the following year. In 2006 Warner Bros. debuted a new television series, Tom and
Jerry Tales, which was closely modeled after the original theatrical shorts, a mix of
live action and animation, was a surprise box office hit, grossing more than $100
million worldwide.</p></b>'; document.getElementById("d").innerHTML = str;
} else if
(x==document.getElementById("i9"))
{ str = '<h2 style ="color:purple;">NINJA HATTORI</h2><br><p
style="color:green;fontsize:30px;"><b>Ninja Hattori is a Japanese manga series
written and illustrated by duo Fujiko Fujio (and later by Fujiko A. Fujio) which was

7
serialized between 1964 and 1988. It was later adapted into a television drama that
aired on TV Asahi from 1966 – 1968; an anime series by Shin-Ei Animation, airing
on Asahi from 1981– 1987; a video game by Hudson Soft; two anime films by
ShinEi and a live-action film.</p></b>';
document.getElementById("d").innerHTML = str;
} else if
(x==document.getElementById("i10"))
{
str = '<h2 style ="color:purple;">TIMON & PUMBAA</h2><br><p
style="color:green;fontsize:30px;"><b>The show stars Timon and Pumbaa, both
characters from the film, The Lion King. Taking place after the events of the film, the
characters are normally seen having misadventures in the jungle and across the globe
in various settings,The show notably has several different voice actors from the
films. Nathan Lane and Ernie Sabella reprised their roles as the titular characters,
respectively.</p></b>'; document.getElementById("d").innerHTML = str;
} else if
(x==document.getElementById("i11"))
{
str = '<h2 style ="color:purple;">TWEETY</h2><br><p
style="color:green;fontsize:30px;"><b>Tweety is a yellow canary in the Warner Bros
Tweety, also known as Tweety Pie or Tweety Bird, is a yellow canary in the Looney
Tunes and Merrie Melodies series. Tweety appeared in 46 cartoons in the Looney
Tunes Golden Age.
Tweety always was male.</p></b>'; document.getElementById("d").innerHTML
= str;
} else if
(x==document.getElementById("i12"))
{ str = '<h2 style ="color:purple;">SCOOBYDOO</h2><br><p
style="color:green;fontsize:30px;"><b>Scooby-doo The sitcom consists of 15
episodes that were co-written by Atkinson alongside Curtis and Robin Driscoll; for
the pilot, it was co-written by Ben Elton. The series was originally broadcast on ITV,
beginning with the pilot on 1 January 1990[1] and ending with "The Best Bits of Mr.
Bean" on 15 December 1995.</p></b>'; document.getElementById("d").innerHTML
= str;

8
} else{str="<b>Sorry<b>";document.getElementById("d").innerHTML =
str;} }

</script>
</head>

<body bgcolor = "yellow">

<center>
<h1 style = 'font-style:oblique;'><i>CARTOON
SHOWS</i></h1>
<table id = "tb" onmouseout='d.innerHTML = "<h2>Put cursor on image to view
information</h2>"'>

<tr>
<td>
<img src ="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\tom.jpg" width="100"
height="100" id="i1" border="7" onmouseover="info(this)">
</td>

<td>
<img src ="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\bean.jpg" width = "100"
height = "100" id="i2" border = "7" onmouseover="info(this)">
</td>

<td>
<img src ="C:\Users\Daund

9
Rajeshwari\OneDrive\Pictures\CSS_project_Download\Shinchan.jpg" width = "100"
height = "100" id="i3" border = "7" onmouseover="info(this)">
</td>

<td>
<img src ="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\Pokeman.png" width =
"100" height = "100" id="i4" border = "7" onmouseover="info(this)">
</td>
</tr>

<tr>
<td>
<img src="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\Popeye.jpg" width="100"
height = "100" id="i5" border = "7" onmouseover="info(this)">
</td>

<td>
<img src ="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\Bheem.jpg" width="100"
height = "100" id ="i6" border = "7" onmouseover="info(this)">
</td>

<td>
<img src ="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\BeyBlade.webp"
width="100" height = "100" id="i7" border = "7" onmouseover="info(this)"> </td>

10
<td>
<img src ="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\powerpuff.png" width="100"
height = "100" id="i8" border = "7" onmouseover="info(this)">
</td>
</tr>

<tr>
<td>
<img src ="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\ninja.jpg" width = "100"
height = "100" id="i9" border = "7" onmouseover = "info(this)">
</td>

<td>
<img src ="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\timon&pumba.jpg" width =
"100" height = "100" id="i10" border = "7" onmouseover = "info(this)"> </td>

<td>
<img src ="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\Tweenty.png" width = "100"
height = "100" id ="i11" border = "7" onmouseover = "info(this)">
</td>

<td>
<img src ="C:\Users\Daund
Rajeshwari\OneDrive\Pictures\CSS_project_Download\scubydo.jpg" width = "100"
height = "100" id="i12" border = "7" onmouseover = "info(this)">

11
</td>
</tr>
</table>

<div id = "d"></div>
</body>
</html>

Output

12
13
 Conclusion

Implementing a JavaScript mouseover effect for images within a website's table offers a multitude
of advantages. It significantly enhances the user experience by capturing and retaining visitors'
attention, thereby encouraging deeper engagement with the content. This not only prolongs user
interaction but also adds a sense of exploration and interactivity to the website, crucial in an era
characterized by fleeting attention spans. Moreover, the visual transformation brought about by
these mouseover effects is a key attraction. Images that change color, enlarge, or provide
additional information upon hover infuse the website with a contemporary and aesthetically
pleasing look. Whether used to highlight product features in e-commerce, showcase project
details in portfolios, or deliver informative tooltips in education, these visual enhancements not
only elevate aesthetics but also effectively convey vital information. Furthermore, by aligning
with modern web design trends, the incorporation of these effects demonstrates a commitment to
staying current and meeting user expectations. It serves as evidence of the website owner's
dedication to providing a state-of-the-art interface, making this feature a valuable asset for both
user satisfaction and professional web development portfolios.

Reference

1.www.google.com www.W3schools.com

2.www.Geeksforgeeks.com

3.CSS Book Techknowledge

4.Publication

14