PDA

View Full Version : banner rotation... and text links

pixelmonkey
03-02-2006, 03:36 PM
i know someone has this in their script archives...

NEED
===================
banner rotation script that will also display text links.

1. banner image linked to a specific page
2. text link to a specific page
3. text link to a specific page
4. text link to a specific page
5. text link to a specific page
6. text link to a specific page

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


the image will be the same size, so that will be easy
AND now for the trickey part...
the rotation of the image will be on refresh. if the image appears, the text link WONT!

there are a total of 6 links.

anyone have that one laying around?
thanks
chris<pixelmonkey>:D
-i-dont-know-
03-02-2006, 04:00 PM
http://www.computerhope.com/j18.htm
pixelmonkey
03-02-2006, 04:09 PM
not quite what i'm wanting... let me explain it better...

Example
=================
Image that links to A
Text that links to B
Text that links to C
Text that links to D
Text that links to E
Text that links to F
=================
a user clicks refresh....

Example
===================
Image that links to B
Text that links to A
Text that links to C
Text that links to D
Text that links to E
Text that links to F
===================

the text links can be in a random order, it doesnt matter.
All 6 links will appear, but one will be an image. The image link will appear at the top of the list.

suggestions?
chris<pixelmonkey>:D
BonRouge
03-03-2006, 05:06 AM
Hey,
I realise this is the client-side forum, but here's a php (server-side) solution if that would help...

link (http://bonrouge.com/test/random-img-link.php)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Random image link</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:white;
}
ul {
list-style:none;
margin-top:10px;
}
a:link {
color:gray;
}
a:hover {
color:red;
}
a img {
border:0;
}
.image {
float:left;
padding:0 10px;
}
</style>
</head>
<body>
<ul>
<?php
$links=array(
array('wine.jpg',"http://wine.com","WINE"),
array('whisky.jpg',"http://whisky.com","WHISKY"),
array('beer.jpg',"http://beer.com","BEER")
);
$rand=rand(0,2);
$image=$links[$rand];
echo '
<li class="image"><a href="'.$image[1].'"><img src="'.$image[0].'" alt="'.$image[2].'" /></a></li>';
$i = 0;
while ($i < count($links)) {
if ($i<>$rand) {
echo '
<li><a href="'.$links[$i][1].'">'.$links[$i][2].'</a></li>';
}
$i++;
}
?>
</ul>
</body>
</html>

I'll get back to you if I can do it in javascript... I'm sure it's not much different to php.
BonRouge
03-03-2006, 06:21 AM
OK, here's the above script in javascript.
I hope it helps...

http://bonrouge.com/test/random-img-link-js.htm

var links= new Array(3);
links[0]= new Array(3);
links[0][0]='wine.jpg';
links[0][1]="http://wine.com";
links[0][2]="WINE";
links[1]= new Array(3);
links[1][0]='whisky.jpg';
links[1][1]="http://whisky.com";
links[1][2]="WHISKY";
links[2]= new Array(3);
links[2][0]='beer.jpg';
links[2][1]="http://beer.com";
links[2][2]="BEER";
var ran_unrounded=Math.random()*2;
var rand=Math.round(ran_unrounded);
var image= links[rand];
document.write("<ul><li class=\"image\"><a href=\""+image[1]+"\"><img src=\""+image[0]+"\" alt=\""+image[2]+"\" /></a></li>");
for (i = 0; i < links.length; i++) {
document.write((i==rand)? "" : "<li><a href=\""+links[i][1]+"\">"+links[i][2]+"</a></li>");
}
document.write("</ul>");
coothead
03-03-2006, 09:59 AM
Hi there pixelmonkey,

as BonRouge has suggested, this can be achieved server-side, and has provided you with examples.

From my reading of you OP, it seems that, you do not want a random swap but a rotation. If this is the case,
I have provided the javascript solution for this, perhaps BonRouge will be able to supply the PHP example.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>image rotation on refresh</title>
<base href="http://coothead.homestead.com/files/"> <!--this is for testing purposes only and may be remove//-->
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">
<!--
body {
background-color:#eef;
color:#000;
}
#fruit {
display:block;
width:360px;
height:280px;
border:3px double #000;
margin:20px auto;
}
.gone {
display:none;
}
#container {
width:360px;
height:126px;
background-color:#505050;
border:3px double #000;
color:#000;
margin:auto;
}
#container ul {
margin-top:15px;
}
#container a {
background-color:#505050;
color:#b0b0b0;
text-decoration:none;
}
#container a:hover{
background-color:#505050;
color:#fff;
}
-->
</style>

<script type="text/javascript">
<!--
var pics=new Array();
pics[0]='apple0.jpg,http://www.htmlforums.com';
pics[1]='apple1.jpg,http://www.w3schools.com';
pics[2]='apple2.jpg,http://www.w3.org';
pics[3]='apple3.jpg,http://www.bbc.co.uk';
pics[4]='apple4.jpg,http://www.guardian.co.uk';
pics[5]='apple5.jpg,http://www.independent.co.uk';
var num;
function setCookie() {
exp=new Date();
plusMonth=exp.getTime()+(31*24*60*60*1000);
exp.setTime(plusMonth);
document.cookie='number='+num+';expires='+exp.toGMTString();
}
function readCookie() {
if(document.cookie) {
num=document.cookie.split('number=')[1];
document.getElementById('fruit').src=pics[num].split(',')[0];
document.getElementById('link').href=pics[num].split(',')[1];
document.getElementById('text'+num).className='gone';
if(num<pics.length-1){
num++;
setCookie();
}
else {
num=0;
setCookie();
}
}
else {
document.getElementById('text0').className='gone';
num=1;
setCookie();
}
}
onload=readCookie;
//-->
</script>

</head>
<body>

<div>
<a id="link" href="http://www.htmlforums.com">
<img id="fruit" src="apple0.jpg" alt="">
</a>
</div>

<div id="container">
<ul>
<li id="text0"><a href="http://www.htmlforums.com">Text that links to A</a></li>
<li id="text1"><a href="http://www.w3schools.com">Text that links to B</a></li>
<li id="text2"><a href="http://www.w3.org">Text that links to C</a></li>
<li id="text3"><a href="http://www.bbc.co.uk">Text that links to D</a></li>
<li id="text4"><a href="http://www.guardian.co.uk">Text that links to E</a></li>
<li id="text5"><a href="http://www.independent.co.uk">Text that links to F</a></li>
</ul>
</div>

</body>
</html>
BonRouge
03-03-2006, 03:28 PM
As promised by Coothead on my behalf ;)... A (maybe-not-the-best-code-in-the-world-but-working-anyway) php rotating image script.

http://bonrouge.com/test/rotating-img-link.php

<?php
$links=array(
array('wine.jpg',"http://wine.com","WINE"), // image, link, alt/link text
array('whisky.jpg',"http://whisky.com","WHISKY"),
array('beer.jpg',"http://beer.com","BEER")
);
if ($rotate==count($links)-1) { // php is magic - each cookie is automagically a variable
$which=0; // this 'if' statement says that if the cookies there and it's reached the end - go back to 0
}
else {
$which=$rotate+1; // this 'else' bit makes it go to the next one. If the cookie's not set, it's '1'.
}
setcookie ('rotate', $which, time()+31536000, '/', 'bonrouge.com', '0'); // this sets the cookie for a long time
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Rotating image link</title>
<style type="text/css">
* {
margin:0;
padding:0;
}
body {
background-color:white;
}
ul {
list-style:none;
margin-top:10px;
}
a:link {
color:gray;
}
a:hover {
color:red;
}
a img {
border:0;
}
.image {
float:left;
padding:0 10px;
}
</style>
</head>
<body>
<ul>
<?php
$image=$links[$which]; // this says which image to show
echo '
<li class="image"><a href="'.$image[1].'"><img src="'.$image[0].'" alt="'.$image[2].'" /></a></li>';
$i = 0;
while ($i < count($links)) {
if ($i<>$which) {
echo '
<li><a href="'.$links[$i][1].'">'.$links[$i][2].'</a></li>'; // and this adds the links
}
$i++;
}
?>
</ul>
</body>
</html>
pixelmonkey
05-09-2006, 12:22 PM
thanks guys! everything works great

coming back to it way late
chris<pixelmonkey>:D