The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
Reply to this topicStart new topic
> loading img file
mbessey
post Apr 18 2012, 01:32 PM
Post #1





Group: Members
Posts: 3
Joined: 18-April 12
Member No.: 16,940



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)
}

User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
pandy
post Apr 18 2012, 05:31 PM
Post #2


Don't like donuts. Don't do MySpace.
********

Group: WDG Moderators
Posts: 15,191
Joined: 9-August 06
Member No.: 6



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.


--------------------
"Never go to excess, but let moderation be your guide."
- Cicero

IPB Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Christian J
post Apr 18 2012, 05:34 PM
Post #3


.
********

Group: WDG Moderators
Posts: 5,916
Joined: 10-August 06
Member No.: 7



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?

This post has been edited by Christian J: Apr 18 2012, 05:40 PM


--------------------
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mbessey
post Apr 19 2012, 07:59 AM
Post #4





Group: Members
Posts: 3
Joined: 18-April 12
Member No.: 16,940



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.
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
mbessey
post Apr 19 2012, 12:17 PM
Post #5





Group: Members
Posts: 3
Joined: 18-April 12
Member No.: 16,940



BTW i got rid of the iframe
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post

Reply to this topicStart new topic
1 User(s) are reading this topic (1 Guests and 0 Anonymous Users)
0 Members:

 



- Lo-Fi Version Time is now: 22nd July 2014 - 02:19 PM