Untitled Document

Make your own free website on Tripod.com

http://www.communitymx.com/content/article.cfm?cid=651FF

objects01

Rotating Images with Dreamweaver and JavaScript
By: Danilo Celic

Slideshow, rotating images, image-a-go-go, whatever you want to call it, a client will ask for an image or banner to swap out with another image (or more than one), and continue swapping every so often. With Dreamweaver it's pretty easy to throw together some scripting that will accomplish just that for your client. Dreamweaver does most of the heavy lifting, and all you need to do is to paste in a little bit of code, set the images you want to display, how long you want the interval between image swaps to be and you're all ready to send the invoice.

Right, yes you did read that you'd be doing a bit of work up there, but don't worry, once you have this technique down it can take you as little as 20 seconds to get this going, as long as you don't have too many images to pull in. To get your images swapping out on a timed schedule, you'll need just three things to be finished and out the door for the weekend: Dreamweaver, a web page, and a set of images.

Ok, got the requirements together? Great, let's go....
Dreamweaver for Heavy Lifting

As mentioned earlier, Dreamweaver can do quite a bit of the work for you, I mean, that's what you use it for, right? Dreamweaver has several built in scripts, and a particularly useful set of scripts is its Swap Image and Preload Images behaviors. For our purposes, we really only need Swap Image to change out the images for us, but Preload Images is quite handy for pulling down images in the background so that when it's their turn for display, they pop right up, no waiting, so the technique described will include the preloading of images. We are adding these behaviors to the page so that the code they implement is quickly added by Dreamweaver, and so that the code may be used later for our own devious purposes.

To get started on your rotating images:

1. Create a new page and save it as rotatingImages.htm, or open an existing page where you want rotating images to appear.
2. Insert an image onto your page. This image will be the first image displayed as part of the image rotation.
3. With the inserted image selected, give the image a name and id of rotator. Do this through the image Property inspector on the upper left.

Figure 1: Image name/id field on the Property inspector
4. Select the <body> tag in the Tag Selector at the bottom of the document window.

body tag selected in Tag Selector
Figure 2: Tag Selector
5. Open the Behaviors panel, Window > Behaviors, and click the Add behavior button (+), then choose Swap Image.
6. Browse to and select one of the images in your series. Make sure that Preload images is checked and then click OK.

Figure 3: Swap Image behavior dialog

You Spin Me Right 'Round Baby, Right 'Round

Don't look now, but Dreamweaver has added a bunch of code to your page, most of which we'll be leveraging for the image rotation. Well, actually, do look now, as from here on out, we're living in code view until we're done...which won't be very long.

