I recently built a site for a conference, which has several sponsors. I added some php to the pages so that a random logo of one of them shows up each time a page is requested. Clicking on the logo takes the user to that sponsor's site, and hovering over the logo in FF and Safari/opera (not, of course IE) shows a tooltip with title "description of the company".

So, a typical logo's html , generated server side looks like this:

<a href="http://www.marmot.com" rel="external"><img src="sponsors_logos/marmot4life_175_21.png"  height="21" width="175" alt="Marmot's logo" title="NB. External link. Opens in a new tab/window. Marmot, maker of packs, tents, sleeping bags and outdoor clothing is the Presenting Sponsor for ISSW2008" /></a>
The organizers wanted the linked page to open in a new window/tab if the logo is clicked on, so in order to get the code to validate, I used Kevin Yank's javascript function external_link.js, so when a logo is clicked I then open the link in new window/tab, using the rel="external" tag.

All was well, till the organizer's asked me to make the sponsor's logos rotate at 4 second intervals, which obviously requires it all to be done in javascript at the browser end.

I'm really not well up on javascript, and while I can find several slide show scripts on the net, I have some questions that stump me, and wonder of anyone could please offer advice.

  1. If Javascript is disabled, I don't want the same logo to always appear. Thus I suspect that I should leave in place my php script sending out a random logo with each page load in place.
  2. If I wrap the code shown above in div with an id, then I can target it in javascript.
  3. I then want to replace the image and it's link and text/title/alt/size etc with another every 4 secs.

I just don't see how to do this, I can set up a timer, based on the number of items in an array, make an image change every x secs, but don't know how to also add all the other parts to the code.