Hovering HTML Windows and Animated Hovering Using JavaScript

By Jonathan Campbell

You have probably seen many web sites with windows that seem to appear out of nowhere on the screen. Often if you just mouse over something, a custom window will pop-up near the mouse-over position of your screen pointer. This is done with an HTML tag called <SPAN used along with JavaScript. Also you have probably seen animations and images within HTML pages that seem to appear and hover over the whole page; that also is done with this <SPAN and JavaScript animation method. It is important to know general JavaScript to animate <SPAN windows within HTML pages, but you can use my example below for most <SPAN tag animations.

This article gives a sort of advanced example, but it really only covers some of the capabilities of <SPAN animations. The possibilities of what you can animate with this <SPAN element to do windows-within-windows on HTML pages is only limited by the capabilities of HTML and JavaScript itself. In future articles I'll hopefully cover some more interesting <SPAN window animations. So of course now you want to know how you can implement this into your pages right? So let's get started with the HTML source code of our example...here it is:

<HTML>
<title>HTML Span element animation example - J.D. Campbell</title>
<page> 
 
<center><h2>This is a &lt;SPAN dynamic HTML animation window-in-window example...</h2></center> 
<center><h3>This is a &lt;SPAN dynamic HTML animation window-in-window example...</h3></center> 
<center><h4>This is a &lt;SPAN dynamic HTML animation window-in-window example...</h4></center> 
<center><h5>This is a &lt;SPAN dynamic HTML animation window-in-window example...</h5></center> 
<center><h6>This is a &lt;SPAN dynamic HTML animation window-in-window example...</h6></center> 
  
<SPAN ID="winbox1" STYLE="position:absolute; top:50; left:50; height:190px; width:150px; background=blue;">
<table border=1 cellspacing=0 cellpadding=0> 
<tr><td> <IMG SRC="http://www.jdcampbell.com/demo2/anim2.gif" WIDTH="109" HEIGHT="123"> </td></tr> 
<tr><td><font size=3 color=yellow> This is some standard text, how do you like the dynamic &lt;SPAN animation? </font></td></tr> 
</table>
</SPAN>
</page> 
</HTML>
<SCRIPT LANGUAGE="JavaScript"> 
var posx=50; var posy=350; 
setInterval("MoveOver()",500); 
 
function MoveOver() { 
  posx += 50;  posy -= 20; 
  document.getElementById("winbox1").style.left = posx; 
  document.getElementById("winbox1").style.top = posy; 
} 
 
</SCRIPT>
You can see the above code in action by clicking on this link. Note that in the above example the <SPAN tag starts with an element ID named "winbox1"; this is crucial to the operation of the animation because the JavaScript changes the position of the <SPAN window and the JavaScript must be able to reference the <SPAN by it's ID. Additionally two of the most important properties are the Style properties top and left, as these control the position of the <SPAN at any given time. You will notice in the <SCRIPT section where you have the following lines:
document.getElementById("winbox1").style.left = posx;
document.getElementById("winbox1").style.top = posy;
As you can see these JavaScript statements above set the style.left and style.top properties of the "winbox1" <SPAN element. How is this animated gradually across the screen? Well the easy little statement setInterval("MoveOver( )",500) causes a permanent timer interval to call the MoveOver( ) function every 500 milliseconds, and the MoveOver( ) function is what does the movement of the <SPAN window as you can see causing the fly-over animation across the screen.

Now for really interesting animations, you can manipulate the visibility property of the <SPAN element, even as well control the opacity property to make the image or text within the <SPAN element seem slightly transparent so the underlying text/graphics of the main HTML page is visible right through the <SPAN window contents. The visibility property allows you to cause the <SPAN window to appear and disappear as you wish, you will need to use JavaScript to control the visibility of the <SPAN by means of the visibility property.

As you can see in our example above we have placed an HTML <Table within the <SPAN window element and the <Table contains both an animated GIF as well as basic HTML text. There is no limit with what you can actually put within the <SPAN window element, for the most part. And the <SPAN window can be as large as the whole HTML page too so you can cause the <SPAN to instantly appear and cover most of the main page with the <SPAN window HTML graphics/text if you wish, then of course disappear when you wish by clicking on a little button or hyper-link containing JavaScript and an onClick event within the button or hyper-link.

As stated, you must use a JavaScript function with the setInterval( ) command in order to do these animations. Take a look at the JavaScript function I used above; here it is:
function MoveOver( ) {
   posx += 50;  posy -= 20;
   document.getElementById("winbox1").style.left = posx;
   document.getElementById("winbox1").style.top = posy;
}
This function is very simple...the variables posx and posy are simply incremented with the += operator every time the MoveOver( ) function is called, and of course the setInverval( ) command calls the MoveOver( ) function at regular intervals per the time in milliseconds you specified in the setInverval( ) statement.

As well you should note that the actual <SPAN tag element has the STYLE=" " attribute with position/top/left/height/width/background properties specified. You definitely need this STYLE attribute when doing <SPAN windows, however the properties you set within the STYLE attribute are a bit more flexible. You actually only need the position:absolute and most of the time top/left set as well. In fact there is another option of using position:relative but that is more complicated as it requires you to somehow figure what HTML parent element the <SPAN is enclosed within--then the whole animation positioning becomes more complicated, so in general the position:absolute is best as that specifies that you want the top/left position of the <SPAN to be absolute according to the whole html page's X/Y coordination. Here is the <SPAN main tag for your review, and I included the background=blue property in my example but that is of course completely optional:

<SPAN ID="winbox1" STYLE="position:absolute; top:50; left:50; height:190px; width:150px; background=blue;">
Now you should be a very successful beginner at animated windows-within-windows on HTML pages using the <SPAN element method, and compared to most Web designers you are now a great professional if you have mastered this tutorial. You may notice in some web sites that windows appear and gradually grow from a small little thing to a larger visible window containing often some helpful hint/text or something, those are also <SPAN windows, and that is done by using JavaScript and timers that gradually grow the height/width properties of the <SPAN element. As well you can have fancy rounded borders on these <SPAN windows, you can make them gradually appear and then slowly disappear with opacity control, etc. Please feel free to leave comments on this article, I'll try and get back to you with answers promptly if possible. In a future article I will cover some of these other more advanced techniques with <SPAN windows... Cheers!!!

Make a Comment

Loading Comments...

  • Web Development Newsletter Signup

    Invalid email
    You have successfuly registered to our newsletter.
  •  
  •  
  •