Introduction
Hi Fellow developers, many developers today not only use one language to get the job done,
Thats right ... we all have to adapt to the ever changing environment of the web 2.0 today, one of the
many available languages with powerful effect's is my personal Favorite (javascript) & the DOM.
(Document Object Model)
I won't go right into the theory behind these, but just to cover the basic idea for those whom are
unaware so you get a little undertsnading of whats going on the DOM is:
HTML DOM is a W3C standard and it is an abbreviation for the Document Object Model for HTML, The
HTML DOM defines a standard set of objects for HTML, and a standard way to access and manipulate
HTML documents. As we all know HTML elements , along with their containing text and attributes, can
be accessed through the DOM via javascript and then the contents can be modified or deleted, even
new elements can be created dynamically on the fly. The best thing about HTML DOM is the fact that
it's platform and language independent, It can be used by any programming language like Java,
JavaScript, and VBScript.
Now moving along let me show you a simple way i learnt through practice & playing around alot to add
a simple tooltip effect to a DIV element in such a suprising little amount of code.
No more blabber lets begin.
Main
Step 1:
Start a standard webpage HTML document, & in the <body> element begin by adding 2 <div>
elements as so shown below along with their code.
Color and style our 1st DIV Or the element we want to mouse over and get our tooltip effect, it needs
just be a simple block element Note: this doesn't have to be a DIV it can be almost any DOM element
that you can attach onmouseover events to eg; <p>, <span>, <div>, <button> & alike.
Note: the 3 main aspects of our first <div> are onmouseover, onmouseout & onmousemove events.
Also be sure to add these exactly as shown above capitals in Java are case sensitive so be sure it's
exact !
We will go into the code behind the mouse events a little later in this article but the main theory behind
these is that we want to add 3 effects to our element here .....
1: when the user moves the mouse over our DIV we want to show our invisible second DIV element.
2: when the user moves the mouse out of our element we want to hide our second DIV again Or return
it to it's original state of hidden.
3: when the user moves the mouse anywhere around our DIV we need to update it's current point to
the user and display the effect of our DIV following the mouse around, otherwise it would be static and
rather BORINGGGGG !! *smile*
Then the second DIV and code shown below, you'll notice this DIV is our tooltip itself and has many
other style effects the MUST do is add the correct DivId="divTip1" which our functions will be calling &
set the visibility="hidden". You could add these to a CSS style sheet & dynamically set the style but
i've added it directly to the DIV for simplicity sake so to speak.
Step 2:
Finally we simply go back to the top of our HTML page in the <head> element area and add our
javascript for our previously added onmouseover, onmouseout & onmousemove events in our 1st
DIV element remember ?. Well they are the functions showTipz() & hideTipz() as below:
After this try it out, you'll then see your funky new tool tip in all it's glory !
Quickly digging into the above code lets step through the functions:
showTipz() - First we call this on mouse over, we call get element by ID and specify our second DIV
name, then we specify that the element is hidden so set it to visible, we then go onto set the left & top
positioning to +5 pixels offset of the current mouse pointer. You can play around with these figures as
you wish & experiment until your happy. We only then specify mouse out to hide the DIV again & mouse move to basically only just recall the showtipz() function to continually update the position of the DIV relevant to our pointer.
hideTipz() - This is really easy as you can see, all we are doing here is again calling our element by ID,
our second DIV & saying Hide it again Or visibility=Hidden.
And were now done!! Amazing what a small amount of code can achieve, i hope everyone got
something out of this Or it helps you understand the possible advantages of being able to manipulate
the current windows open document with DOM & javascript.
If you want further information any search engine could provide you with literally hundreds if not thousands of additional links & info. Have fun
Conclusion
And that My friends Send messages & feedback please.
Kind regards
mailto:kanedogg@optusnet.com.au
Future Article thoughts:
- .NET email user control (send email to any address via webpage with attachments)
- .NET File Upload control (upload files to username directory on host)
- Any suggestions ??!