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
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.
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.
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"x50" Oval|16"x40" Oval|20"x20"|20"x36"|20"x57" Oval|20"x64"|22"x10"|22"x10"".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;
}
<!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.
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.
Reply With Quote
Originally Posted by JMRKER
Alternate atempt ...
Bookmarks