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.
-
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 : Welcome, just made another edit that i actually tested and it worked for me. Hopefully you can get yours working. Good luck! -
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>
-
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";