views:

1284

answers:

3

Hi there, I have a question. Firstly, I am not going to pretend that I know what I am talking about here. I am a newbie to http and JavaScript.

I think my question may be answered in this post http://stackoverflow.com/questions/116967/img-src-tags-and-javascript but I thought I would explain the exact thing I am trying to achieve in case there is an easier way.

I have a webpage, I want to display an image on it. Only thing is, the image is coming from an automated system monitor, the image is automatically generated each day and placed in a new directory depending on date.

e.g. On April 4 = "http://host/partition/2009/apr/04/cpu.gif"
e.g. On April 5 = "http://host/partition/2009/apr/05/cpu.gif"

To facilitate this, I have created some basic JavaScript to give me the date in the format I need it. I have all that working. Now I just want to use that variable I created to show the image. I have the JavaScript code stored in a function called displaydate() If I do this <script language="JavaScript"> displaydate() </script> I see "http://host/partition/2009/apr/05/cpu.gif" and that is correct.

Now how do I display this on the site correctly?

 <a href="displaydate()"><img src="displaydate()" </a></td>    //This does not work. I am just adding it to show where I have been heading.

P.S. I have read a lot of pages on this and been trying a lot of things, but have had no luck so far. Any help, would be much appreciated.

+5  A: 

Yes, that page probably does answer your question. Basically, you want this javascript:

<script type="text/javascript">
document.getElementById('image').src = "yourpicture.png";
</script>

Except you want to replace the "yourpicture.png" with the function you wrote to generate the correct path to the image on disk, so...

<script type="text/javascript">
document.getElementById('image').src = displaydate();
</script>

Of course, you might need to modify this a bit for your own uses, the getElementById will take as an argument whatever the id attribute of your < img > tag is. You probably want to execute the above javascript after your page has loaded, i.e.:

<html>
<head>
<script type="text/javascript">
function load()
{
document.getElementById('image').src = displaydate();
}

function displaydate()
{
//your displaydate() function here
}
</script>
</head>

<body onload="load()">

<img src="nothing.jpg" id="image" name="image"/>
</body>
</html>
Brett Bender
Far out, thanks for the response. I was not expecting such a quick reply. This is the first time I have asked a question on any forum. Thanks, I will try this out.
Welcome, just made another edit that i actually tested and it worked for me. Hopefully you can get yours working. Good luck!
Brett Bender
A: 

Hi again. I have added the code, but am still having some issues. I am clearly missing something.

Here is script I am working with.

The output I get is, a new page with text written on it. http://host1/Shared/2009/Apr/21/cpu_abs.gif

That's not what I am after. I want to show that picture, not display that text. Also I do get an error when I launch the page, "Line 15 permission denied". Line 15 is this: document.getElementById('image').src = displaydate();

If I debug, I get another error: Microsoft JScript runtime error: 'document.getElementById(...)' is null or not an object

Any help much appreciated. I am out of my depth here, but keen to learn.

    <html>
<head>
<meta http-equiv="Content-Language" content="en-au">
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Infrastructure Dash Board </title>
<meta name="description" content="Infrastructure Dash Board ">
<script type=text/javascript> // The time out value is set at 60,000 milli-seconds (or 60 seconds) 
setTimeout(' document.location=document.location' ,60000); 
</script> 

<script type=text/javascript>
function load()
{
document.getElementById('image').src = displaydate();
}
         function displaydate()
         {
         var now = new Date();
         var months = new Array('Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec');
         var day = ((now.getDate()<10) ? "0" : "")+ now.getDate();
         var month = months[now.getMonth()]
         var year = [now.getYear()]
         document.write("http://host1/Shared/" + year + "/" + month + "/" + day + "/cpu_abs.gif");
         }
        </script> 
</head>

<body onload="load()">

     <img src="nothing.jpg" id="image" name="image" width="600" height="251"></a></td>

</body>
</html>
A: 

You should just need to change this line

document.write("http://host1/Shared/" + year + "/" + month + "/" + day + "/cpu_abs.gif");

to

return "http://host1/Shared/" + year + "/" + month + "/" + day + "/cpu_abs.gif";
ewengcameron