Sponsored Links Rotator

[g10tto]

Hi folks!

Very inexperienced in JavaScript. Learning off and on.

I have a div that contains three tables, and their styles, that I need to place into a variable or object (I don't know which), so that I can place it in the page and everytime the user reloads it, the same object appears but with different content.

My goal is to create 5 or 6 different categories of sponsored links within a table and have them appear randomly each time a visitor comes to the site.

Any help is appreciated! :)

[rangana]

Could you at least show us your markup (HTML) :)

[g10tto]

The markup is just a set of tables stacked on top of each other.

Here is the basic structure with styles.

Do I need to create a function that writes this?

Thanks!

<style type="text/css">
.sponsor_hdr { text-align:center; background:#DD0000; color:#FFF; }
.sponsor a:link, .sponsor a:visited, .sponsor a:active, .sponsor a:hover { font-weight:bold; color:#DD0000; text-decoration:none; }
.sponsor table td { width:600px; vertical-align:top; font-size:9pt; font-family:Century Gothic; }
.sponsor p {margin:3px;}
.sponsor h1 {margin:0px;}
</style>

<div class="sponsor" align="center">
<table width="40%" border="0" cellspacing="0">
<tr>
<td class="sponsor_hdr"><img src="corn_tl.png" width="30px" style="float:left;clear:right;margin:-1px 0px 0px -1px; padding:0px 0px 0px 0px;"></td>
<td class="sponsor_hdr">
<h1>Arts</h1>
</td>
<td class="sponsor_hdr"><img src="corn_tr.png" width="30px" style="float:right;clear:left;margin:-1px -1px 0px 0px; padding:0px 0px 0px 0px;">
</td>
</tr>
</table>
<table width="40%" style="border-right:1px solid #DD0000;border-left:1px solid #DD0000;" cellspacing="10">
<tr>
<td><a target="_blank" href="#">Link</a><p>Summary of Link</td>
<td><a target="_blank" href="#">Link</a><p>Summary of Link</td>
<td><a target="_blank" href="#">Link</a><p>Summary of Link</td>
</tr>
</tr>
</table>
<table width="40%" border="0" cellspacing="0">
<tr>
<td class="sponsor_hdr"><img src="corn_bl.png" width="20px" style="float:left;clear:right;margin:0px 0px -1px -1px; padding:0px 0px 0px 0px;"></td>
<td class="sponsor_hdr">
&nbsp;</td>
<td class="sponsor_hdr"><img src="corn_br.png" width="20px" style="float:right;clear:left;margin:0px -1px -1px 0px; padding:0px 0px 0px 0px;">
</td>
</tr>
</table>
</div>

[rangana]

Give those td element that holds the sponsor images (if I think it right) a unique ID:

<td class="sponsor_hdr" id="sponsor1"><img src="corn_tl.png" width="30px" style="float:left;clear:right;margin:-1px 0px 0px -1px; padding:0px 0px 0px 0px;"></td>

<td class="sponsor_hdr" id="sponsor2"><img src="corn_tr.png" width="30px" style="float:right;clear:left;margin:-1px -1px 0px 0px; padding:0px 0px 0px 0px;">
</td>

<td class="sponsor_hdr" id="sponsor3"><img src="corn_bl.png" width="20px" style="float:left;clear:right;margin:0px 0px -1px -1px; padding:0px 0px 0px 0px;"></td>

<td class="sponsor_hdr" id="sponsor4"><img src="corn_br.png" width="20px" style="float:right;clear:left;margin:0px -1px -1px 0px; padding:0px 0px 0px 0px;"></td>


These are the 4 td's you have.

And have this script:

<script type="text/javascript">
window.onload=function()
{
var sponsorID=['sponsor1','sponsor2','sponsor3','sponsor4'],
// Place all the unique id of your sponsored element in this array.
sponsor1=['image1.jpg','image2.jpg','image3.jpg','image4.jpg'],
// The image you want to randomly be choosen to the element whose id is sponsor1
sponsor2=['image5.jpg','image6.jpg','image7.jpg','image8.jpg'],
// The image you want to randomly be choosen to the element whose id is sponsor2
sponsor3=['image9.jpg','image10.jpg','image11.jpg','image12.jpg'],
// The image you want to randomly be choosen to the element whose id is sponsor3
sponsor4=['image13.jpg','image15.jpg','image16.jpg','image17.jpg'];
// The image you want to randomly be choosen to the element whose id is sponsor4

//////////////////No need to edit beyond this part//////////////////////
for(var i=0;i<sponsorID.length;i++)
{
var img=document.getElementById(sponsorID[i]).getElementsByTagName('img')[0],
obj=eval(sponsorID[i]),
rand=Math.floor(Math.random()*obj.length); // Generate a random number
img.setAttribute('src',obj[rand]); // Make the random number the index of our array (obj)
}
}
</script>


Hope it helps.

[g10tto]

This definitely helps me understand rotators in general, but I was thinking more like the links and their subsequent descriptions were the rotating items.

I'll work with this some and hopefully get back to you.

Thanks!