necesito poner una serie de imágenes (logo patrocinadores) en el header de mi foro, justamente lo quiero poner del lado derecho
estas imágenes deben de estar cambiando constantemente como que fuera un gif con movimiento, pero cuando de clic en la imagen me direccione a la pagina oficial de mis patrocinadores.
me pasaron este codigo hecho con jquery el cual tiene un efecto muy bonito y me pregunto si es posible incorporarlo al mi header como lo quiero
Efecto deseado de imagenes
Este es el codigo
Código: Seleccionar todo
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
margin:0;
padding:0;
font: normal 0.6em sans-serif, Arial;
width: 100%;
}
/*h1 {
padding-left: 55px;
font:bold 14px/1.5em "Trebuchet MS", Trebuchet, Arial, Verdana, Sans-serif;
text-transform:uppercase;
letter-spacing:.0.5em;
}*/
a {
outline: none;
}
</style>
<style type="text/css">
/* rotator in-page placement */
div.rotator {
position:relative;
height:345px;
margin-left: 15px;
display: none;
}
/* rotator css */
div.rotator ul li {
float:left;
position:absolute;
list-style: none;
}
/* rotator image style */
div.rotator ul li img {
border:1px solid #ccc;
padding: 4px;
background: #FFF;
}
div.rotator ul li.show {
z-index:500
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<!-- By Dylan Wagstaff, http://www.alohatechsupport.net -->
<script type="text/javascript">
function theRotator() {
//Set the opacity of all images to 0
$('div.rotator ul li').css({opacity: 0.0});
//Get the first image and display it (gets set to full opacity)
$('div.rotator ul li:first').css({opacity: 3.0});
//Call the rotator function to run the slideshow, 6000 = change to next image after 6 seconds
setInterval('rotate()',2000);
}
function rotate() {
//Get the first image
var current = ($('div.rotator ul li.show')? $('div.rotator ul li.show') : $('div.rotator ul li:first'));
if ( current.length == 0 ) current = $('div.rotator ul li:first');
//Get next image, when it reaches the end, rotate it back to the first image
var next = ((current.next().length) ? ((current.next().hasClass('show')) ? $('div.rotator ul li:first') :current.next()) : $('div.rotator ul li:first'));
//Un-comment the 3 lines below to get the images in random order
//var sibs = current.siblings();
//var rndNum = Math.floor(Math.random() * sibs.length );
//var next = $( sibs[ rndNum ] );
//Set the fade in effect for the next image, the show class has higher z-index
next.css({opacity: 0.0})
.addClass('show')
.animate({opacity: 1.0}, 1000);
//Hide the current image
current.animate({opacity: 0.0}, 1000)
.removeClass('show');
};
$(document).ready(function() {
//Load the slideshow
theRotator();
$('div.rotator').fadeIn(1000);
$('div.rotator ul li').fadeIn(1000); // tweek for IE
});
</script>
</head>
<body>
<div class="rotator">
<ul>
<li class="show"><a href="http://www.facebook.com/profile.php?id=100001123115024"><img src="../imageset/sponsor/logoarrecife.jpg" width="220" height="150" alt="pic1" /></a></li>
<li><a href="http://www.facebook.com/amazoniabioshop.acuario"><img src="../imageset/sponsor/amazonia.png" width="220" height="150" alt="pic3" /></a></li>
<li><a href="http://www.facebook.com/profile.php?id=100001899537325"><img src="../imageset/sponsor/ocean2.png" width="220" height="150" alt="pic4" /></a></li>
</ul>
</div>
</body>
</html>