...

View Full Version : Hyper linking pictures in a Rotating Banner



Dave Martin
01-28-2012, 05:00 PM
I'm not very good at code etc, so go easy. :thumbsup:

Basically i want to insert Hyperlinks into my banner. Scroll under the product description in this link to find it:

http://www.guesswhatiforgot.co.uk/noveltygifts/prod_1653325-Kelvin23-Pink.html

I've put it there because no one goes on that page. It's not the finished article, but as i can't do the links i haven't bothered too much with the aesthetics. Here is the code:

<code>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Collapsible Menu | Mathachew.com</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var loaded = 0;
var timerId = 0;
var current = null;

var stop = function() {
clearTimeout(timerId);
timerId = 0;
};

var resume = function(func, el) {
timerId = window.setTimeout(function() { func(el); }, 4000);
};

var reset = function(e) {
loaded = 0;

if(e)
e.fadeOut(500);

original.fadeIn(500, function() { loaded = 1; });
};

var original = $('#home_photo');

reset();

//
$('#banner > a').each(function(i) {
if(i > 0)
{
var banner = $(this);

$(this).mouseover(function() {
stop();
}).mouseout(function() {
resume(reset, banner);
});
}
});

$('#banner_menu > a').each(function(i) {
i += 1;
var banner = $('#banner a:eq(' + i + ')');

$(this).mouseover(function() {
if(!loaded)
return;

original.hide();

if(current != null)
$('#banner > a:eq(' + current +')').hide();

current = i;

banner.show();
stop();
}).mouseout(function() {
if(!loaded)
return;

resume(reset, banner);
});
});
});
</script>
<style type="text/css">
#banner_wrapper {
display: block;
height: 253px;
width: 684px;
}
#banner_menu {
float: left;
width: 125px;
}
#banner_menu a {
float: left;
height: 61px;
margin: 0 3px 3px 0;
width: 125px;
}
#banner_menu a span {
display: none;
}
#banner_menu a {
background: url('http://www.guesswhatiforgot.co.uk/siteimages/16/0/8/160826/3085607.jpg') no-repeat 0 0;
}
#banner_menu a.menu2 {
background-position: 0 -61px;
}
#banner_menu a.menu3 {
background-position: 0 -122px;
}
#banner_menu a.menu4 {
background-position: 0 -183px;
}
#banner {
float: right;
height: 253px;
position: relative;
width: 556px;
}
* html #banner {
height: 182px;
}
html>body #banner {
margin-bottom: 2px;
}
#banner #home_photo {
display: block;
}
#banner a {
display: none;
position: absolute;
}
#banner a img {
border: none;
}
</style>
</head>

<body>
<div id="banner_wrapper">
<div id="banner_menu">
<a class="menu1">
<span>Half-Life 2</span><A HREF="http://www.htmlgoodies.com">
</a>
<a class="menu2">
<span>Team Fortress 2</span>
</a>
<a class="menu3">
<span>Portal</span>
</a>
<a class="menu4">
<span>Left 4 Dead 2</span>
</a>
</div>

<div id="banner">
<a id="home_photo" href="javascript:;">
<img src="http://www.guesswhatiforgot.co.uk/siteimages/16/0/8/160826/3085655.jpg" alt="Valve Software" />
</a>
<a href="javascript:;">
<img src="http://www.guesswhatiforgot.co.uk/siteimages/16/0/8/160826/3084713.jpg" alt="Half-Life 2" />
</a>
<a href="javascript:;">
<img src="http://www.guesswhatiforgot.co.uk/siteimages/16/0/8/160826/3084714.jpg" alt="Team Fortress 2" />
</a>
<a href="javascript:;">
<img src="http://www.guesswhatiforgot.co.uk/siteimages/16/0/8/160826/3085089.jpg" alt="Portal" />
</a>
<a href="javascript:;">
<img src="images/banner_l4d2.jpg" alt="Left 4 Dead 2" />
</a>

</div>

</div>
</body>
</html>

<code>

I've tried "href" etc, but it never seems to work right. Any help is appreciated.

Thank you :thumbsup::D

Major Payne
01-29-2012, 05:45 PM
Take a look at this as to how they did it. Might give you some ideas.

http://javascript.internet.com/image-effects/banner-rotater.html



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum