|
Example 1
Explanation
(This Script is Netscape6 Compliant)
Updated - December, 2000.
Here's yet another Example (TWO - in fact!) of DHTML & CSS. Remember, these too, work ONLY on 4th Generation or Higher Browsers. So, if you are STILL using a version 3 Browser, please do upgrade to a newer version. You have absolutely nothing to worry about - the programmes will automatically (if you so choose) set up the Downloaded Software and you won't loose ANY of your old records (Bookmarks/Favourites, Mail Lists etc). Let me clarify once more that the executable files will upgrade to the newer version automatically once you have downloaded them. So do visit Netscape Home Page OR Microsoft Home Page to download the latest version of Netscape Communicator OR Internet Explorer, whichever you prefer.
As you see, there are TWO examples here. We'll tackle, one at a Time.
Fixed Shadow Text - This can replace your normal Header Image if you wish.
- In the Style sheet specification, I created 2 sets of division tags & named them #examp1a and #examp1b
- #Examp1a has the following attributes:
position:absolute;
top:160px;
left:80px;
font-size:36px;
font-family:helvetica, arial;
color:#004000;
visibility:visible;
z-index:2;
font-weight:bold;
- #Examp1b is mostly identical, except for the following:
position:absolute; top:158px; left:78px; - Shadow off-set by 2 pixels.
color:#c60000 - Dark Red
z-index:1 - This ensures that the shadow remains UNDER the main text.
filter:shadow - This is a style type supported in IE5 only. Gives that "extruded" look.
- Just to ensure that the "shadow text" does not show up on old browsers, this gets written on the fly, provided the visitor has a Version4+ browser. Details are given in the Script section below.
OnMouseOver Shadow Text
- As in the above example, here also you need 2 sets of style tags - #examp2a and #examp2b.
- The attributes & differences are identical to what's detailed above, except that for #examp2b, Visibility is set to "hidden"
- The a tag style has been included because the mouseover function works with HyperLinks only (<a href=........>).
- Just to ensure that the "shadow text" does not show up on old browsers, this gets written on the fly, provided the visitor has a Version4+ browser. Details are given in the Script section below.
- Finally, the Script calls for TWO functions (I have named them changein & changeout) which controls the SHOW-HIDE effects.
Important Note: As I have done with the Animated Divider Example, here too, I have inserted a CLEAR IMAGE (the same one, in fact!) between the Head Logo & the main text in order to ensure that the main text does not overlap these Examples.
Script for OnMouseOver Example
| Paste this section within the HEAD tags
<script language="javascript">
<!-- hide from old browsers
// Written & created by Shivaji Basu
// Copyright www.shivbasu.com
// Use this script at your own risk
// To use his script, you MUST leave this disclaimer & credit as it is
function changein(id) {
if (document.layers) document.layers[id].visibility = "show"
else if (document.getElementById) document.getElementById(id).style.visibility = "visible"
else if (document.all && !(document.getElementById)) document.all(id).style.visibility = "visible"
}
function changeout(id) {
if (document.layers) document.layers[id].visibility = "hide"
else if (document.getElementById) document.getElementById(id).style.visibility = "hidden"
else if (document.all && !(document.getElementById)) document.all(id).style.visibility = "hidden"
}
//-->
</script>
<style type="text/css">
<!--
#examp2a{position:absolute;top:160px;left:380px;font-size:36px;font-family:helvetica, arial;color:#004000; visibility:visible; z-index:2; font-weight:bold;}
#examp2b{position:absolute;top:158;left:378;font-size:36px;font-family:helvetica, arial;
color:#c60000; visibility:visible; z-index:1;filter:shadow; font-weight:bold;}
a{text-decoration:none;color:#004000}
-->
</style>
Paste this in the main Body
<script language="javascript">
<!-- write it on the fly
if(document.layers||(document.all && !(document.getElementById))||document.getElementById){
document.writeln('<DIV ID="#examp2b">Example 2</DIV>')
}
//-->
</script>
<DIV ID="#examp2a">
<a href="#.html" onmouseover="changein('examp2b'); return true;" onmouseout="changeout('examp2b');return true;">Example 2</DIV>
|
Script for Static Text Example
| Paste this section within the HEAD tags
<script language="javascript">
<!-- hide from old browsers
// Written & created by Shivaji Basu
// Copyright www.shivbasu.com
// Use this script at your own risk
// To use his script, you MUST leave this disclaimer & credit as it is
//-->
</script>
<style type="text/css">
<!--
#examp1a{position:absolute;top:100px;left:80px;font-size:36px;font-family:helvetica, arial;color:#004000; visibility:visible; z-index:2; font-weight:bold;}
#examp1b{position:absolute;top:98;left:78;font-size:36px;font-family:helvetica, arial;
color:#c60000; visibility:visible; z-index:1;filter:shadow; font-weight:bold;}
-->
</style>
Paste this in the main Body
<script language="javascript">
<!-- write it on the fly
if(document.layers||(document.all && !(document.getElementById))||document.getElementById){
document.writeln('<DIV ID="#examp1b">Example 1</DIV>')
}
//-->
</script>
<DIV ID="#examp1a">Example 1</DIV>
|
Copyright DBS © 1998-2003. All Rights Reserved |
|
