...

View Full Version : How to implement a "cycling" news item on refresh/reload



colinkites2000
11-18-2008, 02:03 PM
Here is the site I am working on: http://www.abrametal.com

What I wanted to do, is have the bottom News DIV change each time the page is loaded/refreshed. In this way I could have a different picture and text and give some variety to the users. I didn't want to make another slideshow but instead, a new div on reload/refresh.

Any idea on how I can implement this type of idea would be greatly appreciated.

Best,
C

rangana
11-18-2008, 03:23 PM
<script type="text/javascript">
var ray=
{
imgsRef:['Picture1.jpg','Picture2.jpg','Picture3.jpg',
'Picture4.jpg','Picture5.jpg','Picture6.jpg',
'Picture7.jpg','Picture8.jpg','Picture9.jpg'], // Images you wish to display randomly
cycle:function(el)
{
var rand=Math.floor(Math.random()*this.imgsRef.length); // Create random number
this.getID(el).setAttribute('src',this.imgsRef[rand]);
},
getID:function(el)
{
return document.getElementById(el);
}
}
window.onload=function()
{
ray.cycle('myimage'); // Pass the id of your image
}
</script>
<style type="text/css">
p{
width:500px;
}
p img{
width:200px;
height:150px;
float:left;
margin:5px;
}
</style>
<base href="http://rangana.moonylist.com/images/">
<p>
<img src="Picture9.jpg" alt="Default Image" id="myimage">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus.
</p>

colinkites2000
11-19-2008, 02:22 PM
Thanks - I will give this a try and see how it goes! Will this cycle the text as well though?

effpeetee
11-19-2008, 03:41 PM
I have put it here. (http://exitfegs.co.uk/arndpic.html)

It's a bit crude.


Frank



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum