Dynamic HTML Snipplets
DHTML Snipplets
 
The seven Dynamic HTML Snipplets found under the DHTML tab are additional style sheets that can really add spice to your webpages.  These DHTML Snipplets have been formed so that you can customize them to your liking.  All seven Snipplets have names referring to their specific function (i.e., Drop Down Menu Snipplet creates a drop down menu).  You can make modifications and put these Snipplets in your own webpage(s).  Some suggested changes you can make are outlined below.
 
 		Previous Topic  

 

Double click on any of the Snippets and an HTML source code window will appear.  Here you can add additional attributes and alter the Snippets to your heart’s desire.

 

The Snippets included are listed below with brief suggestions for alterations:

 

Drag and Drop Images

This script allows the user to Drag and Drop images within the browser.

 

Suggested Changes:

·        Text within <FONT>

·        Customize Pics in <DIV ID=plane(n)>

 

<BODY onLoad="init()"> 

<CENTER><FONT FACE="Arial" SIZE=5>Flying High on Caffeine</FONT><BR>

<FONT FACE="Arial" SIZE=4>Move a Plane if your browser can handle it !</FONT></CENTER>

<HR WIDTH=300 NOSHADE>

<DIV ID=plane1><IMG NAME="planePic1" SRC="plane1b.gif" BORDER=0 ALT="That Coffee was Strong !"></DIV>

<DIV ID=plane2><IMG NAME="planePic1" SRC="plane2b.gif" BORDER=0 ALT="I should have stopped after the 10th Cup"></DIV>

</BODY>

 

Drop Down Menu 

Creates a drop down menu of text lines, each one a link to a website.

 

Suggested Changes:

·        <A HREF...  Website links and link label (“Link(n)”)

·        #divMenu:  Change the position, size, and color of the Snippet

 

<BODY BGCOLOR="FFFFFF" TEXT="000000" LINK="0000FF" VLINK="0000FF">

<div id="divMenu">

<CENTER><A HREF="http://www.coffeecup.com">Link1</A><br>

<A HREF="http://www.coffeecup.com">Link2</A><br>

<A HREF="http://www.coffeecup.com">Link3</A><br>

<A HREF="http://www.coffeecup.com">Link4</A><br>

<A HREF="http://www.coffeecup.com">Link5</A><br>

<A HREF="http://www.coffeecup.com">Link6</A><br>

<A HREF="http://www.coffeecup.com">Link7</A><br>

<a href="javascript:up()"><IMG SRC="up.gif" WIDTH="15" HEIGHT="15" BORDER=0></a>

<a href="javascript:movemenu()"><B>Menu</B></a>

<a href="javascript:down()"><IMG SRC="down.gif" WIDTH="15" HEIGHT="15" BORDER=0></a></CENTER>

</BODY>

 

Highlight

With Highlight, you can now make links out of TEXT or IMAGES that automatically change border or background color when you place the mouse over them.

 

Suggested Changes:

·        <A HREF...  Website links and link label (“Link(n)”)

·        onmouse(over/out):  Customize colors to your liking

 

<div id="link1" class="fillin">

<!--In the next line, specify the link URL-->

        <A HREF="PUT YOUR LINK HERE" 

onmouseover="CoffeeCup('link1','#FFFFFF')" 

onmouseout="CoffeeCup('link1','#000000')">

        <IMG SRC="1.gif" WIDTH="100" HEIGHT="100" BORDER=0 hspace="10" vspace="10"></a></div>

 

Link Message  

This Snipplet displays a unique message for each of the links listed in the browser. 

 

Suggested Changes:

·        <div id=”startingMsg”>  Type in a starting message 

·        messages[n]:  Type in messages unique to your links

·        <A HREF...  Website links and link label (“Link(n)”)

 

<div id="startingMsg">

Put your starting message here....it will go away when the links are touched.

</div>

messages=new Array(4)

messages[0]="This is a message for LINK #1"

messages[1]="This is a message for LINK #2"

messages[2]="This is a message for LINK #3"

messages[3]="This is a message for LINK #4"

messages[4]=""

<a href="http://www.coffeecup.com" onmouseover="mover(0)" onMouseout="mout(4,0)">Link 1</a><P>

 

Pop Out Text  

The Pop Out Text Snipplet begins as a divit, but then pops out into a message box where you can place links, images, news, and more.

 

Suggested Changes:

·        <B>  Type in a poem or somethin’ in the text box

·        <A HREF=... Change the website link

 

<div ID=poptextDiv>

<FONT FACE="Verdana, Arial" COLOR=000000 SIZE=2><B>You can put anything you want in this text box.  This is a great place to announce news, product descriptions, links, or images.</B><P><TT>Example:</TT><P><IMG SRC="book.gif" WIDTH="25" HEIGHT="25" ALIGN=MIDDLE> Visit the <A HREF="http://www.coffeecup.com/bookstore" onMouseOver="window.status='BookStore '; return true" onMouseOut="window.status=' '">HTML Bookstore !</A></FONT>

<P>  

</div>

<!--Put regular stuff Underneath Here-->

<div ID=maintext>

Click the above divit and a box will appear.

</div>

 

Scrolling Webpage  

This script allows you to place text descriptions of any sort and it will scroll up the page. 

 

Suggested Changes:

·        <font>  Change the font attributes

·        <P>  Customize the text

·        <IMG SRC=...  Use your favorite pics

 

<BODY onload="scroller()">

<CENTER>

<font face="VERDANA, ARIAL" size="5" color=804040>Rolling Credits</font><p>

<font face="VERDANA, ARIAL" size="4">This script allows you to:

<HR WIDTH=350 NOSHADE>

<P>

Place<P> text<P> descriptions<p>

of <P>any <P>sort<p>

and it will <P>scroll up<p>

the page <P>until its done.<p>

<p>

You can even<P> make <A HREF="http://www.coffeecup.com/">Links.</A><p>

Or<p>use<P>images:<p>

<IMG SRC="book1w.gif" WIDTH="60" HEIGHT="45">

<IMG SRC="hat1w.gif" WIDTH="80" HEIGHT="50">

<IMG SRC="safe1w.gif" WIDTH="45" HEIGHT="70">

<p></font>

</CENTER></BODY>

 

Zoom Message 

This will make your messages jump out!  Your words will appear to zoom toward the viewer, getting larger and larger.

 

Suggested Changes:

·        text=new Array  - Type in whatever text you want to zoom

·        var numText=(n) – The number of words (strings) in array  

·        Any of the other parameters (colors, endSize, etc.)

 

//<!--Change this text-->

        text=new Array('www','coffeecup','com','CoffeeCup Software')

//<!--This is the number of words in your message-->

        var numText=4

//<!--These are the colors the last word will fade to.  The first color is the main color.-->

        color=new Array('#000000','#2F2F2F','#4F4F4F','#7F7F7F','#408080')

//<!--This is the total number of colors from above.-->

        var numColors=5

//<!--This is the size you want the zoom to end at.-->

        var endSize=70

//<!--This is the speed you want it to zoom in.-->

        var Zspeed=30

//<!--This is the speed the colors will fade.-->

        var Cspeed=200

//<!--This is the font of the fade in message.-->

        var font='Arial Black'

//<!--This will allow you to have the message stay or go.  True will make it go.

//      False will make it stay.-->

        var hide=false