Solved

Trying to manipulate Javascript DOM to move product name

Posted on 2008-10-07
5
571 Views
Last Modified: 2013-11-19
Hello,

I currently have a rough design of a scroll bar that displays thumbnails of various products with their product names. I am trying to move the product names from to the right of the corresponding thumbnail, to directly below the thumbnail.  I was thinking of nesting a <div> tag within another <div> tag so that the product name would be placed directly below the thumbnail, but I am not having much luck with it. Can anyone show me how? or does anyone have a more efficient way of doing it?

Thanks!
<?php

$heading='Product Viewer';
 

require './include/prodview_common.php';
 

$totalimages=0;

$product='';

$productArray = array();

$productDescriptionArray = array();

//if(isset($_GET['name'])) {

    $product=$_GET['name'];

    if(($link=mysql_connect("xxx.xxxx","xxxxx","xxxx"))!=false) {

        if(mysql_select_db("ptcommerce_products")!=false) {

            $result=mysql_query("SELECT PRODUCT_ID, TYPE FROM new_products");

            $totalimages = mysql_num_rows($result);

            while ($tempProd = mysql_fetch_row($result))

                {

                    array_push($productArray, $tempProd[0]);

                    array_push($productDescriptionArray,  $tempProd[1]);

                }

            

        } else

            echo "FAILURE!!";

        mysql_close($link);

    } 

    else 

        echo "Could not connect"; 

    

 
 

//echo str_replace("-", "/-", $product);
 

//$filestem=preg_replace('/[^a-z|0-9]++/i','', $product);
 

$filestem = $product;

$index=@$_GET['index'];

if($index<1) $index=1; elseif($index>$totalimages) $index=$totalimages;
 

$numberArray=array();

$zeroFill='0';

while($i<$totalimages) {

    $i++;

    if($i==10) $zeroFill='';

    $numberArray[$i]=$zeroFill.$i;

}
 

outputHeaderBegin($heading,2);

//echo '<link rel=stylesheet type="text/css" href="/css/product.css">';

echo '<script type="text/javascript" src="/js/lib/imageViewerJB.js"></script>';

echo '<script type="text/javascript">';

    echo 'var imageViewer;';

    echo 'function initialize() {';

        echo 'imageViewer={'.

            'callbackPeriod:80,'.

            'fixedPointPlaces:2,'.

            'velocityDecayShift:2,'.

            'driftSpeed:3,'.

            'thumbHeight:64,'.

            'thumbWidth:64,'.

            'thumbSeperator:2,'.

            'thumbBackgroundColor:\'white\','.

            'thumbBorderThickness:2,'.

            'thumbBorderColor:\'black\','.

            'selectedBorderThickness:3,'.

            'selectedBorderColor:\'blue\','.

            'hoverBorderColor:\'#BD2226\','.

            'emptyThumbColor:\'#666666\','.

            'emptyThumbImage:\'/images/style/empty.gif\','.

            'scrollBlock:document.getElementById(\'scrollBlock\'),'.

            'scrollBlock:document.getElementById(\'scrollBlock2\'),'.

            'viewImgTag:document.getElementById(\'viewImgTag\'),'.

            'arrowLeftImgTag:document.getElementById(\'arrowLeftImgTag\'),'.

            'arrowRightImgTag:document.getElementById(\'arrowRightImgTag\'),'.

            'arrowLeftImages:[\'/images/style/leftArrowDi.gif\',\'/images/style/leftArrow.gif\',\'/images/style/leftArrowHi.gif\'],'.

            'arrowRightImages:[\'/images/style/rightArrowDi.gif\',\'/images/style/rightArrow.gif\',\'/images/style/rightArrowHi.gif\'],'.

            'thumbImages:[';

        foreach($productArray as $product) echo '\'http://10.1.0.2/Plastic-Enclosures-Thumbs/'.$product.'.jpg\',';

        echo '\'\'],viewImages:[';

        foreach($productArray as $product) echo '\'http://10.1.0.2/Plastic-Enclosures-Thumbs/'.$product.'.jpg\',';

        echo '\'\'],totalImages:'.$totalimages.','.'currentImage:'.$index.',';

        echo 'link_url:[';

        foreach($productArray as $product) echo '\'http://10.1.0.2/Plastic-Enclosures/'.$product.'.html\',';

        echo '\'\'],';

         echo 'link_text:[';

        foreach($productArray as $product) echo '\''.$product.'\',';

        echo '\'\'],';

        echo 'link_description:[';

        foreach($productDescriptionArray as $product) echo '\''.$product.'\',';

        echo '\'\']';

        echo '};';

        
 

        

        

        echo 'initializeImageViewer.call(imageViewer);';

    echo '}';

echo '</script>';

outputHeaderEnd('onload="initialize();"',1);

outputFormatWideCenterStart();
 

echo '<table ><tr>';

echo '<td  valign=top colspan=2>';

    echo '<table style="width:100%;"><tr>';

    echo '<td style="width: 32px;border:1px solid black;"><img id=arrowLeftImgTag style="cursor:pointer;" src="/images/style/leftArrowDi.gif" alt=""></td>';

    echo '<td align=left style="border:1px solid black;"><div id=scrollBlock style="height:92px;width:600px;"><div id=scrollBlock2 style="height:50px;width:50px;"></div></div></td>';

    echo '<td style="width: 32px;border:1px solid black;"><img id=arrowRightImgTag style="cursor:pointer;" src="/images/style/rightArrowDi.gif" alt=""></td>';

    echo '</tr></table>';

    echo '<p style="clear:both;"><font face="Arial">New Products: Click on the product name to goto the product page.</font></p>';

echo '</td></tr><tr><td class=imageBox align=center valign=middle colspan=2>';

    echo '<img id=viewImgTag src="/images/style/empty.gif" alt="">';

echo '</td></tr></table>';

Open in new window

imageViewer.doc
0
Comment
Question by:MikeZ_LaFrance
  • 3
  • 2
5 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22667003
1. please post HTML as rendered by the browser
2. for other reasons, do not have whitespace around image tags in tables
3. if you use tables, why not use tables instead of divs?
4. what's with the echos??, why not just close the php tag and have plain html?


outputFormatWideCenterStart();

?> 

<table ><tr>

<td  valign=top colspan=2>

<table style="width:100%;"><tr>

<td style="width: 32px;border:1px solid black;"><img id=arrowLeftImgTag style="cursor:pointer;" src="/images/style/leftArrowDi.gif" alt=""></td>

<td align=left style="border:1px solid black;"><div id=scrollBlock style="height:92px;width:600px;"><div id=scrollBlock2 style="height:50px;width:50px;"></div></div></td>

<td style="width: 32px;border:1px solid black;"><img id=arrowRightImgTag style="cursor:pointer;" src="/images/style/rightArrowDi.gif" alt=""></td>

</tr></table>

<p style="clear:both;"><font face="Arial">New Products: Click on the product name to goto the product page.</font></p>

</td></tr><tr><td class=imageBox align=center valign=middle colspan=2><img id=viewImgTag src="/images/style/empty.gif" alt=""></td></tr></table>

Open in new window

0
 

Author Comment

by:MikeZ_LaFrance
ID: 22667929
Here is the browser generated html:

 

<html>

<link REL="SHORTCUT ICON" 

href="http://www.pactecenclosures.com/favicon.ico">

<head>

<title>

Plastic Enclosures and Plastic Boxes - Electronic enclosures of over 350 sizes - In the US, UK, Europe - PacTec Enclosures</title>

<META name="description" content="Plastic enclosures, boxes and cases for computer and electronic components; IP rated, keyboard, desktop, wall mount, handheld, rackmount enclosures for electronics, medical equipment and more. Plus housings for electrical connectors.">

<META name="keywords" content="

plastic enclosures, electronics, electrical connectors, medical equipment, PacTec enclosures, containers, electronic enclosures, computer components, scientific equipment, cases, plastic boxes, electronic components, electrical connectors, enclosure, connector, ip rated, keyboard, desktop, wall mount, handheld enclosures">
 

<LINK REL=stylesheet TYPE="text/css" HREF="/defaultStyle.css"></head>

<body leftmargin=0 topmargin=0 stats=1>

<!--BEGINNING OF DEEPMETRIX STATSCRIPT-->

<script language="javascript">

var DMdomain = "";

var DMpage = window.location;

var DMVersion = 86;

var DMsendTo = "//collector.deepmetrix.com/dm.gif?";

var DMsession;

function dmerr(){return true;}window.onerror=dmerr;

var u3k8u6y1j3 = new Date();

if (navigator.userAgent.indexOf('Mac') >= 0 && u3k8u6y1j3.getTimezoneOffset() >= 720){

u3k8u6y1j3.setTime (u3k8u6y1j3.getTime() - 1440*60*1000);}

var u3k8u6y1 = location.protocol+DMsendTo+"v="+DMVersion+"&vst=1";

var u3k8u6 = document.cookie.toString();if(u3k8u6.indexOf("_dmid") == -1)

{DMsession = parseInt( Math.random()*1000000 ) + "_" + u3k8u6y1j3.getTime();

var u3k8 = "";if(DMdomain != ""){u3k8 = "domain="+ DMdomain +";";}

document.cookie = "_dmid=" + DMsession + ";expires=Mon, 31-Dec-2008 00:00:00 GMT;"+u3k8+"path=/;";}

u3k8u6 = document.cookie.toString();if(u3k8u6.indexOf('_dmid') == -1){DMsession = "";}

else{if(u3k8u6.indexOf(';') == -1){u3k8u6 = u3k8u6.replace(/_dm/g, ';_dm');}var u3 = u3k8u6.indexOf("_dmid=") + 6;

var g5b1z7i5z6 = u3k8u6.indexOf(";",u3);if (g5b1z7i5z6 == -1){g5b1z7i5z6 = u3k8u6.length;}

DMsession = unescape(u3k8u6.substring(u3,g5b1z7i5z6));}

u3k8u6y1 += "&id="+DMsession+"&url="+escape(DMpage) + "&ref="+escape(document.referrer)+"&lng=" + 

((!document.all || navigator.userAgent.match('Opera')) ? navigator.language : navigator.userLanguage) + 