Just above the closing </script> tag in the <head> of your page (and also above //--> if present) , paste the following code:

// Comma separated list of images to rotate
var imgs = new Array('images/1.jpg','images/2.jpg','images/3.jpg','images/4.jpg','images/5.jpg');
// delay in milliseconds between image swaps 1000 = 1 second
var delay = 5000;
var counter = 0;

function preloadImgs(){
for(var i=0;i<imgs.length;i++){
MM_preloadImages(imgs[i]);
}
}

function randomImages(){
if(counter == (imgs.length)){
counter = 0;
}
MM_swapImage('rotator', '', imgs[counter++]);
setTimeout('randomImages()', delay);
}

There are just two places in the code where you need to make edits to reflect your situation, and they are highlighted for you to make them easier to find if you're not JavaScript fanatic. The first area to change is where you specify the locations of the images that you are wanting to rotate. The second area is the amount of delay that you want between image swaps. This time is in milliseconds, that is 5000 means to wait 5 seconds between swaps. The support file uses a delay of 1 second between swaps (1000 ms) in order to exhibit the technique, but much larger values are generally more appropriate, such as 10000 ms, or 30000 ms.

Next, we need to do a little cleaning up to remove some of the code Dreamweaver added during its heavy lifting that isn't needed for the image rotation. Move to the <body> tag and remove the MM_preloadImages() and MM_swapImage() function calls. By default, Dreamweaver also adds in an onmouseover event to the <body> that we also need to pull out. Then replace those calls with the code in the second code block.

Before:

After:

Note: If you have other function calls in either of these events, be careful in your removal of the functions, and only pull those mentioned. Also, if by chance you already have these functions applied to the <body>, make sure you only pull out references to the image you browsed to as part of the Swap image application above. If you have any questions about how edit should be made on your page, please don't hesitate to ask in our support forums.

Save your page, you're done. Told you it was quick.
Conclusion

This tutorial has shown you how you can have an image on a page that will have a set of images rotate in on a timer. That's done it, you've gone and completed yet another CommunityMX tutorial, you're now ready to spend probably double what you just did, solely on typing up the invoice for the client. Go have a coffee, and take a break.

Approximate download size: 104k

===================================================

http://websiteowner.info/tutorials/javascript/rotator.asp

A JavaScript Banner Rotator

Ok, ok - I just know how annoying banners can be, particularly when you aren't interested in what they have to offer (but some banners I have found to be very useful!) But there are times when you may want to rotate your image links to save space or just to make your page a little bit interesting. So how do we go about doing this then? Its one of the most handiest little languages to learn when starting out designing - JavaScript - what else did you expect?
What this script is not...

Before you start to think that this script is the answer to your banner exchange solutions - think again! This script is unsuitable for a banner exchange for several reasons.

* Firstly, if there are too many banners to choose from then it can significantly add to the download time of your page, as well as reducing the possibility of your visitor seeing a particular banner.
* Secondly, as the code will change as new links are added, you will have to contact all members of an exchange using this system to update their banner code.
* Finally, there is no way of tracking or rewarding members that actively show other members links - basically it is a game of chance as to which banners get shown the most often.

While the script demonstrated here is not adequate to run a banner exchange, it should serve a small site owner quite well for advertising other sites that they own as well as their favourite links, etc.
Image This is the code

First things first - you need to have a few banners to link together, so I suggest you go and make those banners as soon as possible. You will find life much easier if you make them all the same size however, since there are different methods of going about this depending on which browser the page is intended for. The example given below should work well for most browsers (providing that you have JavaScript enabled) - perhaps with the exception of the earlier versions... but if you are still using them now I would strongly recommend that you need to update!

There are three main sections that make this script work, the script snippet holding the functions, the snippet that initialises the banner and the HTML file used to display the banner in the later versions of Internet Explorer.

First of all, the function code, just below, should be placed in the header file of all the pages that you wish to use the script on. If you want a different size image, then be sure to set your image and width attributes to something that is appropriate for your use. I did try to link this code into my pages using the link tag, but it prevented it from working so I would not recommend that you put this code in an external script file. If you want to change the speed of the rotation, then you should change the values in the setTimeout lines, I have it set to 60 seconds.

function setHref(dest,image,text) {
myHref"hrefItems++" = new Href(dest,image,text); }

function replace() {
var now = new Date();
random = now.getSeconds()%hrefItems;
if (random == lastrandom) {
if (random == hrefItems-1) random--; else random++; }
document "'banner'".src = myHref"random".image;
document.links"0".href = myHref"random".dest;
setTimeout('replace()',60000);
lastrandom = random; }

Then, you add this little snippet of code for each banner you want to create on your page. Make sure to change the details of each banner to suit the sites that you wish to link to (you can add more so long as you stick to the example format).

After putting the code in your page - you need to create a new page for the floating frame that the later versions of Internet Explorer will use. The page used in the code above is called banner.html - but of course you can change this reference to suit your needs. Please feel free to view and download the source code for the banner.html page, to download it, right click on the link and then select the "save target as" option - or open up the page (link opens in a new window) and then choose save in the file menu of your browser.

If you have changed the image size or the timer value in the script, make sure to change the corresponding values in the HTML file also, otherwise you will end up with a banner that changes shape and rotation speed depending which browser was used.

================================================

http://www.cssbeauty.com/skillshare/comments.php?DiscussionID=1110

JavaScript / DOM / AJAX: Know of a nice code to rotate images?
Bottom of Page

1 to 3 of 3

1.
* CommentAuthorthepowerofed
* CommentTimeSep 9th 2006
permalink
Any one know of some JS that'll rotate some images, similar to the way this site does. Notice, they're using flash, and I would rather not. Thanks.
2.
* CommentAuthorkaiman
* CommentTimeSep 9th 2006 edited
permalink
I did a search on A List Apart and found this article as well as several others by Dan Benjamin: http://www.alistapart.com/articles/betterrotator/ This script uses php rather then javascript, but eliminates the worry about whether users have js enabled.

Depending on your audience, you can also use javascript to do this as well by calling the images from an array.

Something like this should do the trick. Just replace the paths to each image in the list below and add the number to the this variable: image = new StringArray(10) (i.e. replace the number 10 with the number of images you have and remember that counting in javascript always starts with 0 not 1).

var currentdate = 0
var core = 0

function StringArray (n) {
this.length = n;
for (var i =1; i <= n; i++) {
this[i] = ' '

}
}

image = new StringArray(10)
image[0] = 'images/PB010084-150.jpg'
image[1] = 'images/PB150115-150.jpg'
image[2] = 'images/PA240077-150.jpg'
image[3] = 'images/WhiteHouse_RedRoof-150.jpg'
image[4] = 'images/PA170049-150.jpg'
image[5] = 'images/PB010084-150.jpg'
image[6] = 'images/PB150115-150.jpg'
image[7] = 'images/PA240077-150.jpg'
image[8] = 'images/WhiteHouse_RedRoof-150.jpg'
image[9] = 'images/PA170049-150.jpg'

var ran = 60/image.length

function ranimage() {
currentdate = new Date()
core = currentdate.getSeconds()
core = Math.floor(core/ran)
return(image[core])
}

document.write("<img src='" +ranimage()+ "'>")

//-->
</script>

The core of this script uses javascripts built in math function to randomly display images:

function ranimage() {
currentdate = new Date()
core = currentdate.getSeconds()
core = Math.floor(core/ran)
return(image[core])
}

You can also put this into a separate .js file and include it in your page ie: <script type="text/javascript" src="../scripts/rotator.js"></script> If this won't work for you do a search for javascript image rotator and I am sure you will find several other similiar tutorials/scripts.

Hope that helps,

kaiman

=============================

http://www.groovyweb.uklinux.net/index.php?page_name=how%20to%20randomnly%20rotate%20images%20in%20javascript&category=web-dev

how to randomnly rotate images in javascript
Randomnly rotatign images in javascript
About:
If you have a website and want to serve adverts randomnly, ads can easily be randomnly served. Look to the left of the page to see a randomnly shown image. All this is done through javascript.

Example:
The following javascript code is used by this site to rotate randomnly

function getRand(range) {
return Math.round(Math.random() * range);
}
ad = new Array();
ad[0] = "<A href=http://www.dgm2.com/m/themutual/b.asp?A=7836&I=1122><IMG SRC=http://www.dgm2.com/m/themutual/i.asp?A=7836&I=1122 BORDER=0></a>";
ad[1] = "<A href=http://www.dgm2.com/m/mysports/b.asp?A=7836&I=2180><IMG SRC=http://www.dgm2.com/m/mysports/i.asp?A=7836&I=2180 BORDER=0></a>";
ad[2] = "<A href=http://www.dgm2.com/m/yoox/b.asp?A=7836&I=1011><IMG SRC=http://www.dgm2.com/m/yoox/i.asp?A=7836&I=1011 BORDER=0></a>";;
ad[3] = "<A href=http://www.dgm2.com/m/okmail/b.asp?A=7836&I=136><IMG SRC=http://www.dgm2.com/m/okmail/i.asp?A=7836&I=136 BORDER=0></a>";
ad[4] = "<A href=http://www.dgm2.com/m/mypoints/b.asp?A=7836&I=178><IMG SRC=http://www.dgm2.com/m/mypoints/i.asp?A=7836&I=178 width=120 height=60 BORDER=0></a>";
num = getRand(4);

document.write(ad[num]);