They are very effective elements to make exciting web pages. On the Net it's possible to find
many kinds, mostly to buy. Here there are five styles easy to embed in an html page.
Simply follow the instructions.
Vertical Text Scroller |
|||
Slide Scroller
Slide 2This image contains a link to the top of page. on mouse over stops scrolling 
Slide 3An example of what can displayed in this windowon mouse over stops scrolling Horizontal Text ScrollerVertical Slide Show
|
|||
Slide Showby JavascriptKit.com |
|||
Ajscroller is a vertical scroll window, resizeable, for text and tags html by
navsurf.com, it also contains play, stop, fast and slow buttons,
embedded into a table easy removable. Two are the scripts provided by navsurf.com:
ajlib.js and
ajscroller.js. A third script
must contains object's data and may be created by
this
utility.
Insert these instructions before the tag </head>:
QScroller by latenight-coding.com, is a sophisticate script which can generate several kinds of verticat and horizontal scroll windows. Needed files are: qscroller.js , mootools.js and qscroll2.js, in addition to the stylesheet qscroller.css. The script qscroll2.js must be downloaded and copied in to the same directory where is the html page.
Slide Scroller supports text and images, both with the possibility of links. Like the others, scroling is stopped on mouse over and starts again when mouse leaves the window. In the script qscroll2.js it's possible to change the persistence time, (duration, currently 1500 mS).
To embed the QScroller windows, insert before the tag </head>:
Then prepare the images that will displayed, all in the format 130 x 173, and insert they in the sub-directory img (use ImgMicroWiz to resize images).
To create the HTML code to be inserted in the web page, use this other utility.
A second kind of QScroller is an horizontal scroll window for hyper-text, his size may be changed in the stylesheet qscroller.css, ( #qscroller1 - width:320; height:21). The script qscroll1.js must be downloaded and copied in the same directory of the HTML page where it is called.
To embed this window, insert before </head> tag the same instructions of the previous example. The HTML code to be inserted after the tag <body> may be automatically generated using this further utility.
Third kind of window generated using QScroller is a Vertical Slide Show, very nice. Size of the images is 205 x 137 (use ImgMicroWiz to resize images).
Also to embed this object must insert before the tag </head> the same instructions of the previous two examples, furthermore must download and copy in the same directory of the HTML page, the script qscroll3.js.
The HTML code to insert after the <body> tag, may be automatically generated by using this further more utility.
In the script qscroll3.js it's possible to change the parameters: duration(mS), pause(mS) and autostart(true/false).
Last example has been realized with the script Flashyslideshow by javascriptkit.com - a classic slide-show with images and short text inside a coloured frame.
To embed the Flashyslideshow window, insert before the tag </head>:
A second script, myflashydat.js, contains object's data and has to be embed in the html page, after the <body> tag, where the slide-show must be displayed. The script Flashydat.js may be created using this last utility.
Insert these instructions before the tag </head>:
<script type="text/javascript" src="http://navsurf.com/dhtml/ajscroller/ajlib.js"></script>
<script type="text/javascript" src="http://navsurf.com/dhtml/ajscroller/ajscroller.js"></script>
Inside tag <body> insert these calls:
<script type="text/javascript" src="http://navsurf.com/dhtml/ajscroller/ajscroller.js"></script>
<body onload="LoadAJScroller()" onresize="LoadAJScroller()">
This is the table to be insert where window must be displayed:
<table align="center" border="0">
<tr>
<td>
<form>
<input type="button" value="<<" onclick="AJDecreaseSpeed(20)">
<br>
<input type="button" value=">>" onclick="AJIncreaseSpeed(20)">
</form>
</td>
<td>
<script type="text/javascript" src="myscroll.js"></script>
</td>
<td>
<form>
<input type="button" value=" > " onclick="AJResume()">
<br>
<input type="button" value=" [] " onclick="AJStop()">
</form>
</td>
</tr>
</table>
<tr>
<td>
<form>
<input type="button" value="<<" onclick="AJDecreaseSpeed(20)">
<br>
<input type="button" value=">>" onclick="AJIncreaseSpeed(20)">
</form>
</td>
<td>
<script type="text/javascript" src="myscroll.js"></script>
</td>
<td>
<form>
<input type="button" value=" > " onclick="AJResume()">
<br>
<input type="button" value=" [] " onclick="AJStop()">
</form>
</td>
</tr>
</table>
QScroller by latenight-coding.com, is a sophisticate script which can generate several kinds of verticat and horizontal scroll windows. Needed files are: qscroller.js , mootools.js and qscroll2.js, in addition to the stylesheet qscroller.css. The script qscroll2.js must be downloaded and copied in to the same directory where is the html page.
Slide Scroller supports text and images, both with the possibility of links. Like the others, scroling is stopped on mouse over and starts again when mouse leaves the window. In the script qscroll2.js it's possible to change the persistence time, (duration, currently 1500 mS).
To embed the QScroller windows, insert before the tag </head>:
<link href="qscrollers.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://www.latenight-coding.com/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://www.latenight-coding.com/jincludes/qscroller//qscroller.js"></script>
<script type="text/javascript" src="http://www.latenight-coding.com/media/system/js/mootools.js"></script>
<script type="text/javascript" src="http://www.latenight-coding.com/jincludes/qscroller//qscroller.js"></script>
Then prepare the images that will displayed, all in the format 130 x 173, and insert they in the sub-directory img (use ImgMicroWiz to resize images).
To create the HTML code to be inserted in the web page, use this other utility.
A second kind of QScroller is an horizontal scroll window for hyper-text, his size may be changed in the stylesheet qscroller.css, ( #qscroller1 - width:320; height:21). The script qscroll1.js must be downloaded and copied in the same directory of the HTML page where it is called.
To embed this window, insert before </head> tag the same instructions of the previous example. The HTML code to be inserted after the tag <body> may be automatically generated using this further utility.
Third kind of window generated using QScroller is a Vertical Slide Show, very nice. Size of the images is 205 x 137 (use ImgMicroWiz to resize images).
Also to embed this object must insert before the tag </head> the same instructions of the previous two examples, furthermore must download and copy in the same directory of the HTML page, the script qscroll3.js.
The HTML code to insert after the <body> tag, may be automatically generated by using this further more utility.
In the script qscroll3.js it's possible to change the parameters: duration(mS), pause(mS) and autostart(true/false).
Last example has been realized with the script Flashyslideshow by javascriptkit.com - a classic slide-show with images and short text inside a coloured frame.
To embed the Flashyslideshow window, insert before the tag </head>:
<style type="text/css">
#myslideshow{width: 200px; border: 5px solid orange; padding: 5px;}
#myslideshow img{border-width: 0;}
</style>
<script type="text/javascript" src="http://www.javascriptkit.com/howto/flashyslideshow.js"></script>
#myslideshow{width: 200px; border: 5px solid orange; padding: 5px;}
#myslideshow img{border-width: 0;}
</style>
<script type="text/javascript" src="http://www.javascriptkit.com/howto/flashyslideshow.js"></script>
A second script, myflashydat.js, contains object's data and has to be embed in the html page, after the <body> tag, where the slide-show must be displayed. The script Flashydat.js may be created using this last utility.
best view with
|
Page Rating:
(3.83 su 5)
Voti 12
|