"&tz=" + (Math.round(new Date('dec 1, 2002').getTimezoneOffset()/60)*-1);

if(screen){u3k8u6y1 += "&scr=" + escape( screen.width + "x" + screen.height + " " + screen.colorDepth + "bpp" );}

u3k8u6y1 += "&rnd=" + new Date().getTime();

if(document.layers){

document.write("<la"+"yer name=\"DMStats\" visibility=hide><img src=\""+u3k8u6y1+"\" height=1 width=1></la"+"yer>");

}else{document.write("<di"+

"v id=\"DMStats\" STYLE=\"position:absolute;visibility:hidden;\"><img src=\""+u3k8u6y1+

"\" height=1 width=1></di"+"v>");}

<!--document.write(u3k8u6y1);-->
 

</script>

<!--END OF DEEPMETRIX STATSCRIPT-->
 

<table width=100% bgcolor=#001873 style="color:white" margin-top=0 margin-bottom=0 border=0>
 

<tr height=80>

<td width=40%>
 

<a href="/index.html"><img src="/PT.gif" border="0"  alt='Enclosures and Connectors - PacTec Division of LaFrance Corp.'></a>   
 

</td>

<td ><font face="Century Gothic"> Designing and Manufacturing Plastic Electronic Enclosures Since 1978  </font></td> 
 

</tr>

</table>
 
 
 

<table width=100% border=0>

<tr>

    <td width=50 valign=top>
 

<table width=100% height=100% margin-top=0 margin-right=0 margin-left=0>
 
 

<tr>

    <td>  	

<table border="0" cellpadding="0" cellspacing="0" width="100%" align="center" valign=top bgcolor=#C0C0C0>

    <tr>

        <td width="98%" bgcolor="#949694" align="center" colspan="2"><p align="center"><font face="Century Gothic" size=3 

color="#FFFFFF"><b>Login</b></font></td>

    </tr>

    

     <tr>

		<td bgcolor=#C0C0C0>

<!--

			<form action="https://ptcomtest.lafrance/authenticator.lfml" method="GET" 

style='margin-bottom:0;'>

-->

          <form action="https://ptcomtest.lafrance/authenticator.lfml" method="GET" style='margin-bottom:0;'>
 

			<input type=hidden name=rdurl value='index.html'>

			<input type=hidden name=functionarg value='userviewE'>

			<table width=100% bordercolor="#C0C0C0" border=0 bgcolor="#C0C0C0">

				<tr>

		            <td width="33%" bgcolor="#C0C0C0"><font size="1" face="Century Gothic">&nbsp;Username</font></td>

            		<td width="67%" bgcolor="#C0C0C0"><input type="text" style="background-color:#ffffff;border:1 groove 

#000000;font-size: xx-small;" name="username" size="10"></td>

	            </tr>

                <tr>

		            <td width="33%" bgcolor="#C0C0C0"><font size="1" face="Century Gothic">&nbsp;Password</font></td>

		            <td width="67%" bgcolor="#C0C0C0"><input type="password" 

style="background-color:#ffffff;border:1 groove #000000;font-size: xx-small;" name="password" size="10">&nbsp;</td>

	            </tr>

          		<tr>

					<td bgcolor="#COCOCO"></td>

					<td width="67%" colspan="1" bgcolor="#C0C0C0"><input 

type="submit" value="SUBMIT" marginbottom=0></td>

	   		    </tr>

			</table>

			</form></td>

	  </tr>

	 

	  <tr>

		  <td width="98%" colspan="2" bgcolor="#C0C0C0">

		  		<font face="Century Gothic" size="1">

				<input type=hidden name=view value='forgetpass'>

				<center>

				<a href= /profile.lfml class=grey>Register for an Account</a>

				</center>

				</font>

		  </td>

	  </tr>	

	  

	   <tr>

		  <td width="98%" colspan="2" bgcolor="#C0C0C0">

		  		<font face="Century Gothic" size="1">

				<input type=hidden name=view value='forgetpass'>

				<center>

				<a href=/forgetpass1.lfml class=grey>Forget your login info?</a>

				</center>

				</font>

		  </td>

	  </tr>		

	  

	  <tr>

	    <td width="100%"> 

	        <hr />

	    </td>

	  </tr>

	  

	  <tr>

        <td width="98%" height="3" align="center" bgcolor="#C0C0C0"><font face="Century Gothic" size="4">

        <a href=/cartListX.lfml title="Click here to view your shopping cart" class=grey><nobr>View Cart (0) </nobr></a></font></td>

      </tr>

	  

	  

</table></td>

</tr>
 

<tr>

    <td valign=top bgcolor=#c0c0c0> <input type=hidden name=view value=''>

<input type=hidden name=view2 value=''>
 

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="1" align="center" valign=top>

<tr><td width="98%" bgcolor="#949694" align="center" colspan="2"><p align="center"><font face="Century Gothic" size=3 

color="#FFFFFF"><b>Search</b></font></td>   </tr>

   

<tr><td>&nbsp;</td></tr>

    <tr>

            <td width="98%" height="3" align="center" bgcolor="#C0C0C0"><font face="Century Gothic" size="4">
 

