Digital Design for the Arts and Humanities website

Digital Design homepageDaily Readings for Digitial Design courseDigital Design Course syllabusE-Mail Digital Design StudentsTechnology, Arts, and Media Program homepageSewall Academic Program homepageCU-Boulder homepage

Javascript Design Tricks
   

Assignment: Come to class on Monday, March 13,
with a short description of the larger goal and
focus of your next website.

Assignment: (Do after Class)

1.  Adding Javascript using Dreamweaver MX

  1. Remember most of this javascript code will go
    just before the

    </head> tag  or just below the  <body> tag.

  2. Look at the HTML code for this webpage. 
    See where the

    <head> ... </head>  and <body> ... </body> tags are.

  3. Also locate the HTML code for your page's links. 
    They should look like this:


    <a href="http://www.colorado.edu/">Test links</a>

  4. Remember most of the javascript effects code will be
    contained within these tags:


    <script> ..... </script>


1. Revising your websites

  1. cclewis.com

2. Award-Winning Websites

 

3. Examples of Image Websites

2. Reading and Copying HTML Source Code

  1. Make sure that you know where tags open and close:

    <script> ....</script>

    <body>....</body>

    <head> .... </head>

    <a href= "index.htm">Home Page </a>

4.  Inserting Javascripts into your Webpage
      usingThe Javascript Source Codelifter.com
