Member Avatar for livilulu

Good Evening,

I am looking for some help with code that I found on Dynamic Drive here:
http://www.dynamicdrive.com/dynamicindex4/thumbnail2.htm

I am trying to use it on this page:

http://www.amandapopephotography.com/gallery2.php

here is the code I am using:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<head>
<title>Amanda Pope Photography</title>
<meta name="keywords" content="">
<meta name="Description" content=""> 
<META NAME="copyright" CONTENT="(c) 2007 Amanda Pope" />
<META NAME="rating" CONTENT="general" />
<META NAME="MS.LOCALE" CONTENT="EN-US" />
<META NAME="robots" CONTENT="index, follow" />
<META NAME="MSSmartTagsPreventParsing" CONTENT="TRUE" />
<link rel="stylesheet" type="text/css" href="<A href="http://www.amandapopephotography.com/style.css"></style">http://www.amandapopephotography.com/style.css"></style>
<script LANGUAGE="JavaScript" SRC="vital/rollovers.js"></script>
<meta http-equiv="imagetoolbar" content="no">
<script type="text/javascript" src="thumbnailviewer2.js" defer="defer">
/***********************************************
* Image Thumbnail Viewer II script- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* Visit [URL]http://www.dynamicDrive.com for hundreds of DHTML scripts
* This notice must stay intact for legal use
***********************************************/
</script>
</head>
<body bgcolor="#20130A">
<br>

<!--main content and photos here-->
<table align="center" bgcolor="#CEEBEB" width="750"><tr>
<td>
<div id="loadarea" style="width: 725px">
</div>
</td><td width="0"></td>
</tr>
<tr>
<td>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope1.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb1.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope2.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb2.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope3.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb3.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope4.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb4.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope5.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb5.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope6.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb6.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope8.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb8.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope9b.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb12.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope10.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb10.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope11.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb11.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope13.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb13.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope14.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb14.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope15.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb15.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope16b.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb17.jpg" border="0"></a>
<a href="[URL]http://www.amandapopephotography.com/images/gallery/pope18b.jpg" rel="enlargeimage::mouseover" rev="loadarea" title="gallery"><img src="[URL]http://www.amandapopephotography.com/images/gallery/thumbs/thumb18.jpg" border="0"></a>

</td><td width="0"></td>
</tr></table>
            
<br>
<table align="center" border="0" cellpadding="0" cellspacing="0" width="750"><tr><td>
<a href="<A href="http://www.amandapopephotography.com"><img">http://www.amandapopephotography.com"><img src="[URL]http://www.amandapopephotography.com/images/logo2.gif" border="0"></a></td>

<td>
<br><img src="[URL]http://www.serenityhousemaine.org/amandapopephotography/images/popenavbarleft.gif" usemap="#popenav" border="0">
<map name="popenav"> 
 <area shape="rect" coords="51,0,0,22" href="[URL]http://www.amandapopephotography.com/about.php" alt="About Amanda Pope" title="About Amanda Pope"> 
 <area shape="rect" coords="116,0,65,23" href="[URL]http://www.amandapopephotography.com/gallery.php" alt="Gallery" title="Gallery">
<area shape="rect" coords="197,0,135,23" href="[URL]http://www.amandapopephotography.com/contact.php" alt="Contact" title="Contact">
 <area shape="rect" coords="294,0,209,23" href="[URL]http://www.amandapopephotography.com/investment.php" alt="investment" title="investment">
<area shape="rect" coords="347,0,307,22" href="[URL]http://www.amandapopephotography.com/blog/news.html" alt="news" title="news">
<area shape="rect" coords="333,30,203,49" href="[URL]http://www.livilulupress.com" alt="Livi Lulu Press" title="Livi Lulu Press">
</map>
</td></tr></table>
 

<!--nav code here
<script language="php">include("<A href="http://www.amandapopephotography.com/vital/bottomnav.php");</script">http://www.amandapopephotography.com/vital/bottomnav.php");</script>
-->
<br>

</body>
</html>

I am getting the thumbnails showing up but the larger images are not showing up when mouse is on...can anyone see what I am doing wrong/how to fix??

I installed the js script in the vital folder just as I downloaded it..no changes.

Thank you in advance for your help! And yes, I know that it is coded in tables...I am slowly learning css and will get there soon!

  • 3 Contributors
  • 2 Replies
  • 209 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by rsatyajit77
Member Avatar for iamthwee

Well before you broadcast it live onto the internet have you tested it locally on your c: drive?

Member Avatar for rsatyajit77

Put this code abive head Tag

<script type="text/JavaScript">
<!--
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;
}

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.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}
}

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[n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.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))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
}
//-->
</script>

In body tag

<body onload="MM_preloadImages('xyx.jpg')">
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('1','','xyz.jpg',1)">
<img src="abc.jpg" alt="Rollover" name="1" width="516" height="331" border="0" id="1" /></a>

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.