Dynamically changing the HTML in a page.

  • Thread starter Thread starter SGA Smele
  • Start date Start date
S

SGA Smele

Hello,

Now I think that there is a simple answer to my problem, but I don't
know what it is and I can't work out what I should be searching for on
the internet to read up some more about it. Here is my problem:

I have a webpage that shows a graph. The graph is a streamed image
from another webpage. This works perfectly, see code below, I have
just written some HTML to display the graph.

<P align=center><IMG style="Z-INDEX: 105; LEFT: 9px; WIDTH: 950px;
POSITION: absolute; TOP: 217px; HEIGHT: 150px" height=150
alt=Temperature! src="draw_Graph_1.aspx?Channel=29&amp;Hours=168"
width=950 border=0 ></P>

However, what I would like to do is to change the "Channel=29" to
something that the user has selected, so that they can change the
graph. Something like "Channel=iNewChannel", but I just don't know
how to go about this.

Thanks in adavance,
Smele.
 
Use an image control out of the toolbox and build the src property
dynamically.
 
You can do this using javascript. Give your image an ID, so you can access
it using the DOM, and then dynamically change the source:

Add a client side function to your page:

<script language="javascript">
<!--
function changeChannel (newChannel)
{
// Reference to the image
var img = document.all["graphImage"];

// Get the current source
var oldsrc = img.src;

// Replace the channel
var newsrc = oldsrc.replace(/Channel=[\d]+/, "Channel=" +
newChannel);

// Update the source
img.src = newsrc;
}
//-->
</script>

Create your image, with an ID. Additional attributes have been omitted as
they are not relevant to this example:

<img id="graphImage" src="draw_Graph_1.aspx?Channel=29&amp;Hours=168">

Now, you can simple change the source, by calling the changeChannel function
with the new channel ID. Eg.

<input type="button" value="Channel 15" onClick="changeChannel(15)">

Hope this helps,

Mun
 
Thanks very much, I knew there would be a simple solution...


Munsifali Rashid said:
You can do this using javascript. Give your image an ID, so you can access
it using the DOM, and then dynamically change the source:

Add a client side function to your page:

<script language="javascript">
<!--
function changeChannel (newChannel)
{
// Reference to the image
var img = document.all["graphImage"];

// Get the current source
var oldsrc = img.src;

// Replace the channel
var newsrc = oldsrc.replace(/Channel=[\d]+/, "Channel=" +
newChannel);

// Update the source
img.src = newsrc;
}
//-->
</script>

Create your image, with an ID. Additional attributes have been omitted as
they are not relevant to this example:

<img id="graphImage" src="draw_Graph_1.aspx?Channel=29&amp;Hours=168">

Now, you can simple change the source, by calling the changeChannel function
with the new channel ID. Eg.

<input type="button" value="Channel 15" onClick="changeChannel(15)">

Hope this helps,

Mun




SGA Smele said:
Hello,

Now I think that there is a simple answer to my problem, but I don't
know what it is and I can't work out what I should be searching for on
the internet to read up some more about it. Here is my problem:

I have a webpage that shows a graph. The graph is a streamed image
from another webpage. This works perfectly, see code below, I have
just written some HTML to display the graph.

<P align=center><IMG style="Z-INDEX: 105; LEFT: 9px; WIDTH: 950px;
POSITION: absolute; TOP: 217px; HEIGHT: 150px" height=150
alt=Temperature! src="draw_Graph_1.aspx?Channel=29&amp;Hours=168"
width=950 border=0 ></P>

However, what I would like to do is to change the "Channel=29" to
something that the user has selected, so that they can change the
graph. Something like "Channel=iNewChannel", but I just don't know
how to go about this.

Thanks in adavance,
Smele.
Click to expand...
Click to expand...
 
Back
Top