Quarfelburg
asked on
HELP! Need popup to check link of parent page and display html based on that link
Hello experts! As the title suggests I would like to make a popup that first checks the link of it’s parent. Based on that link it then displays the picture for the popup, and also the wood options. For better understanding of the latter, please view the following page and click on the thumb “stains”.
http://www.greenteadesign.com/newsite/reproductions/elmburl.html
As you can see the woods are limited to only burl. However if you had gone to this page and clicked on the “stains thumb”…
http://www.greenteadesign.com/newsite/reproductions/4footmizuya.html
You would find that your options are Elm and Gingko.
Currently I am just linking to two separate pages. I would rather not make a different page for each and every product, so I feel this mini-database would be the answer. I would also like the page to be cached so the user need only load the list of variables once.
Here is the code of the current popup:
<html>
<head>
<title>Stains and Hardware</title>
<script>
function goto()
{
self.resizeTo(document.ima ges[0].wid th+15, document.images[0].height+ 132);
self.moveTo(0,0);
}
</script>
<script>
function getSelectValue(selObject){
return selObject.options[selObjec t.selected Index].val ue;
}
function chimg(){
var d = document.forms[0];
var w = getSelectValue(d.wood);
var s = getSelectValue(d.stains);
var h = getSelectValue(d.hardware) ;
var elem = document.getElementById("h elp");
if(getSelectValue(d.wood) && getSelectValue(d.stains) && getSelectValue(d.hardware) ){
//alert(wood);alert(stain) ;alert(har dware); //Debugging
document.images["myimg"].s rc = "http://www.greenteadesign.com/images/custom/"+ w +"-"+ s +"-"+ h +".jpg";
elem.innerHTML="<img name=myimg src=http://www.greenteadesign.com/images/custom/"+ w +"-"+ s +"-"+ h +".jpg>";
return true;
}else{
alert("Please select all options!");
return false;
}
}//
</script>
</head>
<body onLoad=goto() bgcolor="#B6CAAE" style="margin-left: 0; margin-top: 0; margin-bottom: 0; margin-right: 0">
<div align=center valign=middle>
<div id=help><img name=myimg src="http://www.greenteadesign.com/images/custom/burl-gp-bh.jpg" alt=""><br></div>
<table border=0 cellspacing=cellpadding=0>
<tr>
<td width=478 height=2 bgcolor="#ffffff"><img src="http://www.greenteadesign.com/images/blank.gif" width=478 height=1><br></td>
</tr>
<tr>
<td width=478 height=2 bgcolor="#647F5B"><img src="http://www.greenteadesign.com/images/darkgreen.gif" alt="" border=0 width=1 height=1><br></td>
</tr>
</table>
<center>
<form name=imgform onsubmit="">
<SELECT NAME="wood">
<OPTION VALUE="">- - - Select Wood - - -</OPTION>
<OPTION VALUE="burl">Burl</OPTION>
</SELECT>
<SELECT NAME="stains">
<OPTION VALUE="">- - - Select Stain - - -</OPTION>
<OPTION VALUE="gp">Golden Pecan</OPTION>
<OPTION VALUE="fw">Fruitwood</OPTI ON>
<OPTION VALUE="ro">Red Oak</OPTION>
<OPTION VALUE="mh">Mahogany</OPTIO N>
<OPTION VALUE="ch">Chocolate</OPTI ON>
<OPTION VALUE="wn">Walnut</OPTION>
</SELECT>
<SELECT NAME="hardware">
<OPTION VALUE="">- - Select Handle - -</OPTION>
<OPTION VALUE="bh">Brass Hirute</OPTION>
<OPTION VALUE="ih">Iron Hirute</OPTION>
<OPTION VALUE="bw">Brass Warabite</OPTION>
<OPTION VALUE="iw">Iron Warabite</OPTION>
<OPTION VALUE="ik">Iron Kakute</OPTION>
</SELECT>
<input type=button onClick="return chimg();" value="Go" style="color: #FFFFFF; background-color: #8B987C; border-width: 1; border-style: 1">
</form>
<div align=left><font size=+1> <b> For more information on how to order this piece <a href="order.html" target=_blank>click here</a>.</b></font></div>
</center>
</div>
</body>
</html>
As always, your help is greatly appreciated,
Hayden
(P.S. Is there a better solution via php?)
http://www.greenteadesign.com/newsite/reproductions/elmburl.html
As you can see the woods are limited to only burl. However if you had gone to this page and clicked on the “stains thumb”…
http://www.greenteadesign.com/newsite/reproductions/4footmizuya.html
You would find that your options are Elm and Gingko.
Currently I am just linking to two separate pages. I would rather not make a different page for each and every product, so I feel this mini-database would be the answer. I would also like the page to be cached so the user need only load the list of variables once.
Here is the code of the current popup:
<html>
<head>
<title>Stains and Hardware</title>
<script>
function goto()
{
self.resizeTo(document.ima
self.moveTo(0,0);
}
</script>
<script>
function getSelectValue(selObject){
return selObject.options[selObjec
}
function chimg(){
var d = document.forms[0];
var w = getSelectValue(d.wood);
var s = getSelectValue(d.stains);
var h = getSelectValue(d.hardware)
var elem = document.getElementById("h
if(getSelectValue(d.wood) && getSelectValue(d.stains) && getSelectValue(d.hardware)
//alert(wood);alert(stain)
document.images["myimg"].s
elem.innerHTML="<img name=myimg src=http://www.greenteadesign.com/images/custom/"+ w +"-"+ s +"-"+ h +".jpg>";
return true;
}else{
alert("Please select all options!");
return false;
}
}//
</script>
</head>
<body onLoad=goto() bgcolor="#B6CAAE" style="margin-left: 0; margin-top: 0; margin-bottom: 0; margin-right: 0">
<div align=center valign=middle>
<div id=help><img name=myimg src="http://www.greenteadesign.com/images/custom/burl-gp-bh.jpg" alt=""><br></div>
<table border=0 cellspacing=cellpadding=0>
<tr>
<td width=478 height=2 bgcolor="#ffffff"><img src="http://www.greenteadesign.com/images/blank.gif" width=478 height=1><br></td>
</tr>
<tr>
<td width=478 height=2 bgcolor="#647F5B"><img src="http://www.greenteadesign.com/images/darkgreen.gif" alt="" border=0 width=1 height=1><br></td>
</tr>
</table>
<center>
<form name=imgform onsubmit="">
<SELECT NAME="wood">
<OPTION VALUE="">- - - Select Wood - - -</OPTION>
<OPTION VALUE="burl">Burl</OPTION>
</SELECT>
<SELECT NAME="stains">
<OPTION VALUE="">- - - Select Stain - - -</OPTION>
<OPTION VALUE="gp">Golden Pecan</OPTION>
<OPTION VALUE="fw">Fruitwood</OPTI
<OPTION VALUE="ro">Red Oak</OPTION>
<OPTION VALUE="mh">Mahogany</OPTIO
<OPTION VALUE="ch">Chocolate</OPTI
<OPTION VALUE="wn">Walnut</OPTION>
</SELECT>
<SELECT NAME="hardware">
<OPTION VALUE="">- - Select Handle - -</OPTION>
<OPTION VALUE="bh">Brass Hirute</OPTION>
<OPTION VALUE="ih">Iron Hirute</OPTION>
<OPTION VALUE="bw">Brass Warabite</OPTION>
<OPTION VALUE="iw">Iron Warabite</OPTION>
<OPTION VALUE="ik">Iron Kakute</OPTION>
</SELECT>
<input type=button onClick="return chimg();" value="Go" style="color: #FFFFFF; background-color: #8B987C; border-width: 1; border-style: 1">
</form>
<div align=left><font size=+1> <b> For more information on how to order this piece <a href="order.html" target=_blank>click here</a>.</b></font></div>
</center>
</div>
</body>
</html>
As always, your help is greatly appreciated,
Hayden
(P.S. Is there a better solution via php?)
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.