Programming Answer: Variable for img src=

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.

From stackoverflow

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");

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

Programming Answer

Saturday, April 30, 2011

Variable for img src=

0 comments:

Post a Comment

Blog Archive