Targeting multi Iframes

@LetterBMar 09.2004

I asked over in the HTML Forum if there was a way to target two I-frames (one for actual web content, the other for an image) using a single nav button. (I’m still a newbie, so pardon if I don’t get all the terminology down). They said it can’t be done without some Java Scripting. Can anyone help me out, or point me to a good tutorial to go through?

to post a comment

JavaScript

@IceMetalPunkMar 09.2004 — #Sure. you could do this:

[code=php]
 <script>
 function ChangeFrames() {
 document.getElementById("frame1").src="URL_TO_PAGE";
 document.getElementById("frame2").src="URL_TO_IMAGE";
 }
 </script>
 [/code]

Then, have the IFrames and button like this:

[code=php]
 <iframe id="frame1"></iframe><iframe id="frame2"></iframe><input type="button" value="Change IFRAMES" onClick="ChangeFrames()">
 [/code]

Hope this helps.

-IceMetalPunk ?

@steelersfan88Mar 09.2004 — #I replied to that, i'll try and make myself a tad clearer!

If you want on a button click to change the source of two iframes, you have 2 choices, either put the code right into the onclick event or put it neatly into a function, like so:

[code=php]<form name="myForm">
 <input type="button" value="Change" onclick="makeChange()">
 </form>
 
 <script type="text/javascript">
 
 // note this should be in the head section
 // not quite sure what you want to do with the function, this will just change the source:
 
 function makeChanges() {
 document.frames['leftFrame'].document.location.href = "where"
 document.frames['picFrame'].document.location.href = "other where.gif"
 }
 
 </script>[/code]

Remember, the goal of changing the sources is simple, yet it is difficult from your post to see actually what you want it to do. If there are several buttons, call the same function and send a parameter to the picture and page you want to display, which would be retrieved from an array, respond if more help needed.

@LetterBauthorMar 09.2004 — #Thanks to both of you. I'll play around with both ideas and see if I can get something working.

Targeting multi Iframes

3 Comments(s) _↴

Also in #JavaScript _↴

Success!

Social

Version

Targeting multi Iframes

3 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

3 Comments(s) _↴

Also in #JavaScript _↴