JavaScript Forum

**rolda hayes** · 01-10-2008, 12:47 PM

Hi, please look at the code below.
This is something I have done 100 times before but this time it wont work!

Clicking the small thumbs should make the image on the left change to the full version.

Any ideas where im going wrong??

p.s. I know the css is included in the page but made a quick example page.

Code:

<!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>
<style type="text/css">
<!--
.style1 {color: #FFCC00}
-->
</style>
<link href="style.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
.style12 {color: #FFFFFF}
.style13 {font-size: 12px}
.style3 {	color: #FFFFFF;
	font-weight: bold;
}
.style9 {font-size: 14px;
	font-weight: bold;
	color: #000000;
}
-->
</style>
<script type="text/javascript">
<!--
function MM_changeProp(objId,x,theProp,theValue) { //v9.0
  var obj = null; with (document){ if (getElementById)
  obj = getElementById(objId); }
  if (obj){
    if (theValue == true || theValue == false)
      eval("obj.style."+theProp+"="+theValue);
    else eval("obj.style."+theProp+"='"+theValue+"'");
  }
}
//-->
</script>
</head>

<body>
<table width="72%" border="0" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF">
  <tr align="center" valign="top">
    <td><table width="100%" border="0" cellpadding="5" cellspacing="0" bgcolor="#EAEAEA">
      <tr align="center" valign="top">
        <td width="33%" bgcolor="#000000"><div align="center" class="producttitle"><span class="style1">VAN RACKING PACKAGE 1</span><span class="style1"> </span></div></td>
        <td width="34%" bgcolor="#000000"><div align="center" class="producttitle">
          <div align="center">VW Transporter T5 SWB</div>
        </div></td>
        <td width="33%" bgcolor="#000000"><div align="center">
          <div align="center">
            <div align="center" class="producttitle">Ref: GKT5-PACK</div>
          </div>
        </div></td>
      </tr>
      <tr align="center" valign="top">
        <td class="bullits"><table width="200" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td width="200" valign="top" class="arial11"><img src="packages/t51.jpg" alt="Van Racking Package Deal For VW T5" name="main1" width="200" height="150" border="0" id="main1" /><br /></td>
          </tr>
        </table>
            <br />
          click images to change view</td>
        <td colspan="2"><table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td bgcolor="#FFFFFF" class="arial11"><p align="left">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor   incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis   nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.   Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu   fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident.<br />
            </p></td>
          </tr>
          <tr>
            <td valign="top" class="arial11"><table width="100%" border="0" align="right" cellpadding="2" cellspacing="0" bgcolor="#EAEADB">
              <tr valign="top" bgcolor="#EAEAEA" class="bullits">
                <td colspan="2" bgcolor="#EAEAEA"><table width="80%" border="0" align="center">
                  <tr>
                    <td width="27%"><img src="packages/st51.jpg" width="100" height="75" onclick="MM_changeProp('main1','','src','packages/t51.jpg','IMG')" /></td>
                    <td width="27%"><img src="packages/st52.jpg" alt="" width="100" height="75" onclick="MM_changeProp('main1','','src','packages/t51.jpg','IMG')" /></td>
                    <td width="18%"><img src="packages/st53.jpg" alt="" width="100" height="75" onclick="MM_changeProp('main1','','src','packages/t53.jpg','IMG')" /></td>
                    <td width="28%"><img src="packages/st54.jpg" alt="" width="100" height="75" onclick="MM_changeProp('main1','','src','packages/t54.jpg','IMG')" /></td>
                  </tr>
                </table></td>
              </tr>
              <tr valign="top" bgcolor="#EAEAEA" class="bullits">
                <td colspan="2" bgcolor="#EAEAEA"><table width="82%" border="0" align="right" cellpadding="1" cellspacing="0">
                  <tr>
                    <td width="54%" bgcolor="#EAEAEA" class="price"><div align="right">&pound;00.00 + vat</div></td>
                    <td width="18%" bgcolor="#EAEAEA" class="pricesmall"><div align="right">&pound;00.00 inc</div></td>
                    <td width="28%" bgcolor="#EAEAEA"><div align="right"></div></td>
                  </tr>
                </table></td>
              </tr>
            </table></td>
          </tr>
        </table></td>
      </tr>
    </table></td>
  </tr>
</table>
<p>&nbsp;</p>
<p>&nbsp;</p>
</body>
</html>

**chrishirst** · 01-11-2008, 04:43 AM

this code

eval("obj.style."+theProp+"='"+theValue+"'");

would evaluate to obj.style.src = imagepath;

there is no property for style called "src"

there is obviously an attribute for an image element of src which is what I guess is what you are trying to change?

so if my assumption is correct

eval("obj."+theProp+"='"+theValue+"'");
should be what you need.

**rolda hayes** · 01-11-2008, 05:13 AM

Cheers Chris, works spot on now! (sorry for posting in the wrong forum...!)