SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Enthusiast LABachlr's Avatar
    Join Date
    Mar 2004
    Location
    I'll give you one guess
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Why doesn't this script work?

    I found a script that I would love to use, but I can't seem to get it to work.

    The way it is supposed to behave is when you click on a thumbnail pic on the right, the larger version appears in the larger table to the left, and the larger picture stays there until you click on another thumbnail.

    Here's a page where the script works great:

    <HTML>
    <HEAD>
    <TITLE></TITLE>
    <SCRIPT LANGUAGE="JavaScript">

    <!--

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    eddie_new_02_eddie_new_03_over = newImage("images/eddie_new_02-eddie_new_03_o.gif");
    eddie_new_03_over = newImage("images/eddie_new_03-over.gif");
    eddie_new_04_eddie_new_03_over = newImage("images/eddie_new_04-eddie_new_03_o.gif");
    eddie_new_04_eddie_new_08_over = newImage("images/eddie_new_04-eddie_new_08_o.gif");
    eddie_new_04_eddie_new_11_over = newImage("images/eddie_new_04-eddie_new_11_o.gif");
    eddie_new_04_eddie_new_14_over = newImage("images/eddie_new_04-eddie_new_14_o.gif");
    eddie_new_05_eddie_new_03_over = newImage("images/eddie_new_05-eddie_new_03_o.gif");
    eddie_new_05_eddie_new_08_over = newImage("images/eddie_new_05-eddie_new_08_o.gif");
    eddie_new_05_eddie_new_11_over = newImage("images/eddie_new_05-eddie_new_11_o.gif");
    eddie_new_05_eddie_new_14_over = newImage("images/eddie_new_05-eddie_new_14_o.gif");
    eddie_new_07_eddie_new_08_over = newImage("images/eddie_new_07-eddie_new_08_o.gif");
    eddie_new_08_over = newImage("images/eddie_new_08-over.gif");
    eddie_new_10_eddie_new_11_over = newImage("images/eddie_new_10-eddie_new_11_o.gif");
    eddie_new_10_eddie_new_14_over = newImage("images/eddie_new_10-eddie_new_14_o.gif");
    eddie_new_11_over = newImage("images/eddie_new_11-over.gif");
    eddie_new_13_eddie_new_14_over = newImage("images/eddie_new_13-eddie_new_14_o.gif");
    eddie_new_14_over = newImage("images/eddie_new_14-over.gif");
    preloadFlag = true;
    }
    }

    // -->

    </SCRIPT>

    </HEAD>
    <BODY BGCOLOR=BLACK ONLOAD="preloadImages();">

    <TABLE BORDER=0 ALIGN = CENTER VALIGN = CENTER CELLPADDING=0 CELLSPACING=0>
    <TR>
    <TD>
    <IMG SRC="images/eddie_new_01.gif" WIDTH=189 HEIGHT=97></TD>
    <TD>
    <IMG NAME="eddie_new_02" SRC="images/eddie_new_02.gif" WIDTH=179 HEIGHT=97></TD>
    <TD>
    <A HREF="#" onClick="changeImages('eddie_new_05', 'images/eddie_new_05-eddie_new_03_o.gif')">
    <IMG NAME="eddie_new_03" SRC="images/eddie_new_03.gif" WIDTH=92 HEIGHT=97 BORDER=0></A></TD>
    <TD ROWSPAN=4>
    <IMG NAME="eddie_new_04" SRC="images/eddie_new_04.gif" WIDTH=11 HEIGHT=370></TD>
    <TD ROWSPAN=4>
    <IMG NAME="eddie_new_05" SRC="images/eddie_new_05.gif" WIDTH=249 HEIGHT=370></TD>
    </TR>
    <TR>
    <TD>
    <IMG SRC="images/eddie_new_06.gif" WIDTH=189 HEIGHT=87></TD>
    <TD>
    <IMG NAME="eddie_new_07" SRC="images/eddie_new_07.gif" WIDTH=179 HEIGHT=87></TD>
    <TD>
    <A HREF="#" onClick="changeImages('eddie_new_05', 'images/eddie_new_05-eddie_new_08_o.gif')">
    <IMG NAME="eddie_new_08" SRC="images/eddie_new_08.gif" WIDTH=92 HEIGHT=87 BORDER=0></A></TD>
    </TR>
    <TR>
    <TD>
    <IMG SRC="images/eddie_new_09.gif" WIDTH=189 HEIGHT=88></TD>
    <TD>
    <IMG NAME="eddie_new_10" SRC="images/eddie_new_10.gif" WIDTH=179 HEIGHT=88></TD>
    <TD>
    <A HREF="#" onClick="changeImages('eddie_new_04', 'images/eddie_new_04-eddie_new_11_o.gif', 'eddie_new_05', 'images/eddie_new_05-eddie_new_11_o.gif', 'eddie_new_10', 'images/eddie_new_10-eddie_new_11_o.gif', 'eddie_new_11', 'images/eddie_new_11-over.gif')"
    ONMOUSEOVER="changeImages('eddie_new_11', 'images/eddie_new_11-over.gif'); return true;"
    ONMOUSEOUT="changeImages('eddie_new_04', 'images/eddie_new_04.gif', 'eddie_new_10', 'images/eddie_new_10.gif', 'eddie_new_11', 'images/eddie_new_11.gif'); return true;">
    <IMG NAME="eddie_new_11" SRC="images/eddie_new_11.gif" WIDTH=92 HEIGHT=88 BORDER=0></A></TD>
    </TR>
    <TR>
    <TD>
    <IMG SRC="images/eddie_new_12.gif" WIDTH=189 HEIGHT=98></TD>
    <TD>
    <IMG NAME="eddie_new_13" SRC="images/eddie_new_13.gif" WIDTH=179 HEIGHT=98></TD>
    <TD>
    <A HREF="#" onClick="changeImages('eddie_new_04', 'images/eddie_new_04-eddie_new_14_o.gif', 'eddie_new_05', 'images/eddie_new_05-eddie_new_14_o.gif', 'eddie_new_10', 'images/eddie_new_10-eddie_new_14_o.gif', 'eddie_new_13', 'images/eddie_new_13-eddie_new_14_o.gif', 'eddie_new_14', 'images/eddie_new_14-over.gif')"
    ONMOUSEOVER="changeImages('eddie_new_14', 'images/eddie_new_14-over.gif'); return true"
    ONMOUSEOUT="changeImages('eddie_new_04', 'images/eddie_new_04.gif', 'eddie_new_10', 'images/eddie_new_10.gif', 'eddie_new_13', 'images/eddie_new_13.gif', 'eddie_new_14', 'images/eddie_new_14.gif'); return true;">
    <IMG NAME="eddie_new_14" SRC="images/eddie_new_14.gif" WIDTH=92 HEIGHT=98 BORDER=0></A></TD>
    </TR>
    </TABLE>

    </TR>
    </TABLE>
    </BODY>
    </HTML>
    But in the page below, it doesn't work. What's wrong with the page below?

    NOTE: I only applied the desired behavior to two of the thumbnails in the page below.


    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <title></title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <link href="lb.css" rel="stylesheet" type="text/css">
    <script language="JavaScript" 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];}
    }
    //-->

    </script>

    <SCRIPT LANGUAGE="JavaScript">

    <!--

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    laurie_1 = newImage("images/laurie_1.jpg");
    laurie_2 = newImage("images/laurie_2.jpg");
    laurie_3 = newImage("images/laurie_3.jpg");
    laurie_4 = newImage("images/laurie_4.jpg");
    laurie_5 = newImage("images/laurie_5.jpg");
    laurie_6 = newImage("images/laurie_6.jpg");
    laurie_11 = newImage("images/laurie_11.jpg");
    preloadFlag = true;
    }
    }

    // -->

    </SCRIPT>

    </head>

    <body background="images/back.gif" onLoad="MM_preloadImages('images/contact-r.gif','images/resume-r.gif','images/home-r.gif','images/bio-r.gif','images/reels-r.gif')">

    <table width="727" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
    <td width="111" height="68"></td>
    <td width="51"></td>
    <td width="531" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
    <td width="531" height="68" valign="top"><div align="right"><img src="images/title-blk.jpg" width="300" height="63"></div></td>
    </tr>
    </table></td>
    <td width="34"></td>
    </tr>
    <tr>
    <td height="300" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0">
    <!--DWLayoutTable-->
    <tr>
    <td width="110" height="50" valign="top"><a href="index.html" onMouseOver="MM_swapImage('Image2','','images/home-r.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/home.gif" name="Image2" width="110" height="50" border="0" id="Image2"></a></td>
    <td width="1">&nbsp;</td>
    </tr>
    <tr>
    <td height="50" colspan="2" valign="top"><a href="bio.htm" onMouseOver="MM_swapImage('Image3','','images/bio-r.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/bio.gif" name="Image3" width="110" height="50" border="0" id="Image3"></a></td>
    </tr>
    <tr>
    <td height="50" colspan="2" valign="top"><a href="resume.htm" onMouseOver="MM_swapImage('Image4','','images/resume-r.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/resume.gif" name="Image4" width="110" height="50" border="0" id="Image4"></a></td>
    </tr>
    <tr>
    <td height="50" colspan="2" valign="top"><img src="images/photos-r.gif" name="Image5" width="110" height="50" border="0" id="Image5"></td>
    </tr>
    <tr>
    <td height="50" colspan="2" valign="top"><a href="reels.htm" onMouseOver="MM_swapImage('Image6','','images/reels-r.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/reels.gif" name="Image6" width="110" height="50" border="0" id="Image6"></a></td>
    </tr>
    <tr>
    <td height="50" colspan="2" valign="top"><a href="contact.htm" onMouseOver="MM_swapImage('Image1','','images/contact-r.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/contact.gif" name="Image1" width="110" height="50" border="0" id="Image1"></a></td>
    </tr>
    </table></td>
    <td>&nbsp;</td>
    <td rowspan="2" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
    <!--DWLayoutTable-->
    <tr>
    <td width="269" rowspan="4" valign="top" bgcolor="#000000" class="grn"><div align="center">
    <p>&nbsp;<br>
    <img name="laurie_1" src="images/laurie_1.jpg" width="250" height="379"><br>
    &nbsp; </p>
    </div></td>
    <td width="38" rowspan="4" valign="top" bgcolor="#000000"><!--DWLayoutEmptyCell-->&nbsp;</td>
    <td width="18" rowspan="3" valign="top"><div align="center">
    <p>&nbsp;</p>
    </div></td>
    <td width="75" height="1"></td>
    <td width="18"></td>
    <td width="113" rowspan="3" valign="top"><div align="center">
    <p><br>
    <img src="images/laurie_1_75_b.jpg" name="laurie_1_75_b" width="75" height="116" border="0"><A HREF="#" onClick="changeImages('laurie_1', 'images/laurie_3.jpg')"><img name="laurie_3_75_b" src="images/laurie_3_75_b.jpg" width="75" height="116" border="0"></a><img src="images/laurie_11_75_b.jpg" name="laurie_11_75_b" width="75" height="114">
    </p>
    </div></td>
    </tr>
    <tr>
    <td height="100" valign="top"><br>
    <A HREF="#" onClick="changeImages('laurie_1', 'images/laurie_2.jpg')">
    <img name="laurie_2_75_b" src="images/laurie_2_75_b.jpg" width="75" height="82" border="0"></a></td>
    <td rowspan="2" valign="top"><!--DWLayoutEmptyCell-->&nbsp;</td>
    </tr>
    <tr>
    <td height="289">&nbsp;</td>
    </tr>
    <tr>
    <td height="36" colspan="4" valign="top"><div align="center"><font size="1"><br>
    1 2</font></div></td>
    </tr>
    </table></td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td height="126"></td>
    <td></td>
    <td>&nbsp;</td>
    </tr>
    <tr>
    <td height="59"></td>
    <td></td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    In your page, your href has a value so when you click the link the whole page is changing.

    In the demo page, the href has a value of "#" i.e. "do nothing" and the value of the main image is changed using the onClick method.

    Compare:
    Quote Originally Posted by Your code (line 95)
    <a href="index.html" onMouseOver="MM_swapImage('Image2','','images/home-r.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="images/home.gif" name="Image2" width="110" height="50" border="0" id="Image2"></a>
    Quote Originally Posted by Demo code (line 75)
    <A HREF="#" onClick="changeImages('eddie_new_05', 'images/eddie_new_05-eddie_new_08_o.gif')">
    <IMG NAME="eddie_new_08" SRC="images/eddie_new_08.gif" WIDTH=92 HEIGHT=87 BORDER=0></A>
    Andy
    From the English nation to a US location.

  3. #3
    SitePoint Enthusiast LABachlr's Avatar
    Join Date
    Mar 2004
    Location
    I'll give you one guess
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, the coding that you refer to are in two different sections. The first coding that you mentioned is in the navigation button section. The second coding that you mentioned is in the thumbnail section, which is the section that I am referring to.

    The coding for the sections that I am referring to are the following:

    Original Page (Line 61)

    <TD>
    <A HREF="#" onClick="changeImages('eddie_new_05', 'images/eddie_new_05-eddie_new_03_o.gif')">
    <IMG NAME="eddie_new_03" SRC="images/eddie_new_03.gif" WIDTH=92 HEIGHT=97 BORDER=0></A></TD>
    New Page (Line 137)

    <td height="100" valign="top"><br>
    <A HREF="#" onClick="changeImages('laurie_1', 'images/laurie_2.jpg')">
    <img name="laurie_2_75_b" src="images/laurie_2_75_b.jpg" width="75" height="82" border="0"></a></td>
    The coding above works for the original page, but not for the new page.

    And the script that is running these sections are the following:

    Original Page (Line 4)

    <SCRIPT LANGUAGE="JavaScript">

    <!--

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    eddie_new_02_eddie_new_03_over = newImage("images/eddie_new_02-eddie_new_03_o.gif");
    eddie_new_03_over = newImage("images/eddie_new_03-over.gif");
    eddie_new_04_eddie_new_03_over = newImage("images/eddie_new_04-eddie_new_03_o.gif");
    eddie_new_04_eddie_new_08_over = newImage("images/eddie_new_04-eddie_new_08_o.gif");
    eddie_new_04_eddie_new_11_over = newImage("images/eddie_new_04-eddie_new_11_o.gif");
    eddie_new_04_eddie_new_14_over = newImage("images/eddie_new_04-eddie_new_14_o.gif");
    eddie_new_05_eddie_new_03_over = newImage("images/eddie_new_05-eddie_new_03_o.gif");
    eddie_new_05_eddie_new_08_over = newImage("images/eddie_new_05-eddie_new_08_o.gif");
    eddie_new_05_eddie_new_11_over = newImage("images/eddie_new_05-eddie_new_11_o.gif");
    eddie_new_05_eddie_new_14_over = newImage("images/eddie_new_05-eddie_new_14_o.gif");
    eddie_new_07_eddie_new_08_over = newImage("images/eddie_new_07-eddie_new_08_o.gif");
    eddie_new_08_over = newImage("images/eddie_new_08-over.gif");
    eddie_new_10_eddie_new_11_over = newImage("images/eddie_new_10-eddie_new_11_o.gif");
    eddie_new_10_eddie_new_14_over = newImage("images/eddie_new_10-eddie_new_14_o.gif");
    eddie_new_11_over = newImage("images/eddie_new_11-over.gif");
    eddie_new_13_eddie_new_14_over = newImage("images/eddie_new_13-eddie_new_14_o.gif");
    eddie_new_14_over = newImage("images/eddie_new_14-over.gif");
    preloadFlag = true;
    }
    }

    // -->

    </SCRIPT>
    New Page (Line 36)

    <SCRIPT LANGUAGE="JavaScript">

    <!--

    function newImage(arg) {
    if (document.images) {
    rslt = new Image();
    rslt.src = arg;
    return rslt;
    }
    }

    function changeImages() {
    if (document.images && (preloadFlag == true)) {
    for (var i=0; i<changeImages.arguments.length; i+=2) {
    document[changeImages.arguments[i]].src = changeImages.arguments[i+1];
    }
    }
    }

    var preloadFlag = false;
    function preloadImages() {
    if (document.images) {
    laurie_1 = newImage("images/laurie_1.jpg");
    laurie_2 = newImage("images/laurie_2.jpg");
    laurie_3 = newImage("images/laurie_3.jpg");
    laurie_4 = newImage("images/laurie_4.jpg");
    laurie_5 = newImage("images/laurie_5.jpg");
    laurie_6 = newImage("images/laurie_6.jpg");
    laurie_11 = newImage("images/laurie_11.jpg");
    preloadFlag = true;
    }
    }

    // -->

    </SCRIPT>
    The "#" is just there so the javascript can function.

    Not sure what is wrong. The coding is pretty much identical in the sections in question. Somewhere in the new page, however, something is off.

  4. #4
    SitePoint Enthusiast LABachlr's Avatar
    Join Date
    Mar 2004
    Location
    I'll give you one guess
    Posts
    67
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just figured it out after many hours! It's the way the new page was preloading the images in the body tag. I changed the coding to the following to match the original page and voila!

    <body background="images/back.gif" ONLOAD="preloadImages();">


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •