Scribd
Upload
29 views

CSS Practicals

Uploaded by

apurvapednekar36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
29 views

CSS Practicals

Uploaded by

apurvapednekar36
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
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