Today is . Page created 08/08/02, updated 06/04/06

Translucent Scroller

T his is a sleek, "translucent" scroller. In between message changes, the scroller turns semi transparent (in IE4/NS6+) as the next message slides up to cover the old. A handsome effect you may have seen in the past rendered using Flash, except this isn't! Note: The translucent effect is not visible in NS4 (though scroller functions in it).

W e have tested the code in IE6.0, Firefox1.5.0.3, Opera8.54, Netscape8.1, Netscape4.08 and AOL Explorer1.2. This script worked well in all platforms with variations observed in Netscape4.08, Opera8.54, Netscape8.1 and Opera8.54.

  1. Variations Observed
  2. Netscape4.08 The fading transition is non-existent,
    It just changes from one to another and marquee tags do not work.
  3. Netscape8.1 Marquee tags do not work.
  4. Opera8.54 Effect is not visible.
  5. Degrades well with no error messages.

D epending on your knowledge of HTML and java scripts, this is not a difficult effect to add to your pages. The script itself is a one part copy and paste code that goes into the <BODY> section of your document wherever you want it to appear. Then the reconfigurations are basically minimal to add your links, text, graphics and color of background behind the scroll. Below are where and how to make your reconfigurations.

<script language="JavaScript1.2">

//Translucent scroller- By Dynamic Drive
//For full source code and more DHTML scripts, visit
http://www.dynamicdrive.com
//This credit MUST stay intact for use

var scroller_width=150
var scroller_height=115
var bgcolor='#E0EFD1'
var pause=3000 //SET PAUSE BETWEEN SLIDE (3000=3 seconds)

var scrollercontent=new Array()
//Define scroller contents. Extend or contract array as needed
scrollercontent[0]='Visit our partner site <a
href="http://freewarejava.com">Freewarejava.com </a>for free Java applets!'

scrollercontent[1]='Got JavaScript? <a
href="http://www.javascriptkit.com">JavaScript Kit</a> is the most comprehensive JavaScript site online.'

scrollercontent[2]='Link to Dynamic Drive on your site. Please visit our <a href="http://www.dynamicdrive.com/link.htm">links page</a>.'

scrollercontent[3]='<a
href="URL Path Here"target="_blank"><img src="Path To Your Uploaded Image"border=0 width=?" height="?" alt="?"></a>'

////NO need to edit beyond here/////////////

A s you can notice where the reconfigurations are, you just add regular HTML coding to achieve text, links, graphics etc. To add more than the default of 3, just follow the pattern and numerical order.

W e added one extra scroll as you can notice with number 3. This is to show you how to add a graphic link that will open in a new browser window. The new window is achieved by the attribute of target="_blank" that you will notice in the above coding.

T he way we have this configured so the scroller is situated on the left side with text along side of it is through the use of tables. If you would like to view our source code (top of browser "View" then select "Source") , we have the tables well marked so as you will see how this effect is added into the script.

O ne other option you may want to consider is to put the translucent scroller insides a frameset. Have the script in the sidebar and have the links open either in the main frame or in a new window. You can learn about frames from the below link.
 [ Frames ~ Howto ]

W e hope our tutorial was easy to follow and we covered everything in detail. If you would like to add this effect into your pages, grab the respective below link and you are there. If you have any problems with this or anything else, feel free to consult our [ FAQ ] and if you can't find the answer there, [ contact us ].
[ Get Code Here ]   [ Rate This Page ]  

Talk Live To A Support Technician

Search Our Site By Individual letter

[ A ]  [ B ]  [ C ]  [ D ]  [ E ]  [ F ]  [ G ]  [ H ]  [ I ]  [ J-K ]  [ L ] 
[ M ]  [ N-O ]  [ P-Q ]  [ R ]  [ S ]  [ T ]  [ U-V ]  [ W ]  [ X-Y-Z ] 

Little Tips Directory

[ Page 1  ] [ Page 2 ] [ Page 3 ] [ Page 4 ] [ Page 5  ] [ Page 6  ] [ Page 7  ]

[ Index Page 1 ] [ Index Page 2 ] [ Index Page 3 ] [ Index Page 4 ] [ Index Page 5 ]
[ Index Page 6 ] [ Index Page 7 ] [ Index Page 8 ] [ Index Page 9 ] [ Index Page 10 ]
[ Index Page 11 ] [ Index Page 12 ] [ Index Page 13 ]

[ News Letter Archives ] [ Navigation Page ] [ Archives Of Published Material ]
[ Link To Us ] [ Alphabet Index ] [ Feedback ] [ On Line Support ] [ FAQ ]
[ Webmaster Utilities ] [ Casino ] [ Banner Exchange ] [  Advanced Site Search ]

If you are part of the ever growing number of webmasters who enjoy sharing your knowledge with others on web design, join The Consigliere Ltd. web ring to broaden your scope of exposure.
Join Today

This Site Was Built And Is Maintained Exclusively by
The Webmaster @ Consigliere Ltd.

Copyright © Consigliere Ltd., All Rights Reserved. 2001-