C
Cat 22
I am experimenting with dynamically loading images selected from a drop down box.
I want the user to be able to select a month and when the selection is made to
load the graphic in the other frame by changing the src attribute dynamically
The idea is that the user can select a month and the existing weather graph
in the other frame will change to that month.
(BTW: the frames themselves come up ok - one on top and one on bottom)
I have also verified that the right value (the graph file name) is being passed
to the function I put the graphic in its own frame page like this, the page is
called wxContent.html:
<html>
<head>
</head>
<body background="wx_bgpattern.jpg">
<div id="monthlyGraph">
<img src=wxGraph_02_2010.gif>
</div>
</body>
</html>
The selection window(frame) is a page called wxSelect.html and this
is where i have trouble.
How do i reference the graphic in wxContent.html?
<html>
<head>
</head>
<body background="wx_bgpattern.jpg">
<script type="text/javascript">
function changeGraph(gname)
{
var x=document.getElementById("wxcontent");
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
y.monthlyGraph.src=gname;
}
</script>
<form name="g_select">
<p><select name="g_month" size="1">
<option selected value="wxGraph_02_2010.gif">Feb 2010</option>
<option value="wxGraph_03_2010.gif">Mar 2010</option>
<option value="wxGraph_04_2010.gif">Apr 2010</option>
</select>
<input type="button" value="Go"
onclick="changeGraph( 'document.g_select.g_month.options[document.g_select.g_month.selectedIndex].value' )"
</form>
</body>
</html>
Thanks
Cat22
I want the user to be able to select a month and when the selection is made to
load the graphic in the other frame by changing the src attribute dynamically
The idea is that the user can select a month and the existing weather graph
in the other frame will change to that month.
(BTW: the frames themselves come up ok - one on top and one on bottom)
I have also verified that the right value (the graph file name) is being passed
to the function I put the graphic in its own frame page like this, the page is
called wxContent.html:
<html>
<head>
</head>
<body background="wx_bgpattern.jpg">
<div id="monthlyGraph">
<img src=wxGraph_02_2010.gif>
</div>
</body>
</html>
The selection window(frame) is a page called wxSelect.html and this
is where i have trouble.
How do i reference the graphic in wxContent.html?
<html>
<head>
</head>
<body background="wx_bgpattern.jpg">
<script type="text/javascript">
function changeGraph(gname)
{
var x=document.getElementById("wxcontent");
var y=(x.contentWindow || x.contentDocument);
if (y.document)y=y.document;
y.monthlyGraph.src=gname;
}
</script>
<form name="g_select">
<p><select name="g_month" size="1">
<option selected value="wxGraph_02_2010.gif">Feb 2010</option>
<option value="wxGraph_03_2010.gif">Mar 2010</option>
<option value="wxGraph_04_2010.gif">Apr 2010</option>
</select>
<input type="button" value="Go"
onclick="changeGraph( 'document.g_select.g_month.options[document.g_select.g_month.selectedIndex].value' )"
</form>
</body>
</html>
Thanks
Cat22