Scribd
Upload
2 views

css unit 6

Uploaded by

Deep gaichor
Copyright
© © All Rights Reserved
Available Formats
Download as TXT, PDF, TXT or read online on Scribd
2 views

css unit 6

Uploaded by

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

Status Bar

-----------------------------------------------------------------------------------
----------------------
Status Bar:
-->
Status bar is present at the bottom of browser window.
When you move your mouse over an html link, the url appears in the status bar.
It enhances readability of the text present on web page when user scrolls over it.
Some developers display a message on the status bar when the web page first opens.
Other developers might change the message to reflect whatever the visitor is doing
on the web page.
For example, if a user is filling registration form then status bar will display a
text as 'User is on form filling section'.

Builds a static message


-->
Status bar is used to display a short message to visitors of web page.
A static message appears when the web page opens and remains on the status bar
until the web page is closed
To display message, message should be assigned to window.status property.
Syntax:
winobj.status=Msg;
Ex:
<html>
<head>
<script type="text/javascript">
window.status='Welcome to Home Page';
</script>
</head>
<body>
<h1>Hello welcome to JavaScript</h1>
</body>
</html>

Changing the message using rollover.


-->
We can use windows.status on events to change the status in the status bar.
You can display status bar whenever user hovers over an hyperlink.
Ex:
<html>
<head>
<script type="text/javascript">
window.status = "Welcome to Home Page";
</script>
</head>
<body>
<a onmouseover="window.status='H1 tag';return true"
onmouseout="window.status='H1 outside';return true">
<u><h1 >Hello welcome to JavaScript</h1></u>
</a>
</body>
</html>

Moving message along status bar.


-->
For moving the message in status bar, we have to increment the current position of
text one character ahead in a loop.
It will give effect of moving the text.
window.setInterval() method will be used to display the moved text after some
milliseconds.
Ex:
<html>
<head>
<title>Scrolling Text</title>
<script language="JavaScript">
var scrolli=0;
var maxscroll=100;
var blanks='';
function setScroll(text,speed){
window.setInterval("display('"+text+"')",speed);
}
function display(text){
window.status=blanks+text;
++scrolli;
blanks+=' ';
if(scrolli>maxscroll){
scrolli=0;
blanks='';
}
}
</script>
</head>
<body onload="setScroll('MY MESSG ',200)">
</body>
</html>

Banner
-----------------------------------------------------------------------------------
---------------------
Banner:
-->
Banner is hallmark of every commercial webpage.
Banner advertisements are image based and are popular form of website advertising.
It is placed either above, below or sides on the websites main content.
It is also refered as banner advertisement.

Loading and displaying banner advertisement.


-->
Following are the steps to insert banner advertisement in webpage.
1) Create banner advertisement using a graphics tool such as PhototShop, Paint,
etc.
2) Create an <img> element in web page with height and width to display banner
advertisement.
3) Build JavaScript that loads and display banner advertisements.

Ex:
<!DOCTYPE html>
<html>
<head>
<title>Banner Ex</title>
</head>
<body>
<a href="http://www.google.com">
<img src="banner.jpg" alt="Banner" width="468" height="60">
</a>
</body>
</html>
Rotating Banners:
-->
Steps:
1. Load banner advertisements into an array.
2. Determine whether the browser supports the image object.
3. Display a banner advertisement.
4. Pause before displaying the next banner advertisement.
Ex:
<html>
<head>
<title>Link Banner Ads</title>
<script language="Javascript" type="text/javascript">
Banners = new Array("banner.jpg", "banner2.jpg");
BannerLink = new Array("google.com/", "coke.com/");
CurrentBanner = 0;
NumOfBanners = Banners.length;
function LinkBanner() {
document.location.href = "http://www." + BannerLink[CurrentBanner];
}
function DisplayBanners() {
if (document.images) {
CurrentBanner++;
if (CurrentBanner == NumOfBanners) {
CurrentBanner = 0;
}
document.RotateBanner.src = Banners[CurrentBanner];
setTimeout("DisplayBanners()", 1000);
}
}
</script>
</head>
<body onload="DisplayBanners()">
<center>
<a href="javascript: LinkBanner()">
<img src ="banner.jpg" width="400" height="75" name="RotateBanner"/></a>
</center>
</body>
</html>

Linking a banner advertisment to url


-->
To get additional information, the visitor is expected to click the banner so that
a new web page opens.
You can link a banner advertisement to a web page by inserting a hyperlink into
your web page that calls a JavaScript function rather than the URL of a web page.
The JavaScript then determines the URL that is associated with the current banner
and loads the web page that is associated with the URL.

Slideshow
-----------------------------------------------------------------------------------
--------------------
Slideshow
-->
A slideshow is a similar to a banner advertisement in which multiple images rotate
inside a <img> element on the web page.
Slideshow provides the functionality to visitor to move next or back image as and
when required.
Ex:
<html>
<head>
<script>
pics = new Array("banner.jpg", "banner2.jpg", "banner3.jpg");
count = 0;
function slideshow(status) {
if (document.images) {
count = count + status;
if (count > pics.length - 1) {
count = 0;
}
if (count < 0) {
count = pics.length - 1;
}
document.img1.src = pics[count];
}
}
</script>
</head>
<body>
<img src="banner.jpg" width="200" name="img1" />
<br />
<input type="button" value="Next" onclick="slideshow(1)" />
<input type="button" value="Back" onclick="slideshow(-1)" />
</body>
</html>

<html>
<head>
<title> Slideshow</title>
</head>
<body>
<script>
c=0;
pic=['banner.jpg','banner2.jpg','banner3.jpg'];
function slides(status){
c+=status;
if(c>pic.length-1){
c=0;
}
if(c<0){
c=pic.length-1;
}
document.imgs.src=pic[c];
}
}
</script>
<img src="banner.jpg" width="200" name="imgs">
<br>
<input type="button" value="Next" onclick="slides(1)">
<input type="button" value="Back" onclick="slides(-1)">
</body>
</html>

You might also like