Menu
I’m using javascript to allow a user to select a colour-swatch for a product.
On one “main” page, a “select colour” link opens a new popup window, which has the colour swatch images on it. When the user clicks on one of these images, the popup window closes, and a text label associated with the image is passed back to a form field in the original window. This code, using the alt tags to pass the names, works fine:
main page (parent.html):
In <head>:
<script type=”text/javascript”>
var objActiveElem;
var winPop;
function GetImage(xElem){
objActiveElem = xElem;
winPop = window.open(“imagePicker.html”);
winPop.focus();
}
</script>
… and in the <body> a form:
<form name=”Form1″>
<input type=”button” name=”btn1″ value=”Choose Colour” onclick=”GetImage(document.Form1.txt1)”>
<br>
<input type=”text” name=”txt1″ value=”(none selected)” readonly>
<br>
</form>
popup/child window (imagePicker.html):
In <head>:
<script type=”text/javascript”>
function SetImage(xValue){
window.opener.objActiveElem.value = xValue;
window.opener.objActiveElem = “”;
self.close();
}
window.onunload = function(){
window.opener.objActiveElem = “”;
}
</script>
… and in the <body>:
<img id=”img1″ src=”images/colour1.jpg” alt=”RED” onclick=”SetImage(this.alt)”><br>
<img id=”img2″ src=”images/colour2.jpg” alt=”GREEN” onclick=”SetImage(this.alt)”><br>
<img id=”img3″ src=”images/colour3.jpg” alt=”BLUE” onclick=”SetImage(this.alt)”><br>
<table width=”100″ border=”1″ cellspacing=”2″ cellpadding=”0″ height=”150″>
<tr><td>image appears here</td></tr>
</table>
… But! I’d like the source path of the image also to be passed, so that the selected image is also displayed in the main page. That is, both image “id” (from alt tag, displaying in form field) and image URL (from?, displaying in table). This is probably very simple stuff, but I don’t know how to do it! Can anyone help?