Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jan 2012
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Hyper linking pictures in a Rotating Banner

    I'm not very good at code etc, so go easy.

    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/no...in23-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

  • #2
    Regular Coder
    Join Date
    Aug 2005
    Location
    MS
    Posts
    843
    Thanks
    11
    Thanked 79 Times in 77 Posts
    Take a look at this as to how they did it. Might give you some ideas.

    http://javascript.internet.com/image...r-rotater.html
    Last edited by Major Payne; 01-29-2012 at 05:47 PM.
    ☠ ☠RON☠ ☠


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •