Scribd
Upload
25 views

CSS Practicals

Uploaded by

apurvapednekar36
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
25 views

CSS Practicals

Uploaded by

apurvapednekar36
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 38

DEPARTMENT OF INFORMATION

TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 06
Title of Experiment Create a webpage using form elements.

6.1: WAP to create a form for creating Gmail account using form elements.
<!DOCTYPE html>
<html>
<head>
<title>Gmail Registration</title>
</head>
<body>
<h2>Create a Gmail Account</h2>
<form id="registrationForm">
<label for="firstName">First Name:</label>
<input type="text" id="firstName" required><br><br>

<label for="lastName">Last Name:</label>


<input type="text" id="lastName" required><br><br>

<label for="email">Email:</label>
<input type="email" id="email" required><br><br>

<label for="password">Password:</label>
<input type="password" id="password" required><br><br>

<button type="button" onclick="submitForm()">Create Account</button> </form>

<script> function submitForm() { const


firstName =
document.getElementById("firstName").value; const lastName =
document.getElementById("lastName").value; const email =
document.getElementById("email").value; const password =
document.getElementById("password").value;

// Add your validation logic here


Page | 1
if (email && password) {
// You can perform further actions like sending data to a server here
alert("Account created successfully!");
} else {
alert("Please fill in all required fields.");
}
}
</script>
</body>
</html>

6.2:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Evaluation</title>
</head>
<body>
<h2>Checkbox Evaluation</h2>
<form id="checkboxForm">
<label for="checkbox1">Checkbox 1</label>
<input type="checkbox" id="checkbox1"><br><br>

<label for="checkbox2">Checkbox 2</label>


<input type="checkbox" id="checkbox2"><br><br>

<label for="checkbox3">Checkbox 3</label>

Page | 2
<input type="checkbox" id="checkbox3"><br><br>

<button type="button" onclick="evaluateCheckboxes()">Evaluate


Checkboxes</button>
</form>

<p id="result"></p>

<script>
function evaluateCheckboxes() { const checkbox1 =
document.getElementById("checkbox1"); const checkbox2 =
document.getElementById("checkbox2"); const checkbox3 =
document.getElementById("checkbox3"); const resultElement =
document.getElementById("result"); let selectedCheckboxes = [];

if (checkbox1.checked) {
selectedCheckboxes.push("Checkbox 1");
}
if (checkbox2.checked) {
selectedCheckboxes.push("Checkbox 2");
}
if (checkbox3.checked) {
selectedCheckboxes.push("Checkbox 3");
}

if (selectedCheckboxes.length > 0) {
resultElement.textContent = "Selected Checkboxes: " +
selectedCheckboxes.join(", ");
} else {
resultElement.textContent = "No checkboxes selected.";
}
}
</script>
</body>
</html>

Page | 3
Page | 4
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 07
Title of Experiment Create a webpage to implement form events. Part 1

7.1 Write a program for changing the option list dynamically.

<!DOCTYPE html>
<html>
<head>
<title>Dynamic Option List</title>
</head>
<body>
<h1>Dynamic Option List</h1>
<label for="selectFruit">Select a fruit: </label>
<select id="selectFruit">
<option value="apple">Apple</option>
<option value="banana">Banana</option>
<option value="cherry">Cherry</option>
</select>

<input type="text" id="newFruit" placeholder="Enter a new fruit">


<button onclick="addCustomOption()">Add Custom Option</button>

<script>
function addCustomOption() {

var input = document.getElementById('newFruit');


var newFruitName = input.value;

if (newFruitName.trim() !== '') {

var select = document.getElementById('selectFruit');

var option = document.createElement('option');


Page | 5
option.value = newFruitName.toLowerCase();
option.text = newFruitName;

select.appendChild(option);

input.value = '';
} else {
alert("Please enter a valid fruit name.");
}
}
</script>
</body>
</html>

7.2 Develop a program for as we enter the firstname and lastname , email is automatically
generated.

<!DOCTYPE html>
<html>
<head>
<title>Email Generator</title>
</head>
<body>
<h2>Enter Your First Name and Last Name:</h2>
<input type="text" id="firstName" placeholder="First Name">
<input type="text" id="lastName" placeholder="Last Name">
<button onclick="generateEmail()">Generate Email</button>
Page | 6
<h3>Generated Email:</h3>
<p id="generatedEmail"></p>

<script>
function generateEmail() {
const firstName = document.getElementById('firstName').value;
const lastName = document.getElementById('lastName').value;

if (firstName && lastName) {


const email = `${firstName.toLowerCase()}.${lastName.toLowerCase()}@gmail.com`;
document.getElementById('generatedEmail').textContent = email;
} else {
alert('Please enter both first name and last name.');
}
}
</script>
</body>
</html>

Page | 7
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 08
Title of Experiment Create a webpage to implement form events. Part 2

8.1 Write a program to demonstrate the use of onchange event.


<!DOCTYPE html>
<html>
<head>
<title>Onchange Event Example</title>
</head>
<body>
<h2>Select a Color:</h2>
<select id="colorSelect" onchange="updateColor()">
<option value="red">Red</option>
<option value="blue">Blue</option>
<option value="green">Green</option>
<option value="yellow">Yellow</option>
</select>

<div id="colorDisplay">Selected color will be displayed here.</div>

<script>
function updateColor() {
const colorSelect = document.getElementById('colorSelect');
const selectedColor = colorSelect.value;
const colorDisplay = document.getElementById('colorDisplay');

colorDisplay.textContent = `You selected: ${selectedColor}`;


colorDisplay.style.color = selectedColor;
}
</script>
</body>
</html>

Page | 8
8.2 Write a JavaScript program to demonstrate the addEventListener ().
<!DOCTYPE html>
<html>
<head>
<title>addEventListener() Example</title>
</head>
<body>
<h2>Click the Button:</h2>
<button id="myButton">Click Me</button>

<p id="message"></p>

<script>
// Get the button and the message element by their IDs
const button = document.getElementById('myButton');
const messageElement = document.getElementById('message');

// Define a function to handle the button click event


function handleClick() {
messageElement.textContent = 'Button Clicked!';
}

// Attach an event listener to the button


button.addEventListener('click', handleClick);
</script>
</body>
</html>

Page | 9
Page | 10
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 09
Title of Experiment Develop a webpage using Intrinsic java functions.

9.1 Write a program to disable and enabled text field.


<!DOCTYPE html>
<html>
<head>
<title>Enable/Disable Text Field</title>
</head>
<body>
<label for="textField">Text Field:</label>
<input type="text" id="textField" disabled>
<button id="enableButton">Enable</button>
<button id="disableButton">Disable</button>

<script>
// Get references to the text field and buttons
const textField = document.getElementById('textField');
const enableButton = document.getElementById('enableButton');
const disableButton = document.getElementById('disableButton');

// Function to enable the text field


function enableTextField() {
textField.removeAttribute('disabled');
}

// Function to disable the text field


function disableTextField() {
textField.setAttribute('disabled', 'true');
}

// Add click event listeners to the buttons


enableButton.addEventListener('click', enableTextField);
disableButton.addEventListener('click', disableTextField);
Page | 11
</script>
</body>
</html>

9.2 Write a JavaScript program to change the value of an element that the user cannot change (a
read-only element)
<!DOCTYPE html>
<html>
<head>
<title>Change Read-Only Element Value</title>
</head>
<body>
<h1>Change Read-Only Element Value</h1>

<p>Read-Only Element: <input type="text" id="readOnlyInput" readonly value="This is read-


only"></p>

<button onclick="changeValue()">Change Value</button>

<script>
function changeValue() {
// Get the read-only input element
var readOnlyInput = document.getElementById('readOnlyInput');

// Change the value


readOnlyInput.value = "New value for the read-only element";
}
</script>
</body>
</html>

Page | 12
Page | 13
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 10
Title of Experiment Develop a webpage for creating session and persistent cookies.
Observe the effects with Browser cookie settings.

10.1 Write a program to read the cookie


<!DOCTYPE html>
<html>
<head>
<title>Read Cookie</title>
</head>
<body>
<h1>Read Cookie</h1>

<button onclick="readCookie()">Read Cookie</button>

<script>
function readCookie() {
var cookieValue = document.cookie.split('; ').find(cookie =>
cookie.startsWith('exampleCookie='));
if (cookieValue) {
alert("Cookie value: " + cookieValue.split('=')[1]);
} else {
alert("Cookie not found.");
}
}
</script>
</body>
</html>

Page | 14
10.2 Write a program to delete the cookie.
<!DOCTYPE html>
<html>
<head>
<title>Delete Cookie</title>
</head>
<body>
<h1>Delete Cookie</h1>

<button onclick="deleteCookie()">Delete Cookie</button>

<script>
function deleteCookie() {
document.cookie = "exampleCookie=; expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;";
alert("Cookie deleted.");
}
</script>
</body>
</html>

Page | 15
Page | 16
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 11
Title of Experiment Develop a Web Page for placing the window on the screen and
working with child window.

11.1 Write a program to demonstrate the use of resizeBy() and resizeTo().


<!DOCTYPE html>
<html>
<head>
<title>Window Resize Example</title>
</head>
<body>
<h1>Window Resize Example</h1>

<button onclick="resizeWindowBy()">Resize Window by 100x100</button>


<button onclick="resizeWindowTo()">Resize Window to 800x600</button>

<script>
function resizeWindowBy() {
// Resize the window by 100 pixels horizontally and 100 pixels vertically
window.resizeBy(100, 100);
}

function resizeWindowTo() {
// Resize the window to a specific width and height (800x600)
window.resizeTo(800, 600);
}
</script>
</body>
</html>

Page | 17
11.2 Write a program to demonstrate the use of scrollBy () and scrollTo().
<!DOCTYPE html>
<html>
<head>
<title>Scrolling Example</title>
</head>
<body>
<h1>Scrolling Example</h1>

<button onclick="scrollByExample()">Scroll by 100 pixels</button>


<button onclick="scrollToExample()">Scroll to the top of the page</button>

<script>
function scrollByExample() {
// Scroll the window by 100 pixels horizontally and 100 pixels vertically
window.scrollBy(100, 100);
}

function scrollToExample() {
// Scroll the window to a specific position (top of the page)
window.scrollTo(0, 0);
}
</script>
</body>
</html>

Page | 18
11.3 Writing a number after a delay using setInterval ( ) method. In this example, numbers are
displayed in a textarea after a 1 second.
<!DOCTYPE html>
<html>
<head>
<title>Display Numbers with setInterval</title>
</head>
<body>
<h1>Display Numbers with setInterval</h1>

<textarea id="numberTextArea" rows="10" cols="30"></textarea>

<script>
var numberTextArea = document.getElementById('numberTextArea');
var count = 1;

function displayNumber() {
if (count <= 10) {
numberTextArea.value += count + "\n";
count++;
} else {
clearInterval(numberInterval);
}
}

var numberInterval = setInterval(displayNumber, 1000); // 1000 milliseconds = 1 second


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

Page | 19
Page | 20
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 12
Title of Experiment Develop a Web Page for validation of form fields using regular
expressions.

12.1
<!DOCTYPE html>
<html>
<head>
<title>Aadhar Card Validation</title>
</head>
<body>
<h2>Aadhar Card Validation</h2>
<p>Enter your username and Aadhar card number:</p>

<input type="text" id="username" placeholder="Username">


<input type="text" id="aadharNumber" placeholder="Aadhar Card Number">
<button onclick="validateAadhar()">Validate Aadhar</button>

<p id="result"></p>

<script>
function validateAadhar() {
// Get the input values
const username = document.getElementById("username").value;
const aadharNumber = document.getElementById("aadharNumber").value;

// Regular expression to match a 12-digit Aadhar card number


const aadharRegex = /^\d{12}$/;

if (aadharRegex.test(aadharNumber)) {
document.getElementById("result").textContent = `Hello, ${username}! Aadhar Card
Number is valid.`;
} else {
document.getElementById("result").textContent = "Invalid Aadhar Card Number.
Page | 21
Please enter a 12-digit number.";
}
}
</script>
</body>
</html>

12.2
<!DOCTYPE html>
<html>
<head>
<title>Email Validation</title>
</head>
<body>
<h2>Email Validation</h2>
<p>Enter your email address:</p>

<input type="text" id="email" placeholder="Email Address">


<button onclick="validateEmail()">Validate Email</button>

<p id="result"></p>

<script>
function validateEmail() {
// Get the input value
const email = document.getElementById("email").value;

// Regular expression to validate an email address


const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;

if (emailRegex.test(email)) {
Page | 22
document.getElementById("result").textContent = "Valid email address!";
} else {
document.getElementById("result").textContent = "Invalid email address. Please enter a
valid email.";
}
}
</script>
</body>
</html>

12.3
<!DOCTYPE html>
<html>
<head>
<title>Password Validation with Quantifiers</title>
</head>
<body>
<h2>Password Validation with Quantifiers</h2>
<p>Enter your password:</p>

<input type="password" id="password" placeholder="Password">


<button onclick="validatePassword()">Validate Password</button>

<p id="result"></p>

<script>
function validatePassword() {
// Get the input value
const password = document.getElementById("password").value;

// Regular expression to validate a password


const passwordRegex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d).{8,20}$/;
Page | 23
if (passwordRegex.test(password)) {
document.getElementById("result").textContent = "Valid password!";
} else {
document.getElementById("result").textContent = "Invalid password. Please enter a
valid password (at least one uppercase letter, one lowercase letter, one digit, and 8-20
characters).";
}
}
</script>
</body>
</html>

Page | 24
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 13
Title of Experiment Create a Web Page with Rollovers effect.

13.1
<!DOCTYPE html>
<html>
<head>
<title>Rollover Text Color Change (JavaScript)</title>
<style>
/* Initial text style */
.rollover-text {
color: black;
}
</style>
<script>
window.onload = function() {
const textElement = document.querySelector('.rollover-text');

// Store the initial text color


const initialColor = getComputedStyle(textElement).color;

// Change text color on mouseover


textElement.addEventListener('mouseover', function() {
textElement.style.color = 'red';
});

// Restore initial color on mouseout


textElement.addEventListener('mouseout', function() {
textElement.style.color = initialColor;
});
}
</script>
</head>
<body>
<h2>Rollover Text Color Change (JavaScript)</h2>
Page | 25
<!-- Add the rollover effect to this text -->
<p class="rollover-text">Hover over this text to change its color!</p>
</body>
</html>

13.2
<!DOCTYPE html>
<html>
<head>
<title>Rollover Image Change (JavaScript)</title>
<style>
/* Define the image container */
.image-container {
display: inline-block;
position: relative;
}

/* Define the initial image style */


.image-container img {
width: 200px; /* Set the width of the image */
}
</style>
<script>
// Function to change the image source on hover
function changeImage(imageElement, newSrc) {
imageElement.src = newSrc;
}
</script>
</head>
<body>
<h2>Rollover Image Change (JavaScript)</h2>
Page | 26
<!-- Image 1 -->
<div class="image-container">
<img src="image1.jpg" alt="Image 1" onmouseover="changeImage(this, 'image1-hover.jpg')"
onmouseout="changeImage(this, 'image1.jpg')">
</div>

<!-- Image 2 -->


<div class="image-container">
<img src="image2.jpg" alt="Image 2" onmouseover="changeImage(this, 'image2-hover.jpg')"
onmouseout="changeImage(this, 'image2.jpg')">
</div>

<!-- Image 3 -->


<div class="image-container">
<img src="image3.jpg" alt="Image 3" onmouseover="changeImage(this, 'image3-hover.jpg')"
onmouseout="changeImage(this, 'image3.jpg')">
</div>

<!-- Image 4 -->


<div class="image-container">
<img src="image4.jpg" alt="Image 4" onmouseover="changeImage(this, 'image4-hover.jpg')"
onmouseout="changeImage(this, 'image4.jpg')">
</div>
</body>
</html>

Page | 27
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 14
Title of Experiment Develop a Web Page for implementing Menus.

14.1
<!DOCTYPE html>
<html>
<head>
<title>Chained Select Menu Example</title>
</head>
<body>
<h2>Chained Select Menu Example</h2>
<label for="country">Select a Country:</label>
<select id="country" onchange="updateStates()">
<option value="">Select a country</option>
<option value="usa">United States</option>
<option value="canada">Canada</option>
</select>

<br>

<label for="state">Select a State:</label>


<select id="state">
<option value="">Select a state</option>
</select>

<script>
const statesByCountry = {
usa: ["New York", "California", "Texas", "Florida"],
canada: ["Ontario", "Quebec", "British Columbia", "Alberta"]
};

function updateStates() {
const countrySelect = document.getElementById("country");
const stateSelect = document.getElementById("state");
const selectedCountry = countrySelect.value;
Page | 28
// Clear the existing state options
stateSelect.innerHTML = '<option value="">Select a state</option>';

// Populate the state options based on the selected country


if (selectedCountry) {
const states = statesByCountry[selectedCountry];
for (const state of states) {
const option = document.createElement("option");
option.value = state;
option.textContent = state;
stateSelect.appendChild(option);
}
}
}
</script>
</body>
</html>

14.2
<!DOCTYPE html>
<html>
<head>
<title>Context Menu Example</title>
<style>
/* Define the context menu style */
.context-menu {
display: none;
position: absolute;
background: #f0f0f0;
border: 1px solid #ccc;
list-style: none;
Page | 29
padding: 0;
}
.context-menu li {
padding: 5px 15px;
cursor: pointer;
}
</style>
</head>
<body>
<h2>Context Menu Example</h2>
<p>Right-click anywhere on this page to open the context menu.</p>

<!-- Context menu element -->


<ul class="context-menu" id="context-menu">
<li id="option1">Option 1</li>
<li id="option2">Option 2</li>
<li id="option3">Option 3</li>
</ul>

<script>
const contextMenu = document.getElementById("context-menu");

// Show the context menu at the clicked position


document.addEventListener("contextmenu", (event) => {
event.preventDefault();
contextMenu.style.display = "block";
contextMenu.style.left = event.clientX + "px";
contextMenu.style.top = event.clientY + "px";
});

// Hide the context menu when clicking elsewhere


document.addEventListener("click", () => {
contextMenu.style.display = "none";
});

// Handle option selection


contextMenu.addEventListener("click", (event) => {
const selectedOption = event.target.id;
if (selectedOption) {
alert(`You selected: ${document.getElementById(selectedOption).textContent}`);
}
});
</script>
</body>
</html>

Page | 30
Page | 31
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 15
Title of Experiment Develop a Web Page for implementing Status Bar and Web Page
Protection.

15.1
<!DOCTYPE html>
<html>
<head>
<title>Status-Like Message with JavaScript</title>
<style>
/* Define the status message style */
.status-message {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #333;
color: white;
text-align: center;
padding: 10px;
display: none;
}
</style>
</head>
<body>
<h2>Status-Like Message with JavaScript</h2>
<p>Click the button to show a status-like message:</p>

<button onclick="showStatusMessage()">Show Status Message</button>

<!-- Status message container -->


<div class="status-message" id="statusMessage">
This is a status-like message.
</div>

Page | 32
<script>
function showStatusMessage() {
const statusMessage = document.getElementById("statusMessage");
statusMessage.style.display = "block";

// Automatically hide the message after 3 seconds (3000 milliseconds)


setTimeout(function() {
statusMessage.style.display = "none";
}, 3000);
}
</script>
</body>
</html>

15.2
<!DOCTYPE html>
<html>
<head>
<title>Conceal Email Address</title>
</head>
<body>
<h2>Contact Us</h2>

<p>If you'd like to get in touch, please email us:</p>

<div id="email"></div>

<script type="text/javascript">
var user = 'contact';
var domain = 'example.com';
var mailTo = user + '@' + domain;
Page | 33
var emailDiv = document.getElementById("email");
var emailLink = document.createElement("a");
emailLink.href = "mailto:" + mailTo;
emailLink.textContent = mailTo;

emailDiv.appendChild(emailLink);
</script>
</body>
</html>

15.3
In short, protecting your webpages is essential for the following reasons:

1. Security: To prevent unauthorized access and cyberattacks.


2. Privacy: Safeguard user data and sensitive information.
3. Data Integrity: Ensure the accuracy and reliability of your data.
4. User Trust: Build trust with users for increased engagement.
5. Compliance: Meet legal and regulatory obligations.
6. Reputation: Maintain a positive image and prevent damage.
7. Malware Prevention: Avoid distributing malware.
8. Downtime Avoidance: Minimize disruptions and financial losses.
9. SEO and Content Protection: Preserve search rankings and intellectual property.
10. Financial Transactions: Secure payment information.
11. Bot and Scraping Prevention: Prevent unauthorized data harvesting.

Page | 34
DEPARTMENT OF INFORMATION
TECHNOLOGY

Subject: Client Side Scripting Subject Code:22519


Language
Semester: 5 Course: IF5I-B
Laboratory No: Name of Subject Teacher: Prof.Shonal Vaz

Name of Student: Shravan Manore Roll ID: 21202B0009

Experiment No: 16
Title of Experiment Develop a Web Page for implementing Slideshow, Banner.

16.1
<!DOCTYPE html>
<html>
<head>
<title>Banner Ads with Links</title>
<script>
// Array of banner objects with image and URL
const banners = [
{ img: '1.jpg', url: 'https://www.google.com' },
{ img: '2.jpg', url: 'https://www.youtube.com' },
{ img: '3.jpg', url: 'https://www.vpt.edu.in' }
];

let currentBanner = 0;

function DisplayBanners() {
if (document.images) {
currentBanner++;
if (currentBanner == banners.length) {
currentBanner = 0;
}
const banner = banners[currentBanner];
document.RotateBanner.src = banner.img;
// Open the URL when the banner is clicked
document.RotateBanner.onclick = function () {
window.open(banner.url, '_blank');
};
setTimeout(DisplayBanners, 3000); // Change banner every 3 seconds
}
}
</script>
Page | 35
</head>
<body onload="DisplayBanners()">
<center>
<img src="1.jpg" width="400" height="75" name="RotateBanner" style="cursor: pointer;" />
</center>
</body>
</html>

16.2
<!DOCTYPE html>
<html>
<head>
<title>Image Slideshow</title>
<style>
.slideshow-container {
max-width: 500px;
position: relative;
margin: auto;
}

.mySlides {
display: none;
}

img {
width: 100%;
}

.prev, .next {
cursor: pointer;
Page | 36
position: absolute;
top: 50%;
transform: translateY(-50%);
padding: 10px;
background-color: #333;
color: #fff;
}

.next {
right: 0;
}
</style>
</head>
<body>
<h2>Image Slideshow</h2>

<div class="slideshow-container">
<div class="mySlides">
<img src="1.jpg" alt="Image 1">
</div>
<div class="mySlides">
<img src="2.jpg" alt="Image 2">
</div>
<div class="mySlides">
<img src="3.jpg" alt="Image 3">
</div>
<div class="mySlides">
<img src="4.jpg" alt="Image 4">
</div>

<a class="prev" onclick="plusSlides(-1)">Previous</a>


<a class="next" onclick="plusSlides(1)">Next</a>
</div>

<script>
let slideIndex = 1;
showSlides(slideIndex);

function plusSlides(n) {
showSlides(slideIndex += n);
}

function showSlides(n) {
const slides = document.querySelectorAll('.mySlides');
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
Page | 37
}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = 'none';
}
slides[slideIndex - 1].style.display = 'block';
}
</script>
</body>
</html>

Page | 38

You might also like