Swap Image AND Image Link

Canadian · August 10, 2010

I've set up a simple image swap on a timer for the home page of my website. The "main" image automatically changes every 4 seconds. I was hoping to add a unique link to each image. For example, if Image #1 was talking about dogs, I could link to a page on dogs, and if image #2 was talking about cats, I could link to a page on cats.

The image swap is taking place inside of <div id="content">. And of course the javascript is in the head. I'll post the code below. Any ideas on how to link each image to a different page would be greatly appreciated.

Thank you,


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Flow Template New</title>

<link rel="stylesheet" type="text/css" href="../styles/template_new.css" media="all" />

<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}

function MM_swapImgRestore() { //v3.0
  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
}

function MM_findObj(n, d) { //v4.01
  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
  if(!x && d.getElementById) x=d.getElementById(n); return x;
}

function MM_swapImage() { //v3.0
  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}

// Comma separated list of images to rotate 
var imgs = new Array('images/template_content_top.png', 'images/template_content_top_2.png', 'images/template_content_top_3.png');
// delay in milliseconds between image swaps 1000 = 1 second 
var delay = 4000;
var counter = 0;

function preloadImgs(){
  for(var i=0;i<imgs.length;i++){
    MM_preloadImages(imgs[i]);
  }
}

function randomImages(){
  if(counter == (imgs.length)){
    counter = 0;
  }
  MM_swapImage('rotator', '', imgs[counter++]);
  setTimeout('randomImages()', delay);
}
//-->
</script>
</head>

<body onload="preloadImgs();randomImages();">

<div id="main">

  <div class="container">
  
  	<div id="header">
        
  		<ul id="menu">
        
	  <li><a href="wheels.php" id="wheels_nav">Wheels</a></li>
	  <li><a href="store.php" id ="store_nav">Store</a></li>
          <li><a href="http://xxx.blogspot.com/" id ="blog_nav">Blog</a></li>
	  <li><a href="tech.php" id ="tech_nav">Tech</a></li>
          <li><a href="aero.php" id ="aero_nav">Aero</a></li>
          <li><a href="about.php" id ="about_nav">About</a></li>
          <li><a href="contact.php" id ="contact_nav">Contact</a></li>
	</ul>
        
      <div id="logo">  
      
      	<a href="http://www.xxx.com"><img src="http://www.xxx.com/images/template_flo_logo_reflection.gif" alt="flow" border="0" class="header_img" /></a>
        
        <h1>test</h1>  
                    <small>affordable</small>  
                    
   	  </div> <!--logo--> 
        
    </div> <!--header-->
    
    <div id="content">
    
   	  <div id="content_top" ('images/template_content_top.png', 'images/template_content_top_2.png', 'images/template_content_top_3.png',1)">      
      
      	<img src="images/template_content_top.png" alt="flo cycling" name="rotator" width="980" id="rotator" />      </div> <!--content_top-->
      
      <div id="content_bottom">
      
      	<div class="mini_content_left">
        
        	<img src="images/template_mini_content_holder_2.png" alt="youtube" width="300" height="200" />        </div> <!--mini_content-->
        
        <div class="mini_content_center">
        
        	<img src="images/template_mini_content_holder_4.png" alt="youtube" width="300" height="200" id="Image1" />        </div> 
        <!--mini_content-->
      
      	<div class="mini_content_right">
        
<script src="http://widgets.twimg.com/j/2/widget.js"></script>
<script>
new TWTR.Widget({
  version: 2,
  type: 'profile',
  rpp: 2,
  interval: 6000,
  width: 300,
  height: 200,
  theme: {
    shell: {
      background: '#333333',
      color: '#ffffff'
    },
    tweets: {
      background: '#ffffff',
      color: '#333333',
      links: '#0066ff'
    }
  },
  features: {
    scrollbar: false,
    loop: false,
    live: false,
    hashtags: true,
    timestamp: true,
    avatars: false,
    behavior: 'all'
  }
}).render().setUser('flowcycling').start();
</script>

        </div> <!--mini_content-->
            
            
            
            
            
      </div> 
      <!--content_bottom-->
   
  </div> <!--content-->
    
    
  </div> <!--container-->

</div> <!--main-->

<?php
include("footer_xxx.php");
?>

gizmola · August 10, 2010

That's some fugly old javascript, but the simple answer is that rather than having your MM_swapImage() function only looking for and changing the img.src, you could setup another array that has the urls's in the same order to match the images and have it emit an anchor tag around the image inside that same function, using the same index for this urls array.

Speaking frankly, there's a reason people use javascript frameworks like jquery for these types of things, because that code is hard to read and even harder to modify.

Canadian · August 10, 2010

Haha. I'm a total newbie to Javascript. You mentioned that I could use a javascript framework called jquery to do this type of thing. Could you elaborate or point me in a direction?

Thanks again for your time.

Canadian · August 10, 2010

I just wanted to provide this solution.

http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html

gizmola · August 10, 2010

Nice clean code for that in the markup, and transition effects as icing on the cake. The other great thing about jquery is that it has been built to work across browsers and versions and degrade as gracefully as possible.

Sign In

Swap Image AND Image Link

Recommended Posts

Canadian

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

Canadian

Link to comment

Share on other sites

Canadian

Link to comment

Share on other sites

gizmola

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information