Help - Search - Members - Calendar
Full Version: loading img file
HTMLHelp Forums > Programming > Client-side Scripting
mbessey
Hello,

I am trying to get a image to load into a src tag from a value from a function. can someone steer me in the right direction here? here is some sample code.


<div id="layer1" style="position: absolute; width: 1193px; height: 691px; z-index: 1; top: 46px; left: 11px">
<iframe name="I1" id="I1" src = PlaceToPostSnapshot style="width: 1112px; height: 664px">" class="style2" style="height: 642px; width: 1061px"Your browser does not support inline frames or is currently configured not to display inline frames.
</iframe></div>


// function to display alarm jpg
function getImage()
{
var @AlarmDate = 1;
var image = @AlarmDate.value + ".jpg"
document.getElementByTagName('PlaceToPostSnapshots').setAttribute('src', image)
}

pandy
You misunderstand getElementsByTagname(). Yes, it's elements, plural. And in the parenthesis you should have the element name, iframe in this case. But it won't work anyway because it rerurns a collection of all elements of this type on the page.

It's enough to do it like this.
CODE
document.getElementById('I1').src = ...


Also, you can't put a random placeholder as the value of src in the HTML.
Christian J
CODE
<iframe name="I1" id="I1" src = PlaceToPostSnapshot style="width: 1112px; height: 664px">" class="style2" style="height: 642px; width: 1061px"Your browser does not support inline frames or is currently configured not to display inline frames.
            </iframe>

The above is incorrect syntax, it should probably be:

CODE
<iframe name="I1" id="I1" src = PlaceToPostSnapshot style="width: 1112px; height: 664px" class="style2" style="height: 642px; width: 1061px">Your browser does not support inline frames or is currently configured not to display inline frames.
            </iframe>

Note that the second STYLE attribute's values should override the first. I also advice against using inline styles for practical reasons, use an embedded or external stylesheet instead.

CODE
var @AlarmDate = 1;

I don't think a JS variable can begin with an "@" character, also it causes JS syntax errors in my browsers.

CODE
var image = @AlarmDate.value + ".jpg"

A variable normally doesn't have a value property (unless the variable would be say an HTML INPUT element). Instead you might use:

CODE
var image = AlarmDate + ".jpg"


Finally, this returns a collection of all "PlaceToPostSnapshots" elements, but no such HTML element exists:

CODE
document.getElementByTagName('PlaceToPostSnapshots')

(even if it did exists you wouldn't want a collection of all of them found on the page, just like pandy wrote). Use this instead:

CODE
document.getElementById('I1').setAttribute('src', image);

or just
CODE
document.getElementById('I1').src = ...

like in pandy's example.

But I don't see the point in loading an image in an iframe. Why not load it in an IMG element as usual?
mbessey
I tried your suggestions but they didn't work. As far as using the iframe, that's what i was given to use. I do get a collection of all the jpg when using the current script i have. In Firefox when clicking on one of the jpg it will open in the iframe, but in IE it opens in a separate window. How can i get the image to open in the iframe in IE and not open in a separate program?

A little more back ground on what i'm trying to accomplish.

This will help for one page, i have two pages with the same template that need to run. One that shows all the collections and then opens the jpg selected.

The other page gets a jpg from a alarm event that is triggered. The @AlarmDate is a macro from another program that calls the html page to load when the user clicks on it. There could be more than one alarm event by the time the operator replies so i want to make sure that the correct jpg opens for each alarm. Which is why i'm trying to use the @AlarmDate variable.
mbessey
BTW i got rid of the iframe
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2014 Invision Power Services, Inc.