Jump to content

Swap Image AND Image Link

Canadian

By Canadian
in Javascript Help

 Share

Recommended Posts

Canadian Member

Canadian

Posted
Posted

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");
?>

 

Link to comment
Share on other sites
gizmola Prolific Member

gizmola

Posted
Posted

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.

Link to comment
Share on other sites
This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
 Share
Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.