Vertical rotating weel of clickable logo's

Steynsk
Steynsk used Ask the Experts™
on
Hi Experts,
For our soccer club we have about 54 sponsors. Every sponsor has a logo that is 146x60 pixels big.

At this moment we show the logo's in a vertical line up on the right side of our clubs page and randomise them. But would it be possible to make this strip slowly rotate te 54 logo's and keep them clickable? An rolodex-like effect?

Please lead me to a working script that can do this job. It should be done with javascript, CSS or plain php because the logo's and hyperlink addresses are stored in our database. Flash is OK as well but it should be able to work with database stored logo's and addresses.

Thanks,
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
<style type="text/css">
#roll, #roll marquee{
overflow:hidden;
width:180px;
height:300px;
margin:5px auto 5px auto;
text-align:center;
}
#roll a img{
border:1px solid #000000;
}
#roll img{
padding:2px 2px 2px 2px;
text-align:center;
margin:2px auto 2px auto;
background:#CCCCCC;
}
</style>
<div id="roll">
<marquee direction="up" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" loop="-1" scrollamount="1" scrolldelay="50" >
Paste URL Image here!!!<br />
Paste URL Image here!!!<br />
<a href="#">Paste URL Image here!!!</a><br />
Paste URL Image here!!!<br />
Paste URL Image here!!!
</marquee>
</div>

Hello probably you need something like this:

http://sorgalla.com/projects/jcarousel/examples/static_auto.html

But in a vertical position:

http://sorgalla.com/projects/jcarousel/examples/static_vertical.html

So, you can implement it with this:

http://sorgalla.com/projects/jcarousel/

Bye! ;)
Most Valuable Expert 2011
Top Expert 2016
Commented:
Have a look at the "Dynamic Drive" pages.  They have scrollers and image rotators and things like that.  This might not be "the perfect one" but it looks like it could scroll images and links as well as text.
http://www.dynamicdrive.com/dynamicindex2/cmarquee2.htm

Check the note here:
http://en.wikipedia.org/wiki/Marquee_element

Best regards, ~Ray
Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

Commented:
@ all,
Many thanks for the quick response to this question.

@animesxplosion,
I'd like your solution becouse is it is simple and does not need a lot of space in code and appearance.
It has only one "but". It starts in the middle of the site but it should start showing 10 logo's from the top to the bottom of the site and then should start turning without stopping or pauzing
Can you adapt it to do this?

Thanks
<?php
include('../includes/connect.php');
mysql_connect($host,$username,$password) or die(mysql_error()); 
mysql_select_db($database) or die(mysql_error());
$sql = mysql_query("SELECT * FROM mytable INNER JOIN sponsor_contracten ON mytable.Id = mytable2.sponsorID WHERE mytable2.type='2' ORDER BY RAND(); 
?>
<HTML>

<link rel='stylesheet' href='tree3.css'>

<HEAD>
<TITLE>ZFC Zuidlaren</TITLE>
<style type="text/css">
#roll, #roll marquee{
overflow:hidden;
width:180px;
height:300px;
margin:5px auto 5px auto;
text-align:center;
}
#roll a img{
border:1px solid #000000;
}
#roll img{
padding:2px 2px 2px 2px;
text-align:center;
margin:2px auto 2px auto;
background:#CCCCCC;
}
</style>
<BODY topmargin=0 leftmargin=0>
									
														
<div id="roll">
<marquee direction="up" behavior="scroll" onmouseover="this.stop();" onmouseout="this.start();" loop="-1" scrollamount="1" scrolldelay="50" >
<?
while ($row = mysql_fetch_assoc($sql)) {
	$my_url=$row['URL'];
	$my_image=$row['logo'];
	echo '<a href="'.$my_url.'" target="_blank"><img src="'.$my_image.'" border="0"></a>';
}
?>
</marquee>
</div> 
										
</BODY>
</HTML>

Open in new window

Author

Commented:
O and it stops after the logo's are finished (after about 54 logo's) but it should continue...

Author

Commented:
Thanks to the both of you
Most Valuable Expert 2011
Top Expert 2016

Commented:
Thanks for the points, ~Ray

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial