Unit III: Creating Rollovers and More Hours
Q1. Creating a basic image rollover.
Rollovers are changing one thing to another thing when the
cursor hovers over it.
If you use an image for a link, for example, you can
change/swap that image with another one when the mouse is
hovered over.
There are some methods for achieving this goal, including some
CSS3 effects.
An image rollover is basically two different images. One is
displayed after the page loaded up, the other one is displayed
only when the user moves his mouse over the first one.
Image rollovers are often used for a site’s interface.
Currently this is the most popular JavaScript function.
The following script shows how we can create Image Rollover:
<html><head>
<title>JavaScript Image Rollovers</title></head>
<body>
<a href="[Link]"
onMouseOver="[Link]='[Link]'"
onMouseOut="[Link]='[Link]'">
<img src="[Link]" name="image1">
</a>
</body>
Prepared by Prof. [Link] Unit 3 Page 1
</html>
Example 2.
<html>
<head>
<title>Image Rollover</title>
<script language="JavaScript">
function MouseRollover(MyImage) {
[Link] = "[Link]";
}
function MouseOut(MyImage) {
[Link] = "[Link]";
}
</script>
</head>
<body>
<div align="center">
<!--The rollover image displays here.-->
<img src="[Link]" boarder="0px" width="650px"
height="550px"
onMouseOver="MouseRollover(this)"
onMouseOut="MouseOut(this)" />
</div>
</body>
</html>
Q2 How to write a better rollover.
For creating a better rollover, we can apply the CSS style for the
image that is being rolled over. Means we can change the size of
image, border color, and many other styles. We can also
apply CSS for a paragraph, headings when mouse is on
Prepared by Prof. [Link] Unit 3 Page 2
paragraph, headings etc. Following example shows how to change
the size of the image and border when the mouse is rolled over it.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<center>
<h1>Better Image RollOver Demo</h1>
<hr>
<img src="[Link]" id="img1" height="200px"
width="200px" onmousemove="fun1(this)"
onmouseleave="fun2(this)">
</center>
<script>
function fun1(img1)
[Link]="border-color: blueviolet;border-width: 10px; border-
style: double; height: 300px;width: 300px;";
function fun2(img1)
Prepared by Prof. [Link] Unit 3 Page 3
[Link]="height: 200px;width: 200px;";
</script>
</body>
</html>
Q3. Creating a three-state rollover
A three-state rollover is an image that changes its appearance
when the user hovers over it, clicks it, and then leaves from it or
hovers over it again.
To create a three-state rollover in JavaScript, you will need to use
the onmouseover, onclick, and onmouseout events.
Here is an example of how to create a three-state rollover in
JavaScript:
var myImage = [Link]("myImage");
// Set the initial image source
[Link] = "images/[Link]";
// Handle the `onmouseover` event
[Link] = function() {
[Link] = "images/[Link]";
};
// Handle the `onclick` event
[Link] = function() {
[Link] = "images/[Link]";
};
Prepared by Prof. [Link] Unit 3 Page 4
// Handle the `onmouseout` event
[Link] = function()
{ [Link] = "images/[Link]";
};
In this example, the onmouseover event changes the image
source to images/[Link]. The onclick event changes the
image source to images/[Link]. The onmouseout event
changes the image source back to images/[Link].
You can use this same code to create three-state rollovers for any
images on your website.
Some additional tips for creating three-state rollovers in
JavaScript: Make sure the image used for the different states is
all the same size.
Use descriptive names for the variables that you use in your
JavaScript code. This will make your code easier to read and
understand.
Test rollovers in different browsers to make sure that they work
properly.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<center>
<h1>Three State RollOver Demo</h1>
<hr>
<img src="images/[Link]" id="img1" height="200px"
width="200px" onmouseover="fun1(this)"
onmouseleave="fun2(this)" onclick="fun3(this)">
</center>
Prepared by Prof. [Link] Unit 3 Page 5
<script>
function fun1(img1)
{
[Link]="images/[Link]";
}
function fun2(img1)
{
[Link]="images/[Link]";
}
function fun3(img1)
{
[Link]="images/[Link]";
}
</script>
</body>
</html>
Q4. Explain Making rollovers accessible and 508 compliant
To make rollovers accessible and 508 compliant in JavaScript, we
can follow these steps:
Use alt text for all images: This will allow screen readers to
describe the images to users who cannot see them.
Use the title attribute to provide descriptive text for links.:
This will also be read by screen readers.
Make sure all links and images are clickable with a
keyboard.: This can be done by using the href and
tabindex attributes.
Provide a text alternative for any content that is only
displayed on hover: This can be done by using the title
attribute or by creating a separate text version of the
content.
Example of this is displayed as below
Prepared by Prof. [Link] Unit 3 Page 6
By following these steps, you can make sure that your rollovers
are accessible to all users, regardless of their abilities.
Some additional tips for making rollovers accessible:
● Avoid using JavaScript to change the appearance of text.: This
can make it difficult for screen readers to read the text.
● Use CSS to style your rollovers.: This will make them more
accessible to screen readers and other assistive technologies.
● Test your rollovers with different browsers: This will help you
identify any accessibility issues.
By following these tips, we can make sure that your rollovers are
accessible to all users, including those with disabilities.
Q5. Explain making disjointed rollovers.
Disjointed rollovers are a type of JavaScript rollover effect where
multiple images change when the user hovers over a particular
area.
Prepared by Prof. [Link] Unit 3 Page 7
Disjointed rollovers can be created using a variety of techniques,
including using the onMouseOver and onMouseOut events, as
well as the swapImage() method.
To create a disjointed rollover, you would first need to create the
images that you want to use.
These images should be the same size and shape, and they
should be named in a way that is easy to identify.
To create disjointed rollovers in JavaScript, you will need to use
the onMouseOver and onMouseOut events. These events are
triggered when the user hovers the mouse over or out of an
element.
To create a disjointed rollover, you will need to create two
images. The first image will be the original image, and the
second image will be the rollover image. You will then need to
assign
the onMouseOver and onMouseOut events to the original
image.
When the user hovers over the original image, the onMouseOver
event will be triggered. The onMouseOver event will then replace
the original image with the rollover image.
When the user hovers out of the original image, the onMouseOut
event will be triggered. The onMouseOut event will then replace
the rollover image with the original image.
Here is an example of how to create a disjointed rollover in
JavaScript:
Prepared by Prof. [Link] Unit 3 Page 8
This is just a basic example of how to create a disjointed rollover
in JavaScript. You can use this same technique to create
disjointed rollovers for any element on your web page.
<html>
<head>
<title></title>
</head>
<body>
<center>
<img id="mainimg" src="[Link]" width="400" height="400"
/><br>
<p style="height: 140px; vertical-align:middle;align-
items:center" >
<img id="firstimg" src="[Link]" width="100" height="100"
onmouseover="change(this)" />
<img id="secondimg" src="[Link]" width="100" height="100"
onmouseover="change(this)" />
Prepared by Prof. [Link] Unit 3 Page 9
<img id="thirdimg" src="[Link]" width="100" height="100"
onmouseover="change(this)" />
<img id="forthimg" src="[Link]" width="100" height="100"
onmouseover="change(this)" />
</p>
<script>
var oldimg1 = null; function change(img1) {
[Link]("mainimg").src = [Link];
[Link] = "width:130px; height: 130px; border: dotted; ";
if (oldimg1 != null)
[Link] = "width:100px; height: 100px;";
oldimg1 = img1;
</script>
</center>
</body>
</html>
Prepared by Prof. [Link] Unit 3 Page 10
By adding the onMouseOver and onMouseOut events to your
images, you can create a disjointed rollover effect. This effect can
be used to add a touch of interactivity to your website or web
application
Q6. Explain Creating slideshows with example.
In JavaScript, a slideshow is a sequence of images or text that
is displayed in sequence in a certain time interval or can be
displayed when a user performs click action. It can be
created using HTML, CSS, and JavaScript.
To create a slideshow in JavaScript, you will need the
following:
1. An HTML document with a container for your slides.
2. CSS stylesheets to format your slides.
3. A JavaScript file with code to control the slideshow. Here are
the steps to create a slideshow in JavaScript:
1. Create an HTML document with a container for your slides.
Prepared by Prof. [Link] Unit 3 Page 11
The container can be any HTML element, such as img, div, ul, or
ol. Give the container a unique ID so that you can reference it
from JavaScript.
2. Add your slides to the container.
Each slide can be an HTML element, such as a div, p, or img.
Each slide should contain the content that you want to display in
that slide.
3. Add CSS stylesheets to format your slides.
CSS stylesheets can be used to control the appearance of your
slides, such as their size, color, and font.
4. Write JavaScript code to control the slideshow.
The JavaScript code will control how the slides are displayed and
changed. For example, you can use JavaScript to automatically
change slides after a certain amount of time, or you can use
JavaScript to allow the user to manually change slides.
To display the images or slides automatically javascript provides
setInterval function its syntax is
setInterval(function_name, time_interval_in_millisecond)
example
setInterval(start_function, 1000)
Here
start_function is an javaScript function which will be called after
each 1000 millisecond
means 1 second
Example:
<head>
<title>Page Title</title>
</head>
<body>
<center>
<h1>Slide Show Demo</h1>
<hr>
<img src="images/[Link]" id="img1" height="400px" width="400px">
</center>
<script>
Prepared by Prof. [Link] Unit 3 Page 12
var images=["images/[Link]","images/[Link]","images/[Link]","i
mages/[Link]"];
var imgindex=0;
function startfun()
{
[Link]("img1").src=images[imgindex++];
if(imgindex==5)
{
imgindex=0;
}
setInterval(startfun,1000);
}
startfun();
</script>
</body>
</html>
Output:
Prepared by Prof. [Link] Unit 3 Page 13
Q7. Explain how to display random images with example.
Random image means any one image from a group of images
like we pick lottery numbers at random.
The displaying random image is mostly used for displaying
advertisements. The different images created for displaying
advertisements should be displayed randomly. The images
you see on a website generated randomly, are already stored in a
database or an array. These images display to the user within a
regular time interval or change by a click.
For generating for displaying random images javascript
provides random function as below.
[Link]();
which gives the random number between 0 and 1 means 0.5, 0.7
etc.
to get random number between 1 and 10 we have to use the
following
[Link]() * 10 // it return the float value
or to display the integer value we can use the following
var n=parseInt([Link]() * 10);
using this function we can select the images which are stored in
array randomly and we can display it on the page.
<html>
<head>
<title>Page Title</title>
</head>
<body>
<center>
<h1>Display Ramdom Iamges</h1>
<hr>
<img src="images/[Link]" id="img1" height="400px" width="400px"
style="border-radius: 50%;">
<br>
<br>
<input type="button" value="Display Ramdom Image" onclick="display()">
</center>
<script>
var
images=["images/[Link]","images/[Link]","images/[Link]","images/i
[Link]"];
Prepared by Prof. [Link] Unit 3 Page 14
function display()
{
var imgindex=parseInt([Link]()*4);
[Link]("img1").src=images[imgindex];
}
</script>
</body>
</html>
Output:
Prepared by Prof. [Link] Unit 3 Page 15