Scribd
Upload
4 views

CSS15

The document contains two JavaScript examples: the first modifies the status bar to display 'MSBTE' on mouseover of a link and clears it on mouseout, while the second creates a crawling status bar message that starts when the webpage loads. Both examples include HTML and JavaScript code to demonstrate their functionality. Additionally, there is a question about the status bar and how to display a moving message using JavaScript.

Uploaded by

samkhot1012
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
4 views

CSS15

The document contains two JavaScript examples: the first modifies the status bar to display 'MSBTE' on mouseover of a link and clears it on mouseout, while the second creates a crawling status bar message that starts when the webpage loads. Both examples include HTML and JavaScript code to demonstrate their functionality. Additionally, there is a question about the status bar and how to display a moving message using JavaScript.

Uploaded by

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

Practical no.

15

Q1)Write a Java script to modify the status bar using on MouseOver and on MouseOut
with links. When the user moves his mouse over the link, it will display “MSBTE” in the
status bar. When the user moves his mouse away from the link the status bar will display
nothing.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Modify Status Bar on MouseOver</title>
</head>
<body>

<h2>Hover over the link to modify the status bar:</h2>

<!-- Link with mouseover and mouseout events -->


<a href="https://msbte.org.in"
onmouseover="displayStatus('MSBTE')"
onmouseout="clearStatus()">Visit MSBTE</a>

<script>
function displayStatus(message)
{
window.status = message;
}

function clearStatus()
{
window.status = '';
}
</script>
</body>
</html>
Q2) Write a JavaScript that sets a crawling status bar message to the webpage.
Message is “Welcome to the Mystic World of JavaScript”.The message must start crawling
when the webpage gets loaded

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Crawling Status Bar</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
#crawlingMessage {
position: fixed; /* Fixed position at the top */
top: 0;
left: 100%; /* Start from the right */
white-space: nowrap; /* Prevent wrapping */
font-size: 24px; /* Font size */
background-color: #282c34; /* Background color */
color: white; /* Text color */
padding: 10px; /* Padding around the message */
z-index: 1000; /* Ensure it's on top */
}
</style>
</head>
<body>
<div id="crawlingMessage">Welcome to the Mystic World of JavaScript</div>
<script>
function startCrawling() {
const message = document.getElementById('crawlingMessage');
const windowWidth = window.innerWidth;
let position = windowWidth;
function crawl() {
position -= speed;
message.style.left = position + 'px';
if (position < -message.offsetWidth) {
position = windowWidth }
requestAnimationFrame(crawl); }

crawl();
}

window.onload = startCrawling;
</script>

</body>
</html>

Output:
Q3) What is Status bar and how to display moving message on the status line of a
window using JavaScript ?

You might also like