Comment Del.icio.us Digg Reddit Technorati Furl

Javascript Essentials Part 4

Nov 2, 2008 Essentials, Javascript

We will cover following essentials of javascript in this area.

  • TOOLTIPS
    - Moving Tooltips
    - Hint Tooltip
    - Fade in out Tooltip
    - Regular Tooltip
  • DATE & TIME
    - Regular Time & Date Full Script (Live)
    - Date Script (Month, Date, Year)
    - Time Script (Time(Hour,minutes,second), AM:PM) – Live
  • Rotation
    - Image Rotation (Page Reload or Refresh Based)
    - Text Rotation (Page Reload or Refresh Based)
    - Image Rotation (Daily)
    - Image Rotation (After some seconds) – Appear
    - Image Rotation (After some seconds) – Fade in out
  • Form Validation
    - By Simple Body and Head Section Script Method
    - By External js Validator File
  • Scrollers (marquee and advanced)
    - Scroll Control by an external js File
    - Simple Scroll
    - Continuous Scroll
  • Text and Image Loading
    - Loading by text (till all page loads)
    - Loading by image

TOOLTIPS

Moving Tooltips
<head>
<script language="JavaScript">
<!--
self.moveTo(0,0)
self.resizeTo(screen.availWidth,screen.availHeight)
//-->
</script>
</head>
<body>
<DIV id=dek style="Z-INDEX: 1; VISIBILITY: hidden; POSITION: absolute"></DIV>
  <SCRIPT language="" type=text/javascript>
<!--
Xoffset=  20;    // modify these values to ...
Yoffset= 10;    // change the popup position.
var old,skn,iex=(document.all),yyy=-550;
var ns4=document.layers
var ns6=document.getElementById&&!document.all
var ie4=document.all
if (ns4)
skn=document.dek
else if (ns6)
skn=document.getElementById("dek").style
else if (ie4)
skn=document.all.dek.style
if(ns4)document.captureEvents(Event.MOUSEMOVE);
else{
skn.visibility="visible"
skn.display="none"
}
document.onmousemove=get_mouse;
function popup(msg,bak){
var content="<TABLE  WIDTH=200 BORDER=0 BORDERCOLOR=#4F1919 CELLPADDING=3 CELLSPACING=0 "+
"BGCOLOR="+bak+"><TD ALIGN=center><FONT COLOR=ffffff SIZE=1 face=Verdana, Arial, Helvetica, sans-serif>"+ msg +"</FONT></TD></TABLE>";
yyy=Yoffset;
 if(ns4){skn.document.write(content);skn.document.close();skn.visibility="visible";}
 if(ns6){document.getElementById("dek").innerHTML=content;skn.display='';}
 if(ie4){document.all("dek").innerHTML=content;skn.display='';}
}
function get_mouse(e){
var x=(ns4||ns6)?e.pageX:event.x+document.body.scrollLeft;
skn.left=x+Xoffset;
var y=(ns4||ns6)?e.pageY:event.y+document.body.scrollTop;
skn.top=y+yyy;
}
function kill(){
yyy=-1000;
if(ns4){skn.visibility="hidden";}
else if (ns6||ie4)
skn.display="none";
}
// -->
</SCRIPT>
<a onmouseover="popup('.enter static, non-flash, non animated website :)','#840000')" onmouseout=kill() href="index1.htm" target="_self">
<img src="20040410-300x250-blank.jpg" width="100" height="50" border="0"></a>

Download Moving Tool Tip

Hint Tooltip

This tool tip is for hint purpose and appears by clicking at some link.

Download Hint Tooltip Script

Fade in out Tooltip

http://www.dynamicdrive.com/dynamicindex5/linkinfo2.htm

Regular Tooltip

Image tool tip is by alt tag and text tooltip is by title tag.

<a href="#" title="here is tooltip text">some link</a>
<img src="someimage.jpg" alt="tooltip text">

Related Posts

Pages: 1 2 3 4 5 6

Tags: , , ,
Try Random Style!


One Response to “Javascript Essentials Part 4”

  1. December 11th, 2009 at 3:49 am
    gain height Says:

    I definitely agree with you concerning this subject. Nice entry. Already bookmarked for future reference.


Leave a Reply