SHARE

Hovering HTML Windows and Animated Hovering Using JavaScript

Written By

Nov 11, 2008

3 minute read

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

This article gives a sort of advanced example, but it really only covers some of the capabilities of

<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

As you can see in our example above we have placed an HTML

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 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!!!

Hovering HTML Windows and Animated Hovering Using JavaScript

Jonathan Campbell

Company

Categories