Jump to content

Rollover buttons conflicting with auto scroll gallery

Johnnyboy69

By Johnnyboy69
in Javascript Help

 Share

Recommended Posts

Johnnyboy69 Newbie

Johnnyboy69

Posted
Posted

So I have a web page which has javascript rollover buttons and an auto gallery which scrolls through pics automatically. I made most of this using dreamweaver as my javascript is quite sloppy. The problem I am having is, both sets of code works perfectly fine on their own. The rollover buttons work and the gallery, but when added together on the same page only the rollover buttons function and the gallery doesn't start auto scrolling at all. When i take away the rollover buttons, it works again. Any ideas of why this is happening?

 

 

<!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>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
//set image paths
src = ["1.gif", "2.gif"]



//set duration for each image
duration = 3;


ads=[]; ct=0;
function switchAd() {
var n=(ct+1)%src.length;
if (ads[n] && (ads[n].complete || ads[n].complete==null)) {
document["Ad_Image"].src = ads[ct=n].src;
}
ads[n=(ct+1)%src.length] = new Image;
ads[n].src = src[n];
setTimeout("switchAd()",duration*1000);
}
function doLink(){
location.href = url[ct];
} onload = function(){
if (document.images)
switchAd();
}

// end of auto gallery

//start of rollover images

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];}
}
//-->


</script>



</head>

<body onload="MM_preloadImages('buttons/home.gif','buttons/gallery2.gif','buttons/products2.gif','buttons/contacts2.gif')">


<div id="apDiv1"><img src="background4.gif" width="1024" height="768" />
<div id="apDiv4">
<IMG NAME="Ad_Image" SRC="image1.gif" BORDER=0>
</div>

<div id="apDiv5">
<center>
<b><p> Welcome to Jimmy's trailer Hire </p></b>
</center>
  <p class="dd"><span class="ddd">Jimmy's Trailer Hire is a company specializing in trailer rentals and the selling of second hand vehicles and canopies. </span><span class="ddd">We have been in business for 17 years now and have established a respectfull and quality reputation in the area. We promise quality and professional service in every aspect of what we do. Please have a look through our website and enjoy your stay. </span></p>
</div>
<div id="apDiv6">
  <p>Jimmy's Trailer Hire aims to fullfill all your transportation needs. dkkdwkdkowdowdkowkdowkdowkd</p>
  <p>dwdwdwdwdw<br />
    <br />
    Business hours <br />
    <br />
    Monday - Friday: 
    <br />
    Sat - Sun:
    <br />
    <br/>
    <b> 24/7 Road assistance. </b></p>
</div>
<!-- Buttons -->
<div id="apDiv14"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','buttons/home.gif',1)"><img src="buttons/hom1.gif" name="Image3" width="143" height="38" border="0" usemap="#home1MapMap3" id="Image3" />
  <map name="home1MapMap3" id="home1MapMap3">
    <area shape="rect" coords="4,3,159,48" href="index.html" />
  </map>
</a></div>
<div id="apDiv15"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','buttons/gallery2.gif',1)"><img src="buttons/gallery.gif" name="Image4" width="144" height="38" border="0" usemap="#home1MapMap3Map" id="Image4" />
  <map name="home1MapMap3Map" id="home1MapMap3Map">
    <area shape="rect" coords="4,3,159,48" href="pages/gallery.html" />
  </map>
</a></div>
<div id="apDiv16"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','buttons/products2.gif',1)"><img src="buttons/products.gif" name="Image5" width="143" height="38" border="0" usemap="#home1MapMap3Map2" id="Image5" />
  <map name="home1MapMap3Map2" id="home1MapMap3Map2">
    <area shape="rect" coords="4,3,159,48" href="pages/products.html" />
  </map>
</a></div>
<div id="apDiv17"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','buttons/contacts2.gif',1)"><img src="buttons/contacts.gif" name="Image6" width="143" height="38" border="0" usemap="#home1MapMap3Map3" id="Image6" />
  <map name="home1MapMap3Map3" id="home1MapMap3Map3">
    <area shape="rect" coords="4,2,159,47" href="pages/contact.html" />
  </map>
</a></div>

<div id="apDiv7"> 
  <form action="dummy" method="post">
<select style="font-size:11px;color:#000000;font-family:verdana;background-color:#f0f0df;" name="choice" size="1" onChange="jump(this.form)"> <option value="">Choose a Link</option>
<option value="http://www.cnet.com">Cnet</option>
<option value="http://www.download.com">Downloads</option>
<option value="">- - - - - - - - - -</option>
<option value="http://www.apple.com">Apple</option>
<option value="http://www.microsoft.com">Microsoft</option>
</select></form>

<p>




</div>

</div>

<div id="apDiv18"></div>
</body>
</html>

 

 

Sorry guys, as embarrasing as it is, I couldn't get it right posting the code so it displays in colour lol. If anyone can tell me how I'll repost it quick.

Adam Advanced Member

Adam

Posted
Posted

You're binding two pieces of code to the document's onload event:

 

onload = function(){

if (document.images)

switchAd();

}

 

[...]

 

<body onload="MM_preloadImages('buttons/home.gif','buttons/gallery2.gif','buttons/products2.gif','buttons/contacts2.gif')">

 

The event can only be bound to one, so every time you bind it you're overwriting the previous handler. Move the MM_preloadImages() call into the anonymous function.

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.