cjohns
06-02-2005, 07:42 PM
I have a rather odd situation, and with my very limited javascript I knowledge I can't quite see how to solve it.
I have an html page (call it main.html) with with 2 iframes (actually, it's a bit more complicated, but that's all that's relevant to this discussion). Each iframe contains an image. Clicking on the image in iframe A should change the image in iframe A as well as in iframe B. Similarly, clicking on image B should change the images in iframes A and B (but different images to than if A is clicked).
As I see it, there are two approaches, but I don't know how to make either one work.
The simplest approach is to catch the click event within main.html, in a way that lets me determine which iframe was clicked on, and then load the new images appropriately (using the IFrame SSI script II from this site). But iframes don't have onclick handlers, so I don't know how to catch the click event.
The second approach is to embed each image within an html page (call them A.html and B.html). Then detecting the click in and changing the image in A is easy - I just put a normal a href tag around the image. But, then how do I change the image in B? I can call the javascript from A.html if I put the script into an external .js file, but the iframe that is hosting B.html is obviously unknown in A.html, so loadintoIframe(iframeB, "imgB2.jpg") won't work because the script is looking for iframeB in A.html, not main.html. What I need to do is something like loadintoIframe(parent.iframeB, "imgB2.jpg"), but I can't find any way of referencing a parent element from A.html.
Is there a way to make either of these approaches work? Or is there another way to do it that I'm missing?
I have an html page (call it main.html) with with 2 iframes (actually, it's a bit more complicated, but that's all that's relevant to this discussion). Each iframe contains an image. Clicking on the image in iframe A should change the image in iframe A as well as in iframe B. Similarly, clicking on image B should change the images in iframes A and B (but different images to than if A is clicked).
As I see it, there are two approaches, but I don't know how to make either one work.
The simplest approach is to catch the click event within main.html, in a way that lets me determine which iframe was clicked on, and then load the new images appropriately (using the IFrame SSI script II from this site). But iframes don't have onclick handlers, so I don't know how to catch the click event.
The second approach is to embed each image within an html page (call them A.html and B.html). Then detecting the click in and changing the image in A is easy - I just put a normal a href tag around the image. But, then how do I change the image in B? I can call the javascript from A.html if I put the script into an external .js file, but the iframe that is hosting B.html is obviously unknown in A.html, so loadintoIframe(iframeB, "imgB2.jpg") won't work because the script is looking for iframeB in A.html, not main.html. What I need to do is something like loadintoIframe(parent.iframeB, "imgB2.jpg"), but I can't find any way of referencing a parent element from A.html.
Is there a way to make either of these approaches work? Or is there another way to do it that I'm missing?