Scribd
Upload
45 views

Javascript Unit III

jsIII

Uploaded by

Akash Pawar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
45 views

Javascript Unit III

jsIII

Uploaded by

Akash Pawar
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 16

Unit III: Creating Rollovers and More

Creating a basic image rollover

 The meaning of the image rollover is to either change the image style or the whole image
when the user rollovers the mouse on the image.
 To build an attractive user interface, developers often add image rollover features to the
website and applications.
 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.

Change the style of the image on mouse rollover

 In this method, to create the image rollover, we will use


he onmouseover and onmouseout event of JavaScript.
 When users take the mouse pointer on the image, it will change the style of the image,
and when the user takes out the mouse pointer from the image, the default style will be
applied to the image.

Syntax:

Users can follow the below syntax to change styles of image on rollover Using the
addEventListener() method

object.addEventListener("mouseover", myScript);
object.addEventListener("mouseout", myScript);

Algorithm:

Step1 − Access the image element by id.

Step 2 − Assign addEventListener() Method with mouseover event to image element.

Step 3 − Assign addEventListener() Method with mouseout event to image element.

Example:

<html>
<head>
<title> Show image rollover with mouse event. </title>
</head>
<body>
<h2> Showing image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the styles of the image. </h4>
<img src="img1.jpg" style="height:100px;width:100px;" id="img1" name=" img1"
alt="demo Image">
<script>
let img1= document.getElementById("img1");
img1.addEventListener( "mouseover", function () { document. img1.style = "height:200px;
width:200px"; });
img1.addEventListener( "mouseout", function () { document. img1.style = "height:100px;
width:100px;" });
</script>
</body>
</html>
 In the above output, users can see that when they hover over the image, the dimensions of
the image increase, and when the user moves the mouse pointer outside the image, the
dimensions of the image decrease.

Change the image on mouse rollover

To change the image when users move the mouse pointer on the image, and it will set the
default image when the user moves the mouse pointer outside the image.

Algorithm:

Step 1 − Access the image by id.


Step 2 − Use addEventListener() method to attach a "mouseover" event to the image
element.
Step 3 − Use addEventListener() method to attach a "mouseout" event to the image element.

Example:

In the below example, we will change the value of the “src” attribute of the image to replace the
image on the mouse rollover.

<html>
<head>
<title> Show image rollover with mouse event . </title>
</head>
<body>
<h2> Show image rollover with mouse event. </h2>
<h4> Rollover on the below image to change the image. </h4>
<img src="img1.jpg" style="height:100px;width:100px;" id="img1" name=" img1"
alt="demo Image">
<script>
let img1= document.getElementById("img1");
img1.addEventListener( "mouseover", function () {document.img1.src = "smiley1.png";});
img1.addEventListener( "mouseout", function () { document.img1.src = "smiley2.jpg"; });
</script>
</body>
</html>
How to write a better rollover
Rollover means a webpage changes when the user moves his or her mouse over an object on the
page. It is often used in advertising. To make the illusion of animation work, you need to make
sure that the replacement image appears immediately, with no delay while it is fetched from the
server. To do that, you use JavaScript to place the images into variables used by your script,
which preloads all the images into the browser’s cache (so that they are already on the user’s
hard disk when they are needed). Then, when the user moves the mouse over an image, the
script swaps out one variable containing an image for a second variable containing the
replacement image.

Example:
<html>
<head>
<title>animation</title>
<style>
img{
height:300px;
width:300px;
opacity:0.5;
border-radius:100px;
}
.animate
{
transition:2s;
opacity:1;
border-radius:0px;
}
</style>
</head>
<body>
<img id=”img1” src=”smiley.jpg”>
<script>
document.addeventListener(“click”,imgFedIn);

function imgFedIn()
{
document.getElementById(img1).classList=”animate”;
}
</script>
</body>
</html>

 The code is using HTML, CSS, and JavaScript to create an animation effect on an image.
 In the HTML section, there is a basic structure with a title and a <img> tag that contains
the source of the image file.
 In the CSS section, there are some styles applied to the image.
 The height and width are set to 300px each, making it a square shape.
 The opacity property is set to 0.5 which means that the image will be slightly
transparent.
 This creates a visual effect where you can see through the image.
 Additionally, there is also a border-radius property set to 100px which gives rounded
corners to the image.
 The .animate class in CSS has transition:2s; which means that any changes made within
this class will take 2 seconds (2000 milliseconds) to complete.
 There is also opacity:1; which sets full transparency for this class and border-radius:0px;
removes any rounded corners from this class.
 Moving on to JavaScript, document.addeventListener(“click”,imgFedIn); adds an event
listener for when someone clicks on something in our document (in this case we want
them clicking on our <img> tag).
 When they do click it runs imgFedIn() function.
 Finally, inside imgFedIn() function we use
document.getElementById(img1).classList=”animate”; This line of code gets our element
by its id “img1” then uses .classList method with =”animate”;
 The code attempts to create an animation effect on the image when it is clicked, by
changing its opacity and border-radius properties.
Creating a three-state rollover
A three-state rollover is one where the rollover has three versions. Besides the original image
and the version that appears when the user places the cursor over the image, there is a third
version of the image when the button itself is clicked,

<html>
<head>
<title>three state rollover</title>
</head>
<body>
<img id="img1" src="image1.jpg" height="400px" width="400px">

<script>
document.getElementById("img1").addEventListener("mouseover",changeImage1);
document.addEventListener("click",changeImage2);

function changeImage1()
{
document.getElementById("img1").src="image2.jpg";
}
function changeImage2()
{
document.getElementById("img1").src="image3.jpg";
}

</script>
</body>
</html>

 The code starts by creating an HTML document with a single image element, which has
an id of "img1" and displays the image "image1.jpg".
 In the JavaScript section, the code uses the getElementById() method to select the image
element with id "img1" and adds an event listener for when the mouse hovers over it.
 The event listener is set to call a function called changeImage1().
 This means that when someone hovers their mouse over the image, this function will be
executed.
 The next line adds another event listener using addEventListener(), but this time it listens
for any click on the entire document (the webpage).
 When a click occurs anywhere on the page, it will call another function called
changeImage2().
 The first function changeImage1() simply changes the src attribute of our image element
to display "image2.jpg", effectively changing what is shown on screen.
 This happens when someone hovers their mouse over our original image.
 The second function changeImage2() does something similar - it changes what is
displayed on screen - but instead of being triggered by hovering over our original image,
it's triggered by clicking anywhere on our webpage.
 It changes our img element's src attribute again so that now we see "image3.jpg".
 this code demonstrates how events can be used in JavaScript to trigger different actions
based on user interactions such as hovering or clicking that is three state rollover.
 It also shows how elements within an HTML document can be selected and manipulated
using
the code. Display an image with id "img1" is the first state and when the mouse is
hovered over it, the image will change to "image2.jpg" this is a second state.
 When the user clicks anywhere on the page, the image will change to "image3.jpg" this
is a third state.
Making rollovers accessible and 508 compliant
JavaScript allows developers to add increased interaction, information processing, and control
in web-based content. However, JavaScript can also introduce accessibility issues. These issues
may include:

 Navigation. Inability or difficulty navigating using a keyboard or assistive technology.


 Hidden content. Presentation of content or functionality that is not accessible to assistive
technologies.
 User control. Lack of user control over automated content changes.
 Confusion/Disorientation. Altering or disabling the normal functionality of the user agent
(browser) or triggering events that the user may not be aware of.

A web page containing JavaScript will typically be fully accessible if the functionality of the
script is device independent (does not require only a mouse or only a keyboard) and the
information (content) is available to assistive technologies. Unfortunately, there is no easy fix
that can be applied to solve all accessibility problems associated with JavaScript. The only way
to ensure JavaScript accessibility is by evaluating each page that utilizes scripting and devising
a unique solution to any accessibility problem found.

Section 508 is essentially a part of the United States Workforce Rehabilitation Act of 1973. It
defines a set of requirements and guidelines that needs to be followed to ensure that information
is easy and conveniently accessible to individuals with disabilities.

There are multiple laws related to Section 508.

Why do websites need to be 508 compliant?

508 compliance is important for websites to make their platform more accessible to people with
disabilities and, as a result, gain more traffic and conversions.

By ignoring the accessibility needs of the audience, websites inevitably run the risk of lowering
their page views, limiting their website statistics, and narrowing down their target audience

How to make your website 508 compliant?

To make your website accessible, there are certain Website Content Accessibility Guidelines
that need to be followed. Among some of the key features that make your website compliant
with Section 508 are:

1. Navigation and accessibility using the keyboard


Users with various motor disabilities or those who use screen readers heavily depend on
keyboard-only visual indicators. This makes it essential for websites to enable interactions with
assistive technology.

For instance, buttons, links, or input fields should be easily controlled with the arrow, tab, or
other keys to increase accessibility rather than needing a mouse click. Users should also be able
to use navigation simply by jumping through page sections, headers, paragraphs, and other page
elements.

Therefore, websites need to make it possible for users to navigate the platform using a keyboard
and make each site element accessible through the keyboard.

2. Alternative text for images

Alternative (ALT) text refers to a description of what is depicted in the image. Since screen
readers can easily read this text, people with visual disabilities know what the picture is about.
Put simply, alternative image text gives a certain context to the images on the page that users
cannot see.

3. Transcript or captions for videos/audio

Transcripts and captions are primarily used to represent the spoken content from audio and
videos in the text format.

it is simply the text included for the hearing impaired.

While a transcript is a text version of the content presented in a separate document, captions
typically appear simultaneously with the spoken words in the video.

4. Screen reader capability

Users must be able to access the website content with a screen reader. These screen readers
simply convert digital text into synthesized speech.

5. No time limits

To follow 508 compliance, you must not set any time limits on the website. This is simply
because some users might require more time to do a particular action, and completing tasks
within a time limit can be challenging for them. This timeout feature is often found in forms
where personal information is required.
Making disjointed rollovers
Disjointed rollover is a technique commonly used in web development to create interactive and
visually appealing effects on web pages.

This technique involves changing the appearance of an element (usually an image) when a user
interacts with it, typically by hovering over it with the mouse cursor.

The term "disjointed" refers to the separation of the image states (such as normal and hover
states) .

This separation allows for greater flexibility and control over the rollover effect, as it enables
developers to define the image states independently and apply them dynamically using
JavaScript.

Disjointed Rollovers is somewhat a similar concept simple rollover.


In this you will add a JavaScript event to an image. When you put your mouse over that image,
that image with two other images on the page will change to different images. So the first image
acts as a toggle switch to swap images on the page.

Example:
<html>
<head></head>
<body>
<img id="image1" src="img1.jpg" width="400px" height="400px" />
<img id="image2" src="img2.jpg" width="400px" height="400px" />
<img id="image3" src="img3.jpg" width="400px" height="400px" />
<script>
document.getElementById("image1").addEventListener("mouseover", chnageImage);

document.getElementById("image1").addEventListener("mouseout", chnageImage1);

function chnageImage() {
document.getElementById("image1").src = "img4.jpg";
document.getElementById("image2").src = "img5.jpg";
document.getElementById("image3").src = "img6.jpg";
}

function chnageImage1() {
document.getElementById("image1").src = "img1.jpg";
document.getElementById("image2").src = "img2.jpg";
document.getElementById("image3").src = "img3.jpg";
}
</script>
</body>
</html>

 The code starts by creating three image elements with different source files, sizes and
IDs.
 Then, it adds event listeners to the first image element for two events: "mouseover" and
"mouseout".
 When the user hovers over the first image, the function chnageImage() is triggered.
 This function uses document.getElementById() to access each of the three images by
their IDs and changes their source files to different ones (img4.jpg, img5.jpg, img6.jpg).
 This results in all three images being replaced with new ones when the mouse is over the
first image.
 On "mouseout", another function called chnageImage1() is triggered.
 This function simply reverts back to the original source files for all three images
(img1.jpg, img2.jpg, img3.jpg).
 The code changes the source of three images when the mouse hovers over the first image
and reverts back to the original images when the mouse is moved away that is called
disjoint rollover.
Creating slideshows
Slideshow is nothing but showing images one after another after specific duration say 1 second.
You might have already seen your photos in your computer in a slideshow.
Slideshows are a popular feature on websites and presentations, allowing for the dynamic
display of images, text, or other content in a visually appealing manner.
JavaScript, along with HTML and CSS, forms the backbone of web development. It provides
the necessary functionality to manipulate HTML elements, respond to user interactions, and
create dynamic effects – all of which are essential components of a slideshow.

Example:
<html>
<head>
<style>
img{
width:100%;
height:400px;
display:none;
}

button{
position:absolute;
margin-top:-200px;
}

#pre{
left:10px;
}

#nxt{
right:10px;
}
</style>
</head>
<body>
<img src="Desert.jpg">
<img src="Koala.jpg">
<img src="Lighthouse.jpg">
<button id="nxt" onclick="nxtImg()">Next</button>
<button id="pre" onclick="PreImg()">Pre</button>

<script>
var flag =0 ;
var imgsArray=document.getElementsByTagName("img");
var imglength =imgsArray.length;
console.log(imgsArray);
window.addEventListener("load",fun);
function fun()
{
imgsArray[flag].style.display="block";
}

function nxtImg()
{
imgsArray[flag].style.display="none";
if(flag >= imglength-1 )
{
flag=-1;
}

flag++;
imgsArray[flag].style.display="block";
}

function PreImg()
{
imgsArray[flag].style.display="none";
if(flag == 0 )
{
flag = imglength;
}
flag--;
console.log(flag);
imgsArray[flag].style.display="block";

}
</script>
</body>
</html>

 The code starts by creating a style for the images and buttons, setting their positions
and display properties.
 Then it creates three image tags with different source files, which are initially hidden.
 Two buttons are created with IDs "nxt" and "pre", which will be used to navigate
through the images.
 The button elements have onclick events that call functions named nxtImg() and
PreImg() respectively.
 In the script section, a variable flag is initialized to 0, which will keep track of the
current image being displayed.
 Then all the image tags are stored in an array called imgsArray using
getElementsByTagName().
 The length of this array is also stored in a variable imglength.
 A function named fun() is defined which sets the display property of all images to
none except for the first one (index 0) since we want only one image to be visible at a
time.
 This function is then called when the window loads using addEventListener(),
ensuring that only one image is displayed on page load.
 The nxtImg() function hides the current image (using flag as index) and checks if flag
has reached or exceeded imglength-1 (since arrays start from index 0).
 If so, it resets flag back to -1 before incrementing it by 1.
 Finally, it displays the next image based on updated value of flag.
 Similarly, PreImg() hides current image and checks if flag has reached 0.
 If so, it sets flag equal to imglength before decrementing its
 The code attempts to create a slideshow of images with a "Next" and "Previous"
button to navigate through the images.

Displaying random images


Displaying random images in JavaScript involves manipulating the Document Object Model
(DOM) to dynamically change the source of an image element to one of several possible image
URLs. The random image generator concept is mostly used for advertisement. The images you
see on a website generating 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. You can also
provide the address of an image directly from the internet.

Steps for random image generator

 Declare an array using JavaScript to store the images.


 Provide the link or URL of images in the declared array. You can also pass the height
and width in the array for the image size to display on the webpage.
 Declare a JavaScript variable to store a random value calculated using
this floor(Math.random()*randomImage.length) method. It will generate a random
number between 0 and the length of the array that will be assigned to the images to
display randomly.
 Now, return the random images selected using a number calculated in the previous
step.
 Put all the above steps in a user-defined function (getRandomImage), which will call
by clicking on a Generate Image
 In HTML code, we will use a tab and provide an ID to display an image over another
image. So, the images will show you one by one, by overwrapping each other.

Example:

<html>

<head>

<title> Random Image Generator </title>

</head>

<script>

function getRandomImage() {

//declare an array to store the images

var randomImage = new Array();

//insert the URL of images in array

randomImage[0] = "img1.jpg";

randomImage[1] = " img2.jpg ";


randomImage[2] = " img3.jpg ";

randomImage[3] = " img4.jpg ";

randomImage[4] = " img5.jpg ";

//generate a number and provide to the image to generate randomly

var number = Math.floor(Math.random()*randomImage.length);

//return the images generated by a random number

document.getElementById("result").innerHTML = '<img src="'+randomImage[number]+'" />';

</script>

<body>

<center><h2 style="color:green"> Random Image Generator </h2></center>

<h4> Click the button to generate and display random images on the webpage </h4>

<!-- call user-defined getRandomImage function after 2 seconds -->

<button onclick = "setInterval(getRandomImage, 2000)"> Generate Image </button>

<br> <br>

<span id="result" align="center"> </span>

</body>

</html>

You might also like