Rollover image conflicting with gallery

Johnnyboy123 · November 1, 2011

So I'm starting this site for a small company and I'm already stuck lol. Basically, on my home page I have rollover images coded with javascript ( I used dreamweaver, so the coding was done auto by dreamweaver not by me) and then I also have an auto gallery, which plays by itself and automatically scrolls through images. The gallery is also coded in javascript. They both work perfectly fine, until they are put together on the same page. I have tested the page by either removing the gallery and leaving the rollover images, or vice versa, and they both work. However, when I use both on the same page, it seems only the rollover images work and the gallery doesn't display it's pictures at all. I'm assuming the code is conflicting with each other in some way, but my javascript is extremely rusty (hence using dreamweaver). Can anyone help me out? Here's my code, thanks in advance:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<SCRIPT LANGUAGE="JavaScript">
<!--
// image paths
src = ["1.gif", "2.gif"]

//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>



<style type="text/css">
body {
background-image: url();
background-color: #000;
}
#apDiv1 {
position:Relative;

margin:0px auto;
width:1024px;
height:768px;
z-index:1;
}
#apDiv2 {
position:absolute;
left:1022px;
top:125px;
width:2px;
height:0px;
z-index:2;
}
#apDiv3 {
position:absolute;
left:10px;
top:312px;
width:24px;
height:33px;
z-index:2;
}
#apDiv4 {
position:absolute;
left:58px;
top:461px;
width:334px;
height:265px;
z-index:2;
}
#apDiv5 {
position:absolute;
left:59px;
top:237px;
width:575px;
height:161px;
z-index:2;
font-size: 16px;
}
#apDiv5 p {
font-size: 36px;
}
#apDiv5 p {
font-size: 28px;
}
#apDiv6 {
position:absolute;
left:447px;
top:474px;
width:263px;
height:266px;
z-index:3;
font-size: 18px;
text-align: justify;
}
#apDiv7 {
position:absolute;
left:825px;
top:360px;
width:153px;
height:403px;
z-index:2;
}
#apDiv5 p {
font-size: 20px;
text-align: justify;
}
.dd {
text-align: center;
}
.ddd {
text-align: justify;
font-size: 18px;
}
#apDiv5 .dd .ddd {
font-size: 20px;
}
.s {
text-align: center;
}
#apDiv8 {
position:absolute;
left:176px;
top:119px;
width:157px;
height:38px;
z-index:4;
}
#apDiv9 {
position:absolute;
left:42px;
top:188px;
width:144px;
height:45px;
z-index:4;
}
#apDiv10 {
position:absolute;
left:183px;
top:188px;
width:144px;
height:45px;
z-index:2;
}
#apDiv11 {
position:absolute;
left:321px;
top:188px;
width:144px;
height:45px;
z-index:2;
}
#apDiv12 {
position:absolute;
left:456px;
top:188px;
width:144px;
height:45px;
z-index:3;
}
#apDiv13 {
position:absolute;
left:155px;
top:81px;
width:84px;
height:37px;
z-index:2;
}
#apDiv14 {
position:absolute;
left:42px;
top:188px;
width:144px;
height:45px;
z-index:2;
}
#apDiv15 {
position:absolute;
left:180px;
top:188px;
width:144px;
height:45px;
z-index:3;
}
#apDiv16 {
position:absolute;
left:319px;
top:188px;
width:144px;
height:45px;
z-index:4;
}
#apDiv17 {
position:absolute;
left:455px;
top:188px;
width:144px;
height:45px;
z-index:5;
}
#apDiv18 {
position:absolute;
left:78px;
top:293px;
width:718px;
height:464px;
z-index:2;
}
</style>
</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" />

<!-- Gallery -->
<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">The mission of Jimm'ys Trailer Hire is to provide a means to the need of a way  of transportation to the market. We aim to give our best quality service and  expand the company over time. Customer satisfaction is our prime concern. We  strive to give our customers good quality service.</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" id="Image3" /></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" id="Image4" /></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" id="Image5" /></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" id="Image6" /></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>
</body>
</html>

Apologies, I couldn't get the code to post in color, pardon my noobness.

Sign In

Rollover image conflicting with gallery

Recommended Posts

Johnnyboy123

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information