<1>Insert Part 1 in between <HEAD>and</HEAD> tags, insert Part 3 in wherever in body of your document. Change YOUR IMAGE FILE TO BE EXPOSED, YOUR WIDTH, YOUR HEIGHT, YOUR TEXT and YOUR IMAGE FILE(s). You can also change attributes and position (left, top, ...). Dimensions of all images should be the same!
There are six hidden hotspots on this page. Move your mouse around until all six are exposed.
<!--END YOUR TEXT-->
<End>
"Highlighted Links"
<1>Text - Links get highlighted.Insert Part 1 in between <HEAD>and</HEAD> tags, insert Part 3 in wherever in body of your document. Change YOUR URL and YOUR DESCRIPTION. You can also change font attributes and position (left, top, color...)
<1>Images are not animated gifs. Just insert your .jpg (yes .jpg) or .gif instead of YOUR IMAGE FILE, YOUR WIDTH, YOUR HEIGHT, YOUR URL and YOUR DESCRIPTION. Insert Part 1 in between <HEAD>and</HEAD> tags, insert Part 2 inside your body code. An example is:<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onload="cycle()"> or <BODY onload="cycle()">. Insert Part 3 in wherever in body of your document.
<h4>Images for menu bar are loading...please wait</h4>
</DIV>
</LAYER>
<DIV id=title1>
<h2><a href="YOUR URL #1">DESCRIPTION #1</a></h2>
</DIV>
<DIV id=title2>
<h2><a href="YOUR URL #2">DESCRIPTION #2</a></h2>
</DIV>
<DIV id=title3>
<h2><a href="YOUR URL #3">DESCRIPTION #3</a></h2>
</DIV>
<DIV id=title4>
<h2><a href="YOUR URL #4">DESCRIPTION #4</a></h2>
</DIV>
<DIV id=title5>
<h2><a href="YOUR URL #5">DESCRIPTION #5</a></h2>
</DIV>
<DIV id=title6>
<h2><a href="YOUR URL #6">DESCRIPTION #6</a></h2>
</DIV>
<End>
"Animation on Path"
<1>Image is not an animated gif. Just insert your .jpg (yes .jpg) or .gif instead of YOUR IMAGE FILE, YOUR WIDTH, YOUR HEIGHT. Insert Part 1 in between <HEAD>and</HEAD> tags, insert Part 2 inside your body code. An example is:<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onLoad="init()"> or <BODY onLoad="init()">. Insert Part 3 in wherever in body of your document.
<2><SCRIPT LANGUAGE = "JavaScript">
bName = navigator.appName;
bVer = parseInt(navigator.appVersion);
if (bName == "Netscape" && bVer == 4) ver = "n";
else if (bName == "Microsoft Internet Explorer" && bVer == 4) ver = "ie";
function init() {
if (ver == "n") {
pic = document.picDiv
pic.xcor = pic.left
pic.ycor = pic.top
}
else if (ver == "ie") {
pic = picDiv.style
pic.xcor = pic.pixelLeft
pic.ycor = pic.pixelTop
}
pic.pathx = new Array(64,78,105,146,203,263,334,392,432,463,476,466,445,416,385,352,344,343,319,279,272,276,273,244,202,167,132,107,78,54)
pic.pathy = new Array(74,102,135,159,186,197,203,207,185,154,121,80,64,57,59,81,109,138,153,140,114,89,53,43,42,45,54,35,26,52)
//Control Panel for Variables
pic.pathcor = 0 //don't change
pic.active = 1 // set to 1 to begin when page loads
pic.pathloop = 1 // set to 1 to loop, 0 not to loop
speed = .01 // time between points in seconds
picpath()}
function picpath() {
if (pic.active && pic.pathcor < pic.pathx.length) {
<1> Insert Part 1 in between<HEAD> and </HEAD> tags, insert Part 2 inside your body code. An example is:<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onLoad="init()"> or <BODY onLoad="init()">.Insert Part 3 wherever in body of your document. Change YOUR IMAGE FILE, YOUR WIDTH, YOUR HEIGHT, YOUR TEXT.
Here's the pull down menu for both 4.0 browsers. This is a very simple example of what can be done with pop-out menus.
</font>
</div>
<End>
"Popout Menu #2"
<1>Insert Part 1 in between<HEAD> and </HEAD> tags, insert Part 2 inside your body code. An example is:<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onLoad="init()"> or <BODY onLoad="init()">.Insert Part 3 wherever in body of your document. Change YOUR IMAGE FILE, YOUR WIDTH, YOUR HEIGHT, YOUR TEXT.
<2><script language="JavaScript1.2">
if (document.layers) {n=1;ie=0}
if (document.all) {n=0;ie=1}
function init() {
if (n) tab = document.tabDiv
if (n) poptext = document.poptextDiv
if (ie) tab = tabDiv.style
if (ie) poptext = poptextDiv.style
}
var tabShow=1;
//Hide-Show Layer
function hidepoptext() {
if (tabShow == 1) {
if (n) {
tab.visibility = "hide";
tab.left = 0;
tab.visibility = "show";
poptext.visibility = "hide";
tabShow = 0;
return;
}
if (ie) {
tab.visibility = "hidden";
tab.left = 0;
tab.visibility = "visible";
poptext.visibility = "hidden";
tabShow = 0;
return;
}
}
if (tabShow == 0) {
if (n) {
tab.visibility = "hide";
tab.left = 223;
tab.visibility = "show";
poptext.visibility = "show";
tabShow = 1;
}
if (ie) {
tab.visibility = "hidden";
tab.left = 223;
tab.visibility = "visible";
poptext.visibility = "visible";
tabShow = 1;
}
}
}
</script>
<style>
<!--
#tabdiv {
position:absolute;
top:20px;
left:223px;
z-index:2;
visibility:show;
}
#poptextdiv {
visibility:show;
position:absolute;
width:223px;
top:10px;
left:0px;
z-index:0;
border-color:#000099;
border-width:2px;
background-color:#eeeeff;
color:black;
padding:10 5 10 5;
z-index:1;
}
#maintext {
position:absolute;
top:30px;
left:40px;
width:670px;
z-index:0;
}-->
</style>
<3><body onLoad="init()">
<4><div ID=maintext>
This is a very simple example of what can be done with pop-out menus.
This is a very simple example of what can be done with pop-out menus.
This is a very simple example of what can be done with pop-out menus.
This is a very simple example of what can be done with pop-out menus.
This is a very simple example of what can be done with pop-out menus.
Pop Out text appears here. This DIV can contain graphics or text or any other HTML element you would like to include. By placing several popout menus like this down the side of the screen you can make large amounts of information available to people only when they need it. Being able to customize an interface like this is yet another demonstration of the power in DHTML.
<1>This DHTML script moves your image over screen. Image is not an animated gif. Just insert your .jpg (yes .jpg) or .gif instead of YOUR IMAGE FILE, YOUR WIDTH, YOUR HEIGHT and YOUR ALT TEXT. Insert Part 1 in between<HEAD> and </HEAD> tags, insert Part 2 inside your body code. An example is:<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onload="moveLayer(document.layers['ie_gear'],-4,-4,4,20)"> or <body onload="moveLayer(document.layers['ie_gear'],-4,-4,4,20)">. Insert Part 3 in wherever in body of your document.
<2><script language="JavaScript">
function moveLayer(lyr,xadder,yadder,xend,timer) {
<1>Insert Part 1 in between<HEAD> and </HEAD> tags, insert Part 2 inside your body code. An example is:<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onLoad="init()"> or <BODY onLoad="init()">.Insert Part 3 wherever in body of your document.Change YOUR IMAGE FILE, YOUR WIDTH, YOUR HEIGHT, and eventualy Link Text (Go To) Layer 1, (2),(3).
<2><SCRIPT LANGUAGE="JavaScript"> //Define global variables
var totalLayersInLoop=3;
var layerNumShowing=1;
function init(){
if (navigator.appName == "Netscape") {
layerStyleRef="layer.";
layerRef="document.layers";
styleSwitch="";
}else{
layerStyleRef="layer.style.";
layerRef="document.all";
styleSwitch=".style";
} }
function showLayerNumber(number){
var layerNumToShow=number;
hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow; }
function showPreviousLayer(){
var layerNumToShow=layerNumShowing-1;
if (layerNumToShow < 1){layerNumToShow=totalLayersInLoop;}
hideLayer(eval('"layer' + layerNumShowing+'"'));
showLayer(eval('"layer' + layerNumToShow+'"'));
layerNumShowing=layerNumToShow; }
function showNextLayer(){
var layerNumToShow=layerNumShowing+1;
if (layerNumToShow > totalLayersInLoop){layerNumToShow=1;}
<A HREF="javascript:showLayerNumber(1)">Go To Layer 1</a> <BR>
<A HREF="javascript:showLayerNumber(2)">Go To Layer 2</a> <BR>
<A HREF="javascript:showLayerNumber(3)">Go To Layer 3</a> <BR> </DIV>
<End>
"Preview"
<1>Contest or Preview of your page. Insert Part 1 in between<HEAD> and </HEAD> tags, insert Part 2 inside your body code. An example is:<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onLoad="init()"> or <BODY onLoad="init()">.Insert Part 3 wherever in body of your document. Change YOUR IMAGE FILE, YOUR WIDTH, YOUR HEIGHT, YOUR TEXT.
<2><!--This is the Seq Remember 15=1.5 seconds-->
<SCRIPT LANGUAGE = "JavaScript">
//don't change
function startSeq(SeqNumber) {
Time[SeqNumber] = 0;
SeqController(SeqNumber);
}
//dont't change
function stopSeq(SeqNumber){
Time[SeqNumber] = Seq[SeqNumber].length;
}
//don't change
function SeqController(SeqNumber) {
if (Time[SeqNumber] <= Seq[SeqNumber].length - 1) {
<1>This script enables you to drag text and (or) image (.gif).Insert Part 1 in your head tags and Part 3 in body of your document. Change YOUR IMAGE FILE, YOUR WIDTH, YOUR HEIGHT, YOUR TEXT.
<1>This script enables you to drag image (.jpg). Insert Part 1 in your head tags and Part 3 in body of your document. Change YOUR IMAGE FILE.
<2><STYLE TYPE="text/css">
<!--
#iegear {
position: absolute;
left: 100;
top: 100;
layer-background-image: url(YOUR IMAGE FILE);
width: 82;
clip: rect(0 82 82 0)
}
-->
</STYLE>
<3>
<4><DIV ID="iegear"></DIV>
<SCRIPT LANGUAGE="JavaScript1.2">
<!--
currentX = currentY = 0;
function grabGear(gear) {
currentX = gear.pageX;
currentY = gear.pageY;
captureEvents(Event.MOUSEMOVE);
onmousemove = moveGear;
}
function moveGear(gear) {
distanceX = (gear.pageX - currentX);
distanceY = (gear.pageY - currentY);
currentX = gear.pageX;
currentY = gear.pageY;
document.iegear.moveBy(distanceX,distanceY);
}
function dropGear() {
releaseEvents(Event.MOUSEMOVE);
}
document.iegear.document.onmousedown = grabGear;
document.iegear.document.onmouseup = dropGear;
//-->
</SCRIPT>
<End>
"Mouse Over Text"
<1>Text changes color and becomes link on MoseOver. Insert Part 1 in your head tags and Part 3 in body of your document. Change YOUR LINK and DESCRIPTION. Important: DESCRIPTION (Text) must be the same.
<1>Insert Part 1 in your head tags and Part 3 in body of your document. Change YOUR IMAGE FILE and YOUR TEXT. You can also change positin and size attributes as are top, left...
<1>Titles get highlighted, decriptions get appeared. Insert Part 1 in between <HEAD>and</HEAD> tags, insert Part 3 in wherever in body of your document. Change YOUR TITLE and DESCRIPTION. You can also change font attributes (font-size, color...)
<2><STYLE>
BODY
{font-family: Impact;
font-size: 18pt;
text-indent: 20;
line-height: 200%;
background: black;
color: white;}
H1
{font-size: 32pt;
color: green;}
.over
{font-size: 20pt;
color: red;
</STYLE>
<3>
<4><H1 ALIGN=CENTER>YOUR TITLE</H1>
<DIV onMouseOver="this.className='over';
Description.innerText='DESCRIPTION #1'"
onMouseOut="this.className=''; Description.innerText=' '">YOUR TITLE #1</DIV>
<DIV onMouseOver="this.className='over';
Description.innerText='DESCRIPTION #2'"
onMouseOut="this.className=''; Description.innerText=' '" >YOUR TITLE #2</DIV>
<DIV onMouseOver="this.className='over';
Description.innerText='DESCRIPTION #3'"
onMouseOut="this.className=''; Description.innerText=' '">YOUR TITLE #3</DIV>
<DIV ALIGN=Left ID="Description" > </DIV>
<End>
"Resizing image with link"
<1>On mose over image gets "bubbled". It can be either .jpg or .gif. It's also a link. Insert Part 1 in between <HEAD>and</HEAD> tags, insert Part 3 in wherever in body of your document. Change YOUR IMAGE FILE, YOUR WIDTH, YOUR HEIGHT and YOUR URL.
<1>Insert Part 1 in between <HEAD>and</HEAD> tags, insert Part 2 inside your body code. An example is:<BODY BGCOLOR="#FFFFFF" TEXT="#000000" LINK="#FF0000" VLINK="#000080" ALINK="#000080" onLoad="init()"> or <BODY onLoad="init()">. insert Part 3 in wherever in body of your document. Change YOUR IMAGE FILE, YOUR WIDTH, YOUR HEIGHT. You can also change and position (left, top, ...).
<1>Image is not animated gif. Just insert your .jpg (yes .jpg) or .gif instead of YOUR IMAGE FILE. Important: YOUR WIDTH DAC and YOUR HEIGHT DAC are dimensions DAControl used in this script and your Image should fit in frame of DAControl. Insert Part 1 in between <HEAD>and</HEAD> tags and Part 3 in body of your document.
<2><SCRIPT LANGUAGE="JScript">
<!--
if (window.top.frames.length!=0 && window.top.frames[0].ShowNoButtons!=null)
<1>Cool menu bar with client side image maps. You should create your image maps. The easiest way is to use same dimensions for image, same filename and mapname as they are already set within this script and change COORDINATES only, adding your links (URL1, URL2....). Sample image is included. Insert Part 3 as your body.
<1>Cool menu bar with client side image maps on right side of screen. Apearance is different than menu on left side. You should create your image maps. The easiest way is to use same dimensions for image, same filename and mapname as they are already set within this script and change COORDINATES WITH LINKS only, adding your links (URL1, URL2....). Sample image is included. Insert Part 1 between <HEAD>and</HEAD>, insert Part 2 inside your body code. An example is:<BODY onLoad="StartGlide()" BACKGROUND="graphics/backgrnd.gif" TEXT="White" LINK="#2576CF" VLINK="#000080"> or <BODY onLoad="StartGlide()"> . Insert Part 3 in your body.
<2><STYLE TYPE="text/css">
#text {
POSITION: absolute;
Z-INDEX: 1;
width: 175;
LEFT: 10px;
TOP: 10px;}
</style>
<SCRIPT LANGUAGE="JScript">
var id;
function StartGlide(){ document.all.Banner.style.pixelLeft =
document.body.offsetWidth;
document.all.Banner.style.visibility = "visible";
id = window.setInterval("Glide()",50);} //controls speed
<1>Cool logo with two pictures. It is not animated GIF! You can use either GIFs or JPGs. Insert Part 1 in between <HEAD>and</HEAD> tags, Part 2 within your <BODY> tag. An example is:<BODY onload="init()" BACKGROUND="graphics/backgrnd.gif" TEXT="FFFFFF" LINK="#2576CF" VLINK="#000080"> or <BODY onload="init()">. Insert Part 3 in body of your docment. Replace YOURPIC1, YOURPIC2, YOURPICWIDTH and YOURPICHEIGHT
<2><SCRIPT LANGUAGE="JAVASCRIPT">
<!--Variable initalization-->
presents=new Image();
presents.src="rem.gif";
presents=new Image();
presents.src="newadventures.gif";
var pwhratio = 164/53; //ratio of width to height for REM image
var nwhratio = 400/53; //ratio of width to height for NewAdventures image
var increment = 8;
var step = 24; // number of increments required to grow to full size (188 / 4)
<1>This script flips three bars with links. The time controls are in the onload commmand in the BODY tag. Default is 5 seconds(5000 miliseconds) between page flips and can be changed. You can also play with position of your bars and fonts changeig them within "<div style... >" and "<div ID...>" lines. You have to change your urls(URL_1_1, URL_1_2...) and your descriptions(DESCRIPTION_1_1, DESCRIPTION_1_2...). Insert Part 1 in between <HEAD>and</HEAD> tags, Part 2 as your <BODY> tag and Part 3 in body of your document.
<2<!--Rotating Ticker Script-->
<SCRIPT LANGUAGE="JavaScript">
<!--
var bName = navigator.appName;
var bVer = parseInt(navigator.appVersion);
var NS4 = (bName == "Netscape" && bVer >= 4);
var IE4 = (bName == "Microsoft Internet Explorer" && bVer >= 4);
<1>This script uses blend transitons. It looks realy cool. You can set either GIFs or JPGs. Try changing parametars in "<div id...>" line adjusting them according to dimensions of your images. Insert Part 1 between your <HEAD>and</HEAD> tags and Part 3 in body of your document. Replace IMAGE1 and IMAGE2 with your files.
<1>This script uses Reveal Transitons. There are 23 different filters and you can change value of transition from 0 to 22. Value 23 sets filters randomly. It's part of "<div id..." line in brackets and it's set as circle: "...(transition=3,duration=8)">". You can set either GIFs or JPGs. Try changing parametars in "<div id...>" line adjusting them according to dimensions of your images. Insert Part 1 between your <HEAD>and</HEAD> tags and Part 3 in body of your document. Replace IMAGE1 and IMAGE2 with your files.
<1>This script changes colors of your text. Insert Part 1 between your <HEAD>and</HEAD> tags, Part 2 in your <BODY> tag and Part 3 in body of your document. Change YOUR TEXT HERE!.
<1>Text is being appeared by clicking on submenu. Formating and text attributes can be applayed. With litlle bit of your imagination, you can easily edit this cool script and adjust it on the way u need it. U should replace YOUR TITLE, Sub Title 1, Sub Title 2... Your text... and Your List Item... at least. Insert Part 1 in between your <HAED>and</HEAD> tags, Part 2 within your <BODY> tag and Part 3 in body of your document.
<2><!--YOU CAN CHANGE FORMATING ATTRIBUTES BETWEEN STYLE TAGS-->
<1>Insert Part 1 between yor <HEAD>and</HEAD> tags, Part 2 within <BODY> tag and Part 3 in body of your document. Replace YOURIMAGE, YOURWIDTH and YOURHEIGHT
<1>Text is being replaced directly on your Web page. Insert Part 1 between yor <HEAD>and</HEAD> tags, Part 2 within <BODY> tag and Part 3 in body of your document. Replace YOUR TEXT with your text.