<a href=/Plastic-Enclosures.html title="Advanced Plastic Enclosures Search" class=grey><nobr>Advanced Search</nobr></a>
 

</font></td>

    </tr>

<tr><td>&nbsp;</td></tr>

    <tr>

            <td width="98%" height="3" align="center" bgcolor="#C0C0C0"><font face="Century Gothic" size="4">

<a href=/Electrical-Connector-Enclosures.html title="Electrical connector enclosures search" class=grey><nobr>Connector 

Search</nobr></a>
 

</font></td>

    </tr>

<tr><td>&nbsp;</td></tr>

</table>
 
 
 
 
 
 
 
 
 
 

 </td>

</tr>
 

<tr>

    <td valign=top bgcolor=#c0c0c0> <input type=hidden name=view value=''>

<input type=hidden name=view2 value=''>
 

<table border="0" cellpadding="0" cellspacing="0" width="100%" height="1" align="center" valign=top>

<tr>

    <td width="98%" bgcolor="#949694" align="center" colspan="2"><p align="center"><font face="Century Gothic" size=3 

color="#FFFFFF"><b>More Info</b></font></td>   

</tr>

   

<tr><td>&nbsp;</td></tr>

    <tr>

       <td width="98%" height="3" align="center" bgcolor="#C0C0C0"><font face="Century Gothic" size="4">

<a href="/About-PacTec.html" title="About PacTec" class=grey><nobr>About PacTec</nobr></a>

    </tr>
 

    <tr>

        <td>&nbsp;</td>

   </tr>

   

    <tr>

            <td width="98%" height="3" align="center" bgcolor="#C0C0C0"><font face="Century Gothic" size="4">

<a href="/contactus.lfml" title="Contact Us" class=grey><nobr>Contact Us</nobr></a>
 

</font></td>

    </tr>
 

    

    

    <tr>

    <td> <hr /> </td>

    </tr>
 

    <tr>

        <td width="98%" height="3" align="center" bgcolor="#C0C0C0"><font face="Century Gothic" size="4">

        <a class=grey>Sign up for Newsletter</a></font> </td>

    </tr>

    <tr><td align="center"><font size=2 face="Verdana,Century Gothic,Helvetica"><b>Email:</b>

    <input type=text name="ea" size=20>

    <input type=hidden name="m" value="1011204234585">

    <input type=hidden name="p" value="oi">

    <input type=submit name="go" value="Go">

    </font></td></tr>

    
 
 

    <tr>

        <td>&nbsp;</td>

    </tr>
 

</table>

 </td>

</tr>
 

<tr>

    <td><table border="0" cellpadding="0" 

cellspacing="0" 

width="100%" height="1" align="center">

<tr><td width="98%" height="15" align="center"><p align="center">

<BR>

<a href=/New-Enclosure-Products.html><img border=0 width=102 src="/Plastic-Enclosures/OD45-2.0thumb.jpg" alt='New products - plastic enclosures and electrical connector enclosures'></a>
 

<br><br>

<font face="Century Gothic"><a href=/New-Enclosure-Products.html title='New Products - plastic enclosures and electrical connector 

enclosures'>

<nobr><font size=2>Free Samples of</font></nobr><br><nobr><font size=2>New Products Available!</font></nobr></a>

<br></font>

</p></td></tr>

<tr><td>&nbsp;</td></tr>

</table>

</td>

</tr>
 

<tr>    

    <td>    <div align="center"><center>

<table>

<tr>

<td width="100%" height="55"><center>
 

<BR>

<font face="Century Gothic"><a href=/customcolors.html title="Custom Colors are Available"><nobr><font size=2>Custom Colors are Available </font></nobr></a>
 
 

</center>

</td></tr>

</table></center></div>
 

<center>

<script 

src=https://seal.verisign.com/getseal?host_name=WWW.PACTECENCLOSURES.COM&size=S&use_flash=YES&use_transparent=YES&lang=en></script>

</center>

<BR>

<center><img src="/images/RoHS_logo.jpg" width=102></center> </td>  

</tr>  

</table>
 

</td>

<td width=100% valign=top>

<center>

<H1><U><font face="Century Gothic" size=5 color=navy>Plastic Enclosures and Electrical Connector Enclosures</font></U></H1><font face="Century Gothic" size=3 color=black><center>PacTec has designed and manufactured plastic electronic enclosures since 1978.<br>Search our extensive plastic enclosure database to find the plastic boxes that will house your PCB.</center></font>
 

<center> 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0//EN" "http://www.w3.org/TR/REC-html40/strict.dtd"><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta http-equiv="Content-Script-Type" content="text/javascript"><title>Benmatt Industries - Since 1936 - Product Viewer</title><link rel=stylesheet type="text/css" href="/css/default.css"><script type="text/javascript" src="/js/lib/cacheImage.js"></script><script type="text/javascript" src="/js/lib/imageViewerJB.js"></script><script type="text/javascript">var imageViewer;function initialize() {imageViewer={callbackPeriod:80,fixedPointPlaces:2,velocityDecayShift:2,driftSpeed:3,thumbHeight:64,thumbWidth:64,thumbSeperator:2,thumbBackgroundColor:'white',thumbBorderThickness:2,thumbBorderColor:'black',selectedBorderThickness:3,selectedBorderColor:'blue',hoverBorderColor:'#BD2226',emptyThumbColor:'#666666',emptyThumbImage:'/images/style/empty.gif',scrollBlock:document.getElementById('scrollBlock'),scrollBlock:document.getElementById('scrollBlock2'),viewImgTag:document.getElementById('viewImgTag'),arrowLeftImgTag:document.getElementById('arrowLeftImgTag'),arrowRightImgTag:document.getElementById('arrowRightImgTag'),arrowLeftImages:['/images/style/leftArrowDi.gif','/images/style/leftArrow.gif','/images/style/leftArrowHi.gif'],arrowRightImages:['/images/style/rightArrowDi.gif','/images/style/rightArrow.gif','/images/style/rightArrowHi.gif'],thumbImages:['http://10.1.0.2/Plastic-Enclosures-Thumbs/OD43.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/XPM.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD45-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD45-2.5.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD36-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD56-2.5.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/XPM-9VB_2AA.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PP-2AA.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PPL-2AA.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PP.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PPL.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD56-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/XP-Rubber_Boot.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/XP-9VB-Rubber_Boot.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-2535.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-4624.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-6030.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODNF-43.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-1632.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PPLX-9VB_2AA.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODNF45-2.5.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD33-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODNF56-2.5.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-7545.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP2.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODNF33-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP1.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP1R.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP3.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP3R.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP2R.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PS24-100.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PS24-150.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PS36-150.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PS47-200.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODTM56-2.5.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODTM45-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-4545.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PPLX.jpg',''],viewImages:['http://10.1.0.2/Plastic-Enclosures-Thumbs/OD43.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/XPM.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD45-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD45-2.5.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD36-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD56-2.5.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/XPM-9VB_2AA.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PP-2AA.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PPL-2AA.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PP.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PPL.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD56-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/XP-Rubber_Boot.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/XP-9VB-Rubber_Boot.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-2535.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-4624.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-6030.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODNF-43.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-1632.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PPLX-9VB_2AA.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODNF45-2.5.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/OD33-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODNF56-2.5.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-7545.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP2.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODNF33-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP1.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP1R.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP3.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP3R.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/WP2R.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PS24-100.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PS24-150.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PS36-150.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PS47-200.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODTM56-2.5.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/ODTM45-2.0.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/FXT-4545.jpg','http://10.1.0.2/Plastic-Enclosures-Thumbs/PPLX.jpg',''],totalImages:39,currentImage:1,link_url:['http://10.1.0.2/Plastic-Enclosures/OD43.html','http://10.1.0.2/Plastic-Enclosures/XPM.html','http://10.1.0.2/Plastic-Enclosures/OD45-2.0.html','http://10.1.0.2/Plastic-Enclosures/OD45-2.5.html','http://10.1.0.2/Plastic-Enclosures/OD36-2.0.html','http://10.1.0.2/Plastic-Enclosures/OD56-2.5.html','http://10.1.0.2/Plastic-Enclosures/XPM-9VB_2AA.html','http://10.1.0.2/Plastic-Enclosures/PP-2AA.html','http://10.1.0.2/Plastic-Enclosures/PPL-2AA.html','http://10.1.0.2/Plastic-Enclosures/PP.html','http://10.1.0.2/Plastic-Enclosures/PPL.html','http://10.1.0.2/Plastic-Enclosures/OD56-2.0.html','http://10.1.0.2/Plastic-Enclosures/XP-Rubber_Boot.html','http://10.1.0.2/Plastic-Enclosures/XP-9VB-Rubber_Boot.html','http://10.1.0.2/Plastic-Enclosures/FXT-2535.html','http://10.1.0.2/Plastic-Enclosures/FXT-4624.html','http://10.1.0.2/Plastic-Enclosures/FXT-6030.html','http://10.1.0.2/Plastic-Enclosures/ODNF-43.html','http://10.1.0.2/Plastic-Enclosures/FXT-1632.html','http://10.1.0.2/Plastic-Enclosures/PPLX-9VB_2AA.html','http://10.1.0.2/Plastic-Enclosures/ODNF45-2.5.html','http://10.1.0.2/Plastic-Enclosures/OD33-2.0.html','http://10.1.0.2/Plastic-Enclosures/ODNF56-2.5.html','http://10.1.0.2/Plastic-Enclosures/FXT-7545.html','http://10.1.0.2/Plastic-Enclosures/WP2.html','http://10.1.0.2/Plastic-Enclosures/ODNF33-2.0.html','http://10.1.0.2/Plastic-Enclosures/WP1.html','http://10.1.0.2/Plastic-Enclosures/WP1R.html','http://10.1.0.2/Plastic-Enclosures/WP3.html','http://10.1.0.2/Plastic-Enclosures/WP3R.html','http://10.1.0.2/Plastic-Enclosures/WP2R.html','http://10.1.0.2/Plastic-Enclosures/PS24-100.html','http://10.1.0.2/Plastic-Enclosures/PS24-150.html','http://10.1.0.2/Plastic-Enclosures/PS36-150.html','http://10.1.0.2/Plastic-Enclosures/PS47-200.html','http://10.1.0.2/Plastic-Enclosures/ODTM56-2.5.html','http://10.1.0.2/Plastic-Enclosures/ODTM45-2.0.html','http://10.1.0.2/Plastic-Enclosures/FXT-4545.html','http://10.1.0.2/Plastic-Enclosures/PPLX.html',''],link_text:['OD43','XPM','OD45-2.0','OD45-2.5','OD36-2.0','OD56-2.5','XPM-9VB_2AA','PP-2AA','PPL-2AA','PP','PPL','OD56-2.0','XP-Rubber_Boot','XP-9VB-Rubber_Boot','FXT-2535','FXT-4624','FXT-6030','ODNF-43','FXT-1632','PPLX-9VB_2AA','ODNF45-2.5','OD33-2.0','ODNF56-2.5','FXT-7545','WP2','ODNF33-2.0','WP1','WP1R','WP3','WP3R','WP2R','PS24-100','PS24-150','PS36-150','PS47-200','ODTM56-2.5','ODTM45-2.0','FXT-4545','PPLX',''],link_description:['Outdoor Enclosure','Hand Held','Outdoor/ IP-67 Rated','Outdoor/ IP-67 Rated','Outdoor/ IP-67 Rated','Outdoor/ IP-67 Rated','Hand Held','Hand Held / Rubber Sides','Hand Held / Rubber Sides','Hand Held / Rubber Sides','Hand Held / Rubber Sides','Outdoor / IP-67 Rated','Handheld with Rubber Boot','Handheld with Rubber Boot','Utility Enclosure','Utility Enclosure','Utility Enclosure','Outdoor Enclosure','Utility Enclosure','Hand Held / Rubber Sides','Outdoor Enclosure','Outdoor Enclosure','Outdoor Enclosure','Utility Enclosure','Wallplate 2 Gang','Outdoor Enclosure','Wallplate 1 Gang','Wallplate 1 Gang Recessed','Wallplate 3 Gang','Wallplate 3 Gang Recessed','Wallplate 2 Gang Recessed','Power Supply','Power Supply','Power Supply','Power SUpply','Outdoor/IP-67 Rated','Outdoor/IP-67 Rated','Utility Enclosure','Hand Held / Rubber Sides','']};initializeImageViewer.call(imageViewer);}</script></head><body onload="initialize();"><div class=popupPage><table class=fullWidth><tr><td align=center><table ><tr><td  valign=top colspan=2><table style="width:100%;"><tr><td style="width: 32px;border:1px solid black;"><img id=arrowLeftImgTag style="cursor:pointer;" src="/images/style/leftArrowDi.gif" alt=""></td><td align=left style="border:1px solid black;"><div id=scrollBlock style="height:92px;width:600px;"><div id=scrollBlock2 style="height:50px;width:50px;"></div></div></td><td style="width: 32px;border:1px solid black;"><img id=arrowRightImgTag style="cursor:pointer;" src="/images/style/rightArrowDi.gif" alt=""></td></tr></table><p style="clear:both;"><font face="Arial">New Products: Click on the product name to goto the product page.</font></p></td></tr><tr><td class=imageBox align=center valign=middle colspan=2><img id=viewImgTag src="/images/style/empty.gif" alt=""></td></tr></table> 
 

<TABLE border=0 width=50% align=center>

<TR>

<TD colspan=1>
 
 
 

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" width=100%>
 
 

<TR>

    <TD align=center width=100%><TABLE height=100% width=100% border=0><TR><TD align=center><a 

href=/Plastic-Enclosures/OutdoorProductLines.html title='

Outdoor Enclosures'><img width=200

src=/images/OutdoorCat.jpg border=0 alt='Weather Resistant Outdoor

Enclosures'></a><BR><a

href=/Plastic-Enclosures/OutdoorProductLines.html

alt='Weather Resistant Outdoor Enclosures'><font face="Century Gothic">Outdoor Enclosures</font></a></td>

</tr></table></TD> 

</TR>
 

<TR>
 

<TD rowspan=2 valign=center  style=bold align=center><b></b></TD>
 

</TR>
 
 
 

</TABLE>
 

</TD>
 

<TD colspan=1>
 
 
 

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" width=100%>
 
 

<TR>

    <TD align=center width=100%><TABLE height=100% width=50% border=0><TR><TD align=center><a 

href=/Plastic-Enclosures/MountingProductLines.html title='Plastic Boxes with 

Wall Mounts'><img width=200 

src=/images/MountingUnitsCat.jpg border=0 alt='Mounting Units'></a><BR><a 

href=/Plastic-Enclosures/MountingProductLines.html 

alt='Plastic Boxes with Wall Mounts'><font face="Century Gothic">Mounting Enclosures</font></a></td>

</tr></table></TD> 

</TR>
 

<TR>
 

<TD rowspan=2 valign=center  style=bold align=center><b></b></TD>
 

</TR>
 
 
 

</TABLE>
 

</TD>
 
 

<TD colspan=1>
 
 
 

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" width=100%>
 
 

<TR>

    <TD align=center width=100%><TABLE height=100% width=50% border=0><TR><TD align=center><a href=/Plastic-Enclosures/HandHeldProductLines.html title='Hand Held 

PCB Enclosures'><img width=200 

src=/images/HandHeldCat.jpg border=0 alt='Hand Held PCB Enclosures'></a><BR><a 

href=/Plastic-Enclosures/HandHeldProductLines.html 

alt='Hand Held PCB Enclosures'><font face="Century Gothic">Hand Held Enclosures</font></a></td>

</tr></table></TD> 

</TR>
 

<TR>
 

<TD rowspan=2 valign=center  style=bold align=center><b></b></TD>
 

</TR>
 
 
 

</TABLE>
 

</TD>
 
 

</TR><TR>
 

<TD colspan=1>
 
 
 

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" width=100%>
 
 

<TR>

    <TD align=center width=100%><TABLE height=100% width=50% border=0><TR><TD align=center><a href=/Electrical-Connector-Enclosures.html title='Electrical 

Connector 

Housings'><img width=200

src=/images/ConnectorsCat.jpg border=0 alt='Electrical Connector 

Housings'></a><BR><a 

href=/Electrical-Connector-Enclosures.html

alt='Electrical Connector Housings'><font face="Century Gothic">Connector Housings</font></a></td>

</tr></table></TD> 

</TR>
 

<TR>
 

<TD rowspan=2 valign=center  style=bold align=center><b></b></TD>
 

</TR>
 
 
 

</TABLE>
 

</TD>
 
 

<TD colspan=1>
 
 
 

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" width=100%>
 
 

<TR>

    <TD align=center width=100%><TABLE height=100% width=50% border=0><TR><TD align=center><a href=/Plastic-Enclosures/RubberBootProductLines.html title='Plastic 

Enclosures 

with Rubberized Grip'><img width=200 

src=/images/RubberBoot-RubberSideCat.jpg border=0 alt='Plastic Enclosures with 

Rubberized Grip'></a><BR><a 

href=/Plastic-Enclosures/RubberBootProductLines.html 

alt='Plastic Boxes with Rubberized Grip'><font face="Century Gothic">Rubber Boots / Rubber Sides</font></a></td>

</tr></table></TD> 

</TR>
 

<TR>
 

<TD rowspan=2 valign=center  style=bold align=center><b></b></TD>
 

</TR>
 
 
 

</TABLE>
 

</TD>
 

<TD colspan=1>
 
 
 

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" width=100%>
 
 

<TR>

    <TD align=center width=100%><TABLE height=100% width=50% border=0><TR><TD align=center><a href=/Plastic-Enclosures/DesktopProductLines.html title='Desktop Electronic

Enclosures'><img width=200

src=/images/DesktopCat.jpg border=0 alt='Desktop Electronic 

Enclosures'></a><BR><a 

href=/Plastic-Enclosures/DesktopProductLines.html 

alt='Desktop Electronic Enclosures'><font face="Century Gothic">Desktop Enclosures</font></a></td>

</tr></table></TD> 

</TR>
 

<TR>
 

<TD rowspan=2 valign=center  style=bold align=center><b></b></TD>
 

</TR>
 
 
 

</TABLE>
 

</TD>
 
 

</tr>

<tr>
 

<TD colspan=1>
 
 

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" width=100%>
 
 

<TR>

    <TD align=center width=100%><TABLE height=100% width=50% border=0><TR><TD align=center><a

href=/Plastic-Enclosures/UtilityProductLines.html title='Plastic Enclosures for

Utility

Products'><img width=200

src=/images/UtilityCat.jpg border=0 alt='Utility Enclosures'></a><BR><a

href=/Plastic-Enclosures/UtilityProductLines.html

alt='Plastic Enclosures for Utility Products'><font face="Century Gothic">Utility Enclosures</font></a></td>

</tr></table></TD> 

</TR>
 

<TR>
 

<TD rowspan=2 valign=center  style=bold align=center><b></b></TD>
 

</TR>
 
 
 

</TABLE>
 

</TD>
 

<TD>
 
 
 

<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="0" width=100%>
 
 

<TR>

    <TD align=center width=100%><TABLE height=100% width=50% border=0><TR><TD align=center><a href=/Plastic-Enclosures/RackMountProductLines.html title='Rack Mountable 

Plastic Enclosures'><img width=200 

src=/images/RackMountCat.jpg border=0 alt='Rack Mountable Plastic 

Enclosures'></a><BR><a 

href=/Plastic-Enclosures/RackMountProductLines.html 

alt='Rack Mountable Plastic Enclosures'><font face="Century Gothic">Rack Mount Enclosures</font></a></td>

</tr></table></TD> 

</TR>
 

<TR>
 

<TD rowspan=2 valign=center  style=bold align=center><b></b></TD>
 

</TR>
 
 
 

</TABLE>
 
 

</TD>

<TD>

<table width=100% height=100%>
 

<td colspan=1 align=center>

<form action="/Plastic-Enclosures.html" method=GET>

<input type=SUBMIT name=Advanced value='Advanced Search'>

<BR>

<font face="Century Gothic">

Search by...

<br>

Dimension, Series or Model 

</font>

</form>

</td>

</tr>
 

</table>

</TD>
 
 

</tr>

<tr></tr>

<tr>

<td width=33.3%>&nbsp;</td>

<td width=33.4%>&nbsp;</td>

<td width=33.3%>&nbsp;</td>
 

</tr>

</TABLE>
 
 

</center>
 
 
 
 
 

<div align= "left"><font face="Century Gothic" size=2 color=black><br> We have over 350 styles of injection molded plastic containers, cases and boxes to choose from, including our computer enclosures, rackmount enclosures and electronic enclosures.  Hand held enclosures are excellent for keypads, testers, remote controls and other hand held products and measurement equipment, and our large desktop, benchtop and instrument enclosures are ideal for scientific, laboratory and medical equipment and instruments.  Electronics enclosures are great for all types of communications equipment, while our sloped and small enclosures are ideal for controllers, converters, keyless remote controls, batteries and other compact devices, Our wall mount and rack mount enclosures are perfect for a wide variety of wall mountable systems and controls, with some models being UV-stable and waterproof and IP 67 rated; perfect for harsh environments.  We also manufacture vented desktop and keyboard enclosures for communications, test and medical equipment.  We even have enclosures for credit card readers, mid-size enclosures with a European design, utility, belt clip enclosures and battery compartment enclosures. 

<BR><BR>

Many new models of plastic electronic enclosures with ergonomic and modern designs are frequently being introduced.  All of our standard housings are manufactured at our facility in Sarasota, Florida.  PacTec Enclosures also has the ability to modify any plastic case to meet your project requirements.  Click on the enclosure picture above to get stared on your electronic enclosure search.

<BR><BR>

In addition to our plastic enclosures, we also manufacture and distribute housings for electrical connectors. We have rigid attachment connectors, cable to cable connectors and general use connectors. Click on the Connector Enclosures Search to select both sides for the desired connector type and length. <br></font></div></center>

</td>

</tr>

<tr height=45>

<td colspan=2>

<center><font face="Century Gothic" size="1">Copyright 2002-2005 &copy; PacTec Divison of LaFrance Corp. All Rights Reserved.<br>

<table border=0 topmargin=0><tr>

<td>

<a href=/Privacy-Policy.html class=footer>Privacy Policy</a>

</td><td valign=top>

|

</td>

<td>

<a href=/shipping_info.lfml class=footer>Shipping Policies</a>

</td><td valign=top>

|

</td>

<td>

<a href=/return_info.lfml class=footer>Return Policies</a>

</td>

<td>

|

</td>

<td>

<a href=/site-map.html class=footer>Site Map</a>

</td>

</tr>

</table>

</font>

</center>
 

</td>  

</tr>

</table>

</body>

</html>

Open in new window

0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 22668259
Sorry. That does not help me
1. you have two pages inside each other
2. your script is using an internal IP so I see no images
3. the script is some kind of formatted framework so nearly impossible to read.

Can you perhaps post where you got the scroller from?
0
 
LVL 75

Accepted Solution

by:
Michel Plungjan earned 500 total points
ID: 22668350
Ok, I found your other post.
You need to get someone (I have no time right now) to change the code below to take a text and add it to a div container that holds the image and the text

function addThumbBox(index,color,image) {

    var thumb,closure;

    closure=this;

    thumb=document.createElement('img');

    thumb.style.width=this.thumbWidth+'px';

    thumb.style.height=this.thumbHeight+'px';

    thumb.style.marginBottom=thumb.style.marginTop=this.thumbSeperator+'px';

    thumb.style.marginLeft=thumb.style.marginRight=(this.thumbSeperator>>1)+'px';

    thumb.style.borderStyle='solid';

    thumb.style.borderColor=this.thumbBorderColor;

    thumb.style.borderWidth=this.thumbBorderThickness+'px';

    thumb.style.backgroundColor=color;

    thumb.style.padding='0';

    thumb.src=image;

    if(index>=0) { //Set up callback events for those with a index of 1 or greater

        thumb.myIndex=index;

        thumb.style.cursor='pointer';

        thumb.onmouseover=function() { highlightThumbBox.call(closure,thumb,closure.hoverBorderColor); }

        thumb.onmouseout=function() { highlightThumbBox.call(closure,thumb,closure.thumbBorderColor); }

        thumb.onclick=function() { selectThumbBox.call(closure,thumb); }

    }

    this.scrollBar.appendChild(thumb);

}

Open in new window

0
 

Author Closing Comment

by:MikeZ_LaFrance
ID: 31503984
Thanks for the advice
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Introduction Since I wrote the original article about Handling Date and Time in PHP and MySQL (http://www.experts-exchange.com/articles/201/Handling-Date-and-Time-in-PHP-and-MySQL.html) several years ago, it seemed like now was a good time to updat…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Viewers will learn one way to get user input in Java. Introduce the Scanner object: Declare the variable that stores the user input: An example prompting the user for input: Methods you need to invoke in order to properly get  user input:
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…

757 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now