|
EXAMPLE
1) Insert the following code in the <HEAD> section of the page.
2) Insert
the following script in the <HEAD>, between <HEAD> and <BODY>
or in the <BODY> section of the page.
3) Insert the following HTML code anywhere
inside the <BODY> section.
This is how the script works:
There are 4 sections in the HTML document:
1) the <STYLE> section
2) the script section
3) the rotating images/text section
4) the popup text section
In the <STYLE> section you define the
font-family, font size, font color and position of the popup text (style class .text).
If you decide to use rotating text instead of the images you define the font
variables for the text in the style class .circle:
<style>
<!--
.circle { font-family: Verdana, Helvetica; font-size: 12px;
color: #000000;
position: absolute; visibility: hidden; z-index: 2 }
.text { text-align: left; font-family: Verdana, Helvetica;
font-size: 12px; color: #000000;
position: absolute; top: 365px; left: 255px; width: 225px;
visibility: hidden; z-index: 0 }
In the script section you define the size of the
radius of the circle, the position and the speed of the rotating images/text:
// Variables for rotating
images/text //
var objects;
var pos;
// radius size
var r = 150;
// horizontal position
var xoff = 320;
// vertical position
var yoff = 350;
var pi = Math.PI;
// the higher the number the
slower the speed of rotation
var inc = pi / 180;
In the rotating images/text section you assign
the images/text and the hyperlinks:
<div id="circle1"
class="circle">
<a href="http://simplythebest.net/software/" onmouseover="showObject(text1)" onmouseout="hideObject(text1)"><img
src="images/shareware.gif"
border="0" width="111"
height="29"></a><br>
</div>
<div id="circle2" class="circle">
<a href="http://simplythebest.net/scripts/"
onmouseover="showObject(text2)" onmouseout="hideObject(text2)"><img
src="images/dhtml_scripts.gif"
border="0" width="111"
height="29"></a><br>
</div>
and so forth...
In the popup text section you
define the text that pops up with each rotating image/text:
<div id="text1"
class="text">
<p align="center"><b>Simply the Best<br>
Shareware & Freeware</b><br>
Business<br>
Graphics<br>
Programming<br>
Utilities<br>
Web utilities<br>
Home and Hobby</p>
</div>
<div id="text2" class="text">
<p align="center"><b>Simply the Best<br>
Scripts</b><br>
DHTML Scripts<br>
Javascripts</p>
</div>
and so forth...
|
