www.webdeveloper.com
Results 1 to 7 of 7

Thread: swapping image in a table structure

  1. #1
    Join Date
    Oct 2007
    Location
    Winnipeg
    Posts
    21

    swapping image in a table structure

    Hello all,
    I was really needing some help. I am a real rookie web developer that does (part-time)work for our company site... but haven't had my hand in coding/java-script for some time now & afraid I am unclear on the best way I should create a function for what I need to do. I am not even sure if java-script is the best option , perhaps there is some HTML that would work as well.

    The idea is, when someone clicks on a particular "size" in my:<td> in my table, the door picture changes to the corresponding image. (see picture below)
    I have a moderate grasp on HTML & easily layed out the table.
    I was wanting to create 9 web pages for our site. Each page has many options
    & sizes (the sample isn't even 1/3 finished lol) , so was really hoping someone could steer me in the right direction or give some good suggestions

    -Cheers
    Attached Images Attached Images

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,380
    Show your code of the HTML layout (simplest example) with the image links.
    Should be easy enough to add the links to display the images for the different selections.
    I am unclear as to what the 9 web pages represent, but if a template can be made for one I assume you can create the others.

  3. #3
    Join Date
    Oct 2007
    Location
    Winnipeg
    Posts
    21
    Quote Originally Posted by JMRKER View Post
    Show your code of the HTML layout (simplest example) with the image links.
    Should be easy enough to add the links to display the images for the different selections.
    I am unclear as to what the 9 web pages represent, but if a template can be made for one I assume you can create the others.

    Thanks for the response. (see pic attached)

    the code is simply a table with a few images . Its the far left image of a door I want to change when I hover over a listed dimension. The picture shows the first dimension 15"x50" being selected, & that is the picture that is shown on the far left..a 15"x50" option. I still have to create all the images and I have to fill in all the content for the rest of my columns still.

    my question is, is there a simple way of accomplishing this? do I have to create a function? , I don't want the entire page swapping out on selecting my choices, I think I even figured out how I could accomplish this using an iframe, but that seems way to complicated. I was hoping there must be a simpler way.


    Code:
    <table bgcolor="#ffffff" width="100%" border="0" cellspacing="5" cellpadding="5">
      <tr>
        <td width="193">&nbsp;</td>
        <td width="123">&nbsp;</td>
        <td width="123">&nbsp;</td>
        <td width="123">&nbsp;</td>
        <td width="298">&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td><img src="images/flushhead.png" /></td>
        <td><img src="images/white.png" alt="smooth white" width="123" height="50" /></td>
        <td><img src="images/texturedtan.png" alt="textured tan" width="123" height="50" /></td>
        <td><img src="images/texturedwhite.png" alt="textured white" width="123" height="50" /></td>
        <td>some decorative glass options:</td>
      </tr>
      <tr>
        <td rowspan="17">
    <img src="images/doorslabs/flushpanel.png" alt="flush panel" /></td>
        <td class="tablecell">15&quot;x50&quot; Oval</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td rowspan="17">&nbsp;</td>
      </tr>
      <tr>
        <td class="tablecell">16&quot;x40&quot; Oval</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">20&quot;x20&quot;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">20&quot;x36&quot;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">20&quot;x57&quot; Oval</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">20&quot;x64&quot;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x10&quot;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x10&quot; ct</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x10&quot; sun</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x36&quot;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x36&quot; rt</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x37.5&quot; ct</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x47&quot; st</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x48&quot;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x64&quot;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x64&quot; rt</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td class="tablecell">22&quot;x9&quot; sun</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    </table>
    Attached Images Attached Images

  4. #4
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    You can perheaps build your pages dynamically with javascript files...
    for exemple with too array like this (the split method transform strings to arrays):
    HTML Code:
    var smoothWhite="15&quot;x50&quot; Oval|16&quot;x40&quot; Oval|20&quot;x20&quot;|20&quot;x36&quot;|20&quot;x57&quot; Oval|20&quot;x64&quot;|22&quot;x10&quot;|22&quot;x10&quot;".split(/\/g); 
    var smoothImage="image1.jpg|image2.jpg|image3.jpg|image4.jpg|image5.jpg|image6.jpg|image7.jpg|image8.jpg".split(/\/g);
    You can build tables or better p tags (and work with CSS) with the same script like this (i have no time to make tests) :
    HTML Code:
    var chn='';
    for (var i=0,l=smoothWithe.length;i<l;i++) chn+='<p class="pcls" onclick="showImg('+smoothImage[i]+')">'+smoothWhite[i]+'</p>';
    document.getElementById('mySmoothWhiteDivId').innerHTML=chn;
    function showImg(i){
       document.getElementById('myfarLeftImgId').src='images/'+i;
    }

  5. #5
    Join Date
    Oct 2010
    Location
    Versailles, France
    Posts
    1,266
    I propose one javascript like this file for each page.

    HTML Code:
    // JavaScript Document flushpanel.js
    
    var ttlLft="Flush Panel",ttlCln=new Array ("Sommth White","Textured Tan","Textured White");
    
    var clnSze=new Array(3),clnImg=new Array(3);
    clnSze[0]=new Array();clnSze[1]=new Array();clnSze[2]=new Array();
    
    clnSze[0][0]='16&quot;x40&quot;';		clnSze[1][0]='17&quot;x40&quot;';		clnSze[2][0]='19&quot;x40&quot;';
    clnSze[0][1]='16&quot;x41&quot;';		clnSze[1][1]='17&quot;x41&quot;';		clnSze[2][1]='19&quot;x41&quot;';
    clnSze[0][2]='16&quot;x42&quot;';		clnSze[1][2]='17&quot;x42&quot;';		clnSze[2][2]='19&quot;x42&quot;';
    clnSze[0][3]='16&quot;x43&quot;';		clnSze[1][3]='17&quot;x43&quot;';		clnSze[2][3]='19&quot;x43&quot;';
    clnSze[0][4]='16&quot;x44&quot;';		clnSze[1][4]='17&quot;x44&quot;';		clnSze[2][4]='19&quot;x44&quot;';
    clnSze[0][5]='16&quot;x45&quot;';		clnSze[1][5]='17&quot;x45&quot;';		clnSze[2][5]='19&quot;x45&quot;';
    clnSze[0][6]='16&quot;x46&quot;';		clnSze[1][6]='17&quot;x46&quot;';		clnSze[2][6]='19&quot;x46&quot;';
    clnSze[0][7]='16&quot;x47&quot;';		clnSze[1][7]='17&quot;x47&quot;';		clnSze[2][7]='19&quot;x47&quot;';
    clnSze[0][8]='16&quot;x48&quot;';		clnSze[1][8]='17&quot;x48&quot;';		clnSze[2][8]='19&quot;x48&quot;';
    
    clnImg[0]=new Array(),clnImg[1]=new Array(),clnImg[2]=new Array();
    
    clnImg[0][0]='image0Cln0.png';		clnImg[1][0]='image0Cln1.png';		clnImg[2][0]='image0Cln2.png';
    clnImg[0][1]='image1Cln0.png';		clnImg[1][1]='image1Cln1.png';		clnImg[2][1]='image1Cln2.png';
    clnImg[0][2]='image2Cln0.png';		clnImg[1][2]='image2Cln1.png';		clnImg[2][2]='image2Cln2.png';
    clnImg[0][3]='image3Cln0.png';		clnImg[1][3]='image3Cln1.png';		clnImg[2][3]='image3Cln2.png';
    clnImg[0][4]='image4Cln0.png';		clnImg[1][4]='image4Cln1.png';		clnImg[2][4]='image4Cln2.png';
    clnImg[0][5]='image5Cln0.png';		clnImg[1][5]='image5Cln1.png';		clnImg[2][5]='image5Cln2.png';
    clnImg[0][6]='image6Cln0.png';		clnImg[1][6]='image6Cln1.png';		clnImg[2][6]='image6Cln2.png';
    clnImg[0][7]='image7Cln0.png';		clnImg[1][7]='image7Cln1.png';		clnImg[2][7]='image7Cln2.png';
    clnImg[0][8]='image8Cln0.png';		clnImg[1][8]='image8Cln1.png';		clnImg[2][8]='image8Cln2.png';
    
    init();
    And an unique page to display all panels

    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="fr">
    <head>
      <meta http-equiv="content-type" content="text/html; charset=windows-1252">
      <meta name="generator" content="PSPad editor, www.pspad.com">
      <title>Untitled</title>
    </head>
    <style type="text/css">
    body {margin:0;padding:12px;font-family:"Bookman Old Style"}
    div {display:block;}
    #pnl {width:688px;}
    #farLft {width:180px;float:left;background:#ddd;}
    #farLft img {display:block;margin:0 auto;border:0;}
    .clscln {width:160px;float:left;}
    p {margin:2px;padding:3px;text-align:left;}
    .ttlLft {width:166px;font-weight:bold;font-variant:small-caps;font-size:15px;color:#666;}
    .ttlCln {font-weight:bold;font-variant:small-caps;font-size:16px;color:#333}
    .lgnSze {background:#eee}
    .lgnSlc {background:#ccc}
    </style>
    <body>
    	<div id="pnl">
    		<div id="farLft"></div>
    		<div id="cln0" class="clscln"></div>
    		<div id="cln1" class="clscln"></div>
    		<div id="cln2" class="clscln"></div>
    	</div>
    <script type="text/javascript">
    function $(i){return document.getElementById(i)}
    function init(){var i,j,l=clnSze[0].length;
    	var chnCln=new Array('','','');
    	// Change the title of the page
    	document.title=ttlLft;
    	// Define the farLeftPanel with is title and an image
    	$('farLft').innerHTML='<p class="ttlLft">'+ttlLft+'<p><img id="farImg" title="" src="">';
    	// Define panels with clickable p
    	for (i=0;i<3;i++) {
    		chnCln[i]+='<p class="ttlCln">'+ttlCln[i]+'<p>';
    		for (j=0;j<l;j++) chnCln[i]+='<p id="p-'+j+'-'+i+'" class="lgnSze" onclick="showImg(\''+clnImg[i][j]+'\','+j+','+i+')">'+clnSze[i][j]+'</p>';
    		$('cln'+i).innerHTML=chnCln[i];}
    }
    var lgnSlc='';
    function showImg(i,l,c){
    // Change the image (to test with images...)
      $('farLft').src='images/'+i;
    // Change the style of the line cliked
    	if (lgnSlc) $(lgnSlc).className="lgnSze";
    	lgnSlc='p-'+l+'-'+c;
      $('p-'+l+'-'+c).className="lgnSlc";
    	alert("New image : "+i)
    }
    
    </script>
    <script type="text/javascript" src="flushpanel.js"></script>
    </body>
    </html>
    You have only too change the last line with the script flushpanel.js to produce an other page.

    These two pages are minimal to highlight the principles, it is of course possible to change the number of colums, replace the titles with images ... etc. etc.

  6. #6
    Join Date
    Oct 2007
    Location
    Winnipeg
    Posts
    21
    thank you very much for taking the time to do that for me.
    I am going to try that.

  7. #7
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,380

    Lightbulb Alternate atempt ...

    Alternate possibility ...

    This is my take on your original post.
    I put dummy names for the images that will change depending upon mouseOver and current texture selection in the 'doorsSizes' array.

    Code:
    <html>
    <head>
    <title>Door Selections</title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?p=1119069#post1119069
    
    var doorSizes = [  // description, smooth white, textured tan, textured white images
        ['15&quot;x50&quot; Oval',	'img0-1.png', 'img0-2.png', 'img0-3.png'],
        ['16&quot;x40&quot; Oval',	'img1-1.png', 'img1-2.png', 'img1-3.png'],
        ['20&quot;x20&quot;',	'img2-1.png', 'img2-2.png', 'img2-3.png'],
        ['20&quot;x36&quot;',	'img3-1.png', 'img3-2.png', 'img3-3.png'],
        ['20&quot;x57&quot; Oval',	'img4-1.png', 'img4-2.png', 'img4-3.png'],
        ['20&quot;x64&quot;',	'img5-1.png', 'img5-2.png', 'img5-3.png'],
        ['22&quot;x10&quot;',	'img6-1.png', 'img6-2.png', 'img6-3.png'],
        ['22&quot;x10&quot; ct',	'img7-1.png', 'img7-2.png', 'img7-3.png'],
        ['22&quot;x10&quot; sun',	'img8-1.png', 'img8-2.png', 'img8-3.png'],
        ['22&quot;x36&quot;',	'img9-1.png', 'img9-2.png', 'img9-3.png'],
        ['22&quot;x36&quot; rt',	'img10-1.png','img10-2.png','img10-3.png'],
        ['22&quot;x37.5&quot; ct',	'img11-1.png','img11-2.png','img11-3.png'],
        ['22&quot;x47&quot; st',	'img12-1.png','img13-2.png','img12-3.png'],
        ['22&quot;x48&quot;',	'img13-1.png','img13-2.png','img13-3.png'],
        ['22&quot;x64&quot;',	'img14-1.png','img14-2.png','img14-3.png'],
        ['22&quot;x64&quot; rt',	'img15-1.png','img15-2.png','img15-3.png'],
        ['22&quot;x9&quot; sun',	'img16-1.png','img16-2.png','img16-3.png']	
    // note: no comma after last entry
    ];
    
    var textureInfo = 1;
    function texture(info) { textureInfo = Number(info); }
    
    function createRollovers() {
      var str = '';
      for (var i= 1; i<doorSizes.length; i++) {
        str += '<tr><td>';
        str += '<div onmouseOver="cimgInfo('+i+')" id="dsize'+i+'">'+doorSizes[i][0]+'</div>';
        str += '</td><td>&nbsp;</td><td>&nbsp;</td></tr>';
      }
      return str;
    }
    function cimgInfo(cnt) {
      document.getElementById('cimg').src = doorSizes[cnt][1];
      document.getElementById('cimg').alt = ''; // doorSizes[cnt][0];
      document.getElementById('showCimg').innerHTML = doorSizes[cnt][0]+'<br>'+doorSizes[cnt][textureInfo];
    }
    
    </script>
    </head>
    <body>
    <table bgcolor="#ffffff" width="100%" border="0" cellspacing="5" cellpadding="5">
      <tr>
        <td width="193">&nbsp;</td>
        <td width="123">&nbsp;</td>
        <td width="123">&nbsp;</td>
        <td width="123">&nbsp;</td>
        <td width="298">&nbsp;</td>
      </tr>
      <tr>
        <td><img src="images/flushhead.png" /></td>
        <td>
          <img src="images/white.png" alt="smooth white" width="123" height="50" onclick="texture(1)" />
        </td>
        <td>
          <img src="images/texturedtan.png" alt="textured tan" width="123" height="50" onclick="texture(2)" />
        </td>
        <td>
          <img src="images/texturedwhite.png" alt="textured white" width="123" height="50" onclick="texture(3)" />
        </td>
        <td>some decorative glass options:</td>
      </tr>
      <tr>
        <td rowspan="17">
        <img id="cimg" src="images/doorslabs/flushpanel.png" alt="" />
        <div id="showCimg">flush panel<br>img0-1.png</div>
        </td>
        <td class="tablecell">
          <div onmouseOver="cimgInfo(0)" id="dsize0">15&quot;x50&quot; Oval</div>
        </td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td rowspan="17">&nbsp;</td>
      </tr>
      <script type="text/javascript">document.write(createRollovers())</script>
      <tr>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
      </tr>
    
    </table>
    </body>
    </html>
    I did not have the images to test the display.
    Good Luck!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles