Wrox Programmer Forums
Go Back   Wrox Programmer Forums > Web Programming > JavaScript > Javascript How-To
| Search | Today's Posts | Mark Forums Read
Javascript How-To Ask your "How do I do this with Javascript?" questions here.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the Javascript How-To section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
  #1 (permalink)  
Old January 17th, 2005, 09:52 AM
Friend of Wrox
 
Join Date: Jun 2004
Location: Alhambra, ca, USA.
Posts: 245
Thanks: 0
Thanked 0 Times in 0 Posts
Default How to swap many html files to same <i frame>

Hello
I am very new to Javascript.

I am using onclick event of <img src> tag to trigger a load or swap of html file contained in <i frame>.

I have 6 different <img src> tags triggering different html files that need to be "swapped" or "loaded" into the same <i frame>.

What is the practical way to do this? Please help.

  #2 (permalink)  
Old January 17th, 2005, 12:32 PM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Change the src attribute (assuming iframe has an id of 'fraContent':
Code:
var oFrame = document.getElementById("fraContent");
oFrame.src = <new source>;
--

Joe (Microsoft MVP - XML)
  #3 (permalink)  
Old January 18th, 2005, 02:38 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Alhambra, ca, USA.
Posts: 245
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Hello joefawcett,
Thanks for your reply. I am very new to Javascript.
How can you make this into a function with <iframe ... onmouseover="functionname(this, newhtmlname)" >

"Change the src attribute (assuming iframe has an id of 'fraContent':


var oFrame = document.getElementById("fraContent");
oFrame.src = <new source>;"

Thank you

  #4 (permalink)  
Old January 18th, 2005, 02:49 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Alhambra, ca, USA.
Posts: 245
Thanks: 0
Thanked 0 Times in 0 Posts
Default

 Hello joefawcett,

I didn't explain this correctly. Let me make the correction:


How can you make your recommendation into a function with <div ... onclick="functionname(this, newhtmlname)" ><img src...></div>

The situation is that the <iframe> on right side of page responds to the onclick event of <div> on the left.

"Change the src attribute (assuming iframe has an id of 'fraContent':


var oFrame = document.getElementById("fraContent");
oFrame.src = <new source>;"

Thank you

  #5 (permalink)  
Old January 19th, 2005, 11:05 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Code:
function changeFrameSource(NewSource)
{
  var oFrame = document.getElementById("fraContent");
  oFrame.src = NewSource;
}
If you just want to populate an iframe with the same picture as an image then:
Code:
<img src="imageSource.gif" onclick="changeFrameSource(this.src);">
--

Joe (Microsoft MVP - XML)
  #6 (permalink)  
Old January 20th, 2005, 07:50 AM
Friend of Wrox
 
Join Date: Jun 2004
Location: Alhambra, ca, USA.
Posts: 245
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Dear joefawcett,
Thanks for your reply. I am kind of getting what you are saying.


function changeFrameSource(NewSource)
{
  var oFrame = document.getElementById("fraContent");
  oFrame.src = NewSource;
}


If you just want to populate an iframe with the same picture as an image then:


<img src="imageSource.gif" onclick="changeFrameSource(this.src);">
--------------------------------------------------------------------
I figured it was more complicate than this.

Situation:
When user clicks on image then a different frame changes the source of htm. (This htm has the bigger image which is encrypted)

The same image doesn't change the source.

Please help.


  #7 (permalink)  
Old January 20th, 2005, 08:32 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Code:
function changeFrameSource(NewSource)
{
  var oFrame = document.getElementById("fraContent");
  oFrame.src = NewSource;
}

<img src="imageSource.gif" onclick="changeFrameSource(<path to material to show in iframe>);">
--

Joe (Microsoft MVP - XML)
  #8 (permalink)  
Old January 21st, 2005, 04:13 AM
Friend of Wrox
 
Join Date: Jun 2004
Location: Alhambra, ca, USA.
Posts: 245
Thanks: 0
Thanked 0 Times in 0 Posts
Default

joefawcett
Thank you again. I tried to make it work. Please help.

This is iframe area for .htm to changed to another .htm when onclick is click on the <img> tag.

<iframe name="fraContent" src="6_0.htm" ></iframe>

When this img is clicked then iframe's src should change to 6_1.htm from 6_0.htm
<img src="images/6/6_o1.gif" onclick="changeFrameSource('6_1.htm');">


When I tried to use your code it doesn't work.
function changeFrameSource(NewSource)
{
  var oFrame = document.getElementById("fraContent");
  oFrame.src = NewSource;
}

<img src="imageSource.gif" onclick="changeFrameSource(<path to material to show in iframe>);">

What could be wrong???

  #9 (permalink)  
Old January 21st, 2005, 08:26 AM
joefawcett's Avatar
Wrox Author
Points: 9,763, Level: 42
Points: 9,763, Level: 42 Points: 9,763, Level: 42 Points: 9,763, Level: 42
Activity: 0%
Activity: 0% Activity: 0% Activity: 0%
 
Join Date: Jun 2003
Location: Exeter, , United Kingdom.
Posts: 3,074
Thanks: 1
Thanked 38 Times in 37 Posts
Default

Because, as stated previously, my code assumed your frame had an id of "fraContent".

--

Joe (Microsoft MVP - XML)
  #10 (permalink)  
Old January 21st, 2005, 11:13 PM
Friend of Wrox
 
Join Date: Jun 2004
Location: Alhambra, ca, USA.
Posts: 245
Thanks: 0
Thanked 0 Times in 0 Posts
Default

Got it to work. Thanks.



Similar Threads
Thread Thread Starter Forum Replies Last Post
avoiding a <div> to go under the frame nerssi Javascript 2 April 7th, 2007 07:19 AM
<style> tags in a <body> vs. <div> bcat BOOK: Beginning CSS: Cascading Style Sheets for Web Design ISBN: 978-0-7645-7642-3 1 March 27th, 2005 08:50 AM
HELP: XSL -> HTML <select selected=true> jedbartlett XSLT 4 October 7th, 2004 11:16 PM
Dynamic HTML <<Events>> babloo81 Javascript 2 December 29th, 2003 12:40 PM
<<ASP.NET Security>>,download files in chapter 8 alaix All Other Wrox Books 1 July 24th, 2003 10:29 AM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.