Nick's Javascript Page
, Free JavaScripts, and
T he HTML Help Guide, Javascript Examples

  1. See Basic Example of a Link Highlighter

  2. See Basic Example of Error in Javascript
    with the message "error in page."

 

  1. Open link in Full Window (the same
    as using the F11 key)


    Code for this trick-- Full Screen 2 Trick
    Put this code right after the </title> tag:


    <SCRIPT LANGUAGE="JavaScript">

    <!-- This script and many more are available free online at -->
    <!-- The JavaScript Source!! http://javascript.internet.com -->

    <!-- Begin
    if (this.name!='fullscreen'){
    window.open(location.href,'fullscreen','fullscreen,scrollbars')
    }
    // End -->
    </script>


    and put this code in the body section after
    the <body> tag

    <a href="JavaScript:window.close(self)">Click here
    to return to normal window size</a>

  2. Open link in Completely Full Window
    (1024 x 768 browser window)

    Code for this trick-- Full Screen Trick
    Put this code in the body, it is a regular link:


    <a href="http://www.cclewis.com/photos/index4.htm"
    target="Console" onclick="if (window.open)
    {Console=window.open(this.href,this.target,
    'toolbar=no,location=no,directories=no,status=no,
    menubar=no,scrollbars=no,resizable=no,
    width=1024,height=768'); return false;} else { return true;}">
    Open link in Full Window</a> <br>

    And put this code in the body section of the
    page you are opening in full size:

    <a href="JavaScript:window.close(self)">Click here
    to return to normal window size</a>

10. Link Mouseover Status Bar Text: Place your cursor over
this link and look at the status bar.


Code for this trick--

<a HREF="http://www.colorado.edu/AmStudies/lewis/Design/javadt.htm" onMouseOver=" window.status='This text will appear in the status bar.'; return true" onMouseOut="window.status=' '; return true"><b>Link Mouseover Status Bar Text:<br>

8. Image Cycling Javascript

-
Sewall Hall Photo Tour

--Sewall Hall Welcome Images

  1. No Right-Click Trick, Another No Right-Click script

    -Example of No Right-Click Page

  2. --Another Example of No Right-Click page

  3. Disabling the My Image Toolbar in Internet
    Explorer 6


  4. --Sewall Hall Welcome Images Example of Warning

  5. See Protecting your Images on the Web A really cool
    "no-right-click" trick Using nested tables, you can "hide"
    an image, and prevent it from being right clicked. When
    someone right clicks your image, they will download
    the blank image. Keep in mind that placing background
    image in tables won't work on some older browsers.
    Also, from an accessibility standpoint, nested tables
    are frowned upon.

    Create a table the same size as the image you wish
    to protect (use absolute values for table width, instead
    of percentages).

    Insert the image you want to protect into the table's
    background ().

    Create a new table within the first table (also known
    as a "nested" table).

    Insert a blank image (a one pixel by one pixel
    transparent image is good) into a table cell in the
    second table. Use , which is a transparent
    gif with a 6 pixel border so that you can see
    it. Download this image -- transgif.gif -- and put
    it as the image in a table where the background image
    of the table is the real image you want to show through.


    --See Example of Image with Transparent Gif Trick

6. Encrypted Password Protection Trick

-Example of Password Protected Page
The password is "cclewis"

7. Stripped-down version of my Image Swapping webpage

  1. Open this webpage in Internet Explorer.  Go to 
    "View" and select "Source."  Copy all of the
    HTML Source code for this page.

  2. Copy the source code for this page and paste
    it into a blank Dreamweaver Page

  3. Using Dreamweaver, copy the HTML Source code 
    for my "Javascript effect" and paste it into the
      HTML Source code for your page.

  4. After you have copied the HTML Source code from 
    my page to yours, check to see if all the code copied
    properly.  Does it look the same in your HTML 
    Source code as it does in mine?

  5. After class, find four of your own images and add
    their names to this code, so that this file will come
    up with your photos instead of mine.

 Here is the code for one of the image swap mouseovers:

<ahref="#"onMouseOver="MM_swapImage
('title','','Reece2c.jpg',1)"
>

Photo1</a>

7. Static Background trick

  1. Example of Static, non-scrolling Background

  2. Static background Image trick

8. Download Codelifter.5. This shareware program
lets us see the code on a webpage that you want to
copy.

9. Image Javascript Effects for Photo Slideshows

  1. Slider Applet for Image Slideshow

  2. Image Slideshow javascript

  3. Image Slideshow Effects

  4. More Javascript Image Tricks

  5. More Advanced Image Effects

  6. Advanced Push-Button Slideshow effect

  7. Advanced Slide Show with Captions and Cross-Fade

  8. Dynamic JavaScript Slide show with Cross-Fade

8. Using Javascript Behaviors in Dreamweaver:

     Use Free JavaScripts, Codelifer 5.0 , Java Applets

  1. Java and Javascript are not the same thing.
    Javascript is a scripting language that is used
    to set the properties of a webpage.  Java
    is a compiling programming language that
    is used to develop program applications.

  2. You can use "Behaviors" window in 
    Dreamweaver to insert javascript behaviors
     into your webpage

  3. But in order to use the "Behaviors" window,
     you must first download the behavior from
    the Macromedia Exchange website

9. . Adding Javascript using Macromedia
      Extension Manager

  1. Go to Dreamweaver Exchange to download
    javascript behaviors

  2. In order to download extensions, you
    must have Macromedia Extension Manager
    on your computer

  3. To Download Extensions Manager 1.6

  4. Installing Extensions in Dreamweaver

  5. Use the Behaviors Tools window to add javascript effects
    to your page.

  6. Use example of "Text Link Rollover"

  7. In Dreamweaver, use "Insert" and select "TextRollover"

  8. Example of Text Link Rollover using Dreamweaver
10. Adding more than one Javascript Effect to a page
  1. So what's the problem: Adding mulitple
    javascript code to one page

  2. Adding more than one javascript trick to a page
One event handler, many javascript actions

EXAMPLE #1:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: <body onload="dothat()">
RESOLUTION: <body onload="dothis();dothat()">


EXAMPLE #2:
SCRIPT 1: <body onload="dothis()">
SCRIPT 2: window.onload=dothat()
RESOLUTION: <body onload="dothis();dothat()">


EXAMPLE #3:
SCRIPT 1: window.onload=dothis
SCRIPT 2: window.onload=dothat
RESOLUTION: <body onload="dothis();dothat()">
  1. Example of Webpage with running clock

    <body onLoad="show5()">

  2. Example of Clock counting the time until
    Springbreak

    <body onLoad="getTime()" >

  3. Example of Two Javascripts on the same webpage


<body onLoad="getTime();show5()">

  1. In order for two javascripts to work on the
    same page if they both use the "onLoad"
    command, you must combine them.  If you
    put in two separate "onLoad" commands,
    one of the javascripts won't work.

    <body onLoad="show5()">
    <body onLoad="getTime()" >

  2. You combine the two onLoad commands by
    inserting the onLoad instructions in one
    command string, and separate each onLoad
    command by a semi-colon. 

  3. Notice that the combined onLoad commands
    are now contained with quotation marks.  If
    you put quotation marks around each of
    the onLoad commands, your javascript
    won't work.

<body onLoad="getTime();show5()">

  1. Example of Webpage with running clock

  2. //change font size here to your desire
    myclock="<font color='000000' size='5' face='Arial' ><b><font size='5'>Current Time:</font></br>"+hours+":"+minutes+":"
    +seconds+" "+dn+"</b></font>"

    5. Really Annoying Javascript Tricks website

    1. ---Roaming Cursor Trick Webpage

    2. --Annoying Eyes Trick Webpage

    3. --Annoying Blinking Links Webpage

    6. Javasript code for Basic Hit Counter

            <!--#exec cgi="/cgi-bin/counter"-->

    <br>Number of Visitors to this site:&nbsp; </font><!--#exec cgi="/cgi-bin/counter"--></b>

    Example of Hit counter:


    Number of Visitors to this site:  88953



    6. Javasript code for Basic Hit Counter

        <!--#exec cgi="/cgi-bin/counter"-->

<br>Number of Visitors to this site:&nbsp;
</font>
<!--#exec cgi="/cgi-bin/counter"-->
</b>

Example of Hit counter:


Number of Visitors to this site: 
88954

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Good Web Design Sites
Award-winning Web Designs
Great Web Design Books
Sewall Class Web Designs

| Home Page  | Readings | Syllabus | Web Resources | Top of Page |

Number of Visitors to this site: 
88955      by Chris H. Lewis, Ph.D.

© 2000 by Chris H.  Lewis, Ph.D.
Sewall Academic Program; University of Colorado at Boulder
Created 1 June 2000:  Last Modified: 13 March, 2006
E-mail: cclewis@spot.colorado.edu
URL:    http://www.colorado.edu/AmStudies/lewis/Design/javadt.htm

Digital Design Course homepage