PDA

View Full Version : Random Header rotation Help!


Cello
03-27-2009, 03:42 AM
Hey guys I'm back again, with another issue which I'm sure is an easy fix but I have been scouring the net for days trying to find a solution and I'm stuck.

So I have my header on my page and I would like to have it change each time the page is refreshed. I cant figure out for the life of me how to do this. I find a solution via php but my host does not support php.

So I am looking for a javascript/css fix.

I'm not sure what code is helpful to you guys but here it is from one of my pages, its a simple layout on my site and every page is basically the same so one fix will affect all my pages and I will be grateful, code to follow.

Check www.MarcelTorres.com (http://www.MarcelTorres.com) - I would like to have the main header change each time someone visits from a selection of 10 different exact size
images.

Thanks for your help in advance.

code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Marcel Torres - Home</title>
<style type="text/css" media="all">
<!--
@import url("styles.css");
-->
</style>
<!--[if IE 5]>
<style type="text/css">
#outerWrapper #contentWrapper #leftColumn1 {
width: 200px;
}
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
#outerWrapper #contentWrapper #content {
zoom: 1;
}
</style>
<![endif]-->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
</head>
<body>
<div id="header">
<div id="logo"><a href="#"><img src="images/logo.jpg" alt="Marcel Torres" width="299" height="54" /></a></div>
<div class="clearFloat"></div>
</div>
<div id="outerWrapper">
<div id="gradient">
<div id="feature"></div>
<div id="nav" style="margin-bottom: 10px;">
<ul>
<li><a href="http://cello.sitesled.com/horse/homepage.html">Home</a></li>
<li><a href="http://cello.sitesled.com/horse/resume.html">Resume</a></li>
<li><a href="http://cello.sitesled.com/horse/video.html">Reel</a></li>
<li><a href="http://cello.sitesled.com/horse/headshots.html">Headshots</a></li>
<li><a href="http://cello.sitesled.com/horse/contact.html">Contact</a></li>
<li><a href="http://cello.sitesled.com/horse/bio.html">Bio</a></li>
</ul>
</div>
<div id="contentWrapper">
<div id="leftColumn1">
<div id="leftColumnContent">
<h3>Acting Related</h3>
<ul>
<li> <a href="http://cello.sitesled.com/horse/clips.html">Trailers & Clips</a> </li>
<li><a href="http://www.youtube.com/watch?v=okWHi_muhB4">Performance Video</a></li>
<li><a href="http://cello.sitesled.com/horse/Apics.html">Acting Photos</a></li>
<li></li>
<li></li>
</ul>

<h3>Social Stuff</h3>
<p>Feel free to follow me via:</p>
<p><a href="http://twitter.com/Celloh">Twitter</p></a>
<p><a href="http://www.myspace.com/celloh">Myspace</p></a>
</div>
</div>
<div id="content">
<h1>Latest News via Twitter</h1>
<p><script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0','width','424','heig ht','500','id','TwitterWidget','align','middle','s rc','http://static.twitter.com/flash/widgets/profile/TwitterWidget','quality','high','bgcolor','#000000 ','name','TwitterWidget','allowscriptaccess','alwa ys','allowfullscreen','false','pluginspage','http://www.macromedia.com/go/getflashplayer','flashvars','userID=19632603&styleURL=http://static.twitter.com/flash/widgets/profile/revo.xml','movie','http://static.twitter.com/flash/widgets/profile/TwitterWidget' ); //end AC code
</script><noscript><object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,124,0" width="424" height="500" id="TwitterWidget" align="middle">
<param name="allowScriptAccess" value="always" />
<param name="allowFullScreen" value="false" />
<param name="movie" value="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="FlashVars" value="userID=19632603&styleURL=http://static.twitter.com/flash/widgets/profile/revo.xml">
<embed src="http://static.twitter.com/flash/widgets/profile/TwitterWidget.swf" quality="high" bgcolor="#000000" width="424" height="500" name="TwitterWidget" align="middle" allowScriptAccess="sameDomain" allowFullScreen="false" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="userID=19632603&styleURL=http://static.twitter.com/flash/widgets/profile/revo.xml"/>
</object></noscript></p>
<h2>&nbsp;</h2>
</div>
<br class="clearFloat" />
</div>

<div id="footer">| Copyright &copy; 2009 www.MarcelTorres.com |</div>

</div>
</div><div id="credit"></div>
</body>
</html>
-Cello

coloeagle
03-27-2009, 02:47 PM
Here ya go.

Create a js file with the following code;

// the following line sets the image array for use, do not change it
var theImages = new Array()

// set the path to your images
theImages[0] = 'path-to-images/image1.jpg'
theImages[1] = 'path-to-images/image2.jpg'
theImages[2] = 'path-to-images/image3.jpg'
theImages[3] = 'path-to-images/image4.jpg'
theImages[4] = 'path-to-images/image5.jpg'
theImages[5] = 'path-to-images/image6.jpg'
theImages[6] = 'path-to-images/image7.jpg'
theImages[7] = 'path-to-images/image8.jpg'
theImages[8] = 'path-to-images/image9.jpg'
theImages[9] = 'path-to-images/image10.jpg'

// to add more images continue with the pattern above

// do not edit the following
var j = 0
var p = theImages.length;
var preBuffer = new Array()
for (i = 0; i < p; i++){
preBuffer[i] = new Image()
preBuffer[i].src = theImages[i]
}
var whichImage = Math.round(Math.random()*(p-1));
function showImage(){
document.write('<img src="'+theImages[whichImage]+'">');
}
Place the js call tag for the above file in the head section of your pages.
<script type="text/javascript" src="path-to-js-file.js"></script>
In the body where you want these images to be displayed place the following js tag;
<script type="text/javascript">showImage();</script>
<noscript><img src="path-to-default-image.jpg" alt="" /></noscript>
The noscript tag is needed if a visitor has js disabled. They won't get a random image but they won't get a blank section of your page.

Cello
03-28-2009, 09:09 AM
coloeagle (http://www.dreamweaverclub.com/forum/member.php?u=25985), that did the trick. I appreciate your help on this one. If I can ever assist you let me know 8-).

Thanks again.

-Cello

Rob_Che
04-02-2009, 05:12 PM
Is there a way to include a different link each time too ?

edit: found it !
http://www.javascriptkit.com/script/cut144.shtml