Image map to IFRAME

How to link an image map to an IFRAME in a table?

[Alfasys]

Hallo,

i do have a difficult - at least form me - problem to solve.
I do have a table which is constructed this way:

<--1-->
<2>.<3>
<--4-->
<--5-->

Cell 1 is an image
Cell 2 is an image map
Cell 3 is the IFRAME
Cell 4 and 5 is text

I would like to open the mapped link when clicked (in cell 2) in the IFRAME (cell 3).

------------------------------------------------------------
IMAGE MAP CELL 2
------------------------------------------------------------
<IMG SRC="image2.jpg" USEMAP="#newlay1" BORDER="0">
<MAP NAME="newlay1">
<AREA SHAPE="RECT" COORDS="w1,x1,y1,z1" HREF="a.htm">
<AREA SHAPE="RECT" COORDS="w2,x2,y2,z2" HREF="b.htm">
<AREA SHAPE="RECT" COORDS="w3,x3,y3,z3" HREF="c.htm">
<AREA SHAPE="RECT" COORDS="w4,x4,y4,z4" HREF="d.htm">
<AREA SHAPE="RECT" COORDS="w5,x5,y5,z5" HREF="e.htm">
<AREA SHAPE="RECT" COORDS="w6,x6,y6,z6" HREF="f.htm">
<AREA SHAPE="RECT" COORDS="w7,x7,y7,z7" HREF="g.htm">
<AREA SHAPE="RECT" COORDS="w8,x8,y8,z8" HREF="h.htm">
<AREA SHAPE="RECT" COORDS="w9,x9,y9,z9" HREF="i.htm">
<AREA SHAPE="RECT" COORDS="w10,x10,y10,z10" HREF="j.htm">
<AREA SHAPE="RECT" COORDS="w11,x11,y11,z11" HREF="k.htm">
<AREA SHAPE="RECT" COORDS="w12,x12,y12,z12" HREF="l.htm">
<AREA SHAPE="RECT" COORDS="w13,x13,y13,z13" HREF="m.htm">
<AREA SHAPE="RECT" COORDS="w14,x14,y14,z14" HREF="n.htm">
<AREA SHAPE="RECT" COORDS="w15,x15,y15,z15" HREF="o.htm">
</MAP>
------------------------------------------------------------
.
.
.
------------------------------------------------------------
IFRAME IN CELL 3
------------------------------------------------------------
<iframe src="page.htm" name="myFrame" id="myFrame" width="98%" height="98%" frameborder="0"></iframe>
------------------------------------------------------------

Is this possible and if so can you please provide me with some advise.

Thank you.

[Alfasys]

Hallo,

I tried it this way, but do get a script error.
Maybe it's a start to a solution ;-)

BTW, the error I get is :

'this.options' is null or not an object

------------------------------------------------------------
THE IMAGE MAP
------------------------------------------------------------
<IMG SRC="images/newlay1.jpg" USEMAP="#newlay1" BORDER="0">
<MAP NAME="newlay1">
<AREA SHAPE="RECT" COORDS="5,21,95,40" onClick="document.getElementById('myframe1').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="5,43,95,64" onClick="document.getElementById('myframe2').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="5,66,95,87" onClick="document.getElementById('myframe3').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="5,89,95,110" onClick="document.getElementById('myframe4').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="4,112,95,133" onClick="document.getElementById('myframe5').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="5,135,95,156" onClick="document.getElementById('myframe6').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="4,158,95,179" onClick="document.getElementById('myframe7').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="4,181,95,202" onClick="document.getElementById('myframe8').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="5,204,95,225" onClick="document.getElementById('myframe9').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="4,227,95,248" onClick="document.getElementById('myframe10').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="5,250,95,271" onClick="document.getElementById('myframe11').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="5,273,96,294" onClick="document.getElementById('myframe12').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="4,296,96,317" onClick="document.getElementById('myframe13').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="5,319,95,341" onClick="document.getElementById('myframe14').src=this.options[this.selectedIndex].value;">
<AREA SHAPE="RECT" COORDS="4,342,95,363" onClick="document.getElementById('myframe15').src=this.options[this.selectedIndex].value;">
</MAP>
------------------------------------------------------------
.
.
.
------------------------------------------------------------
THE IFRAME(S)
------------------------------------------------------------
<iframe src="page0.htm" name="myFrame" id="myFrame" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page1.htm" name="myFrame1" id="myFrame1" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page2.htm" name="myFrame2" id="myFrame2" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page3.htm" name="myFrame3" id="myFrame3" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page4.htm" name="myFrame4" id="myFrame4" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page5.htm" name="myFrame5" id="myFrame5" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page6.htm" name="myFrame6" id="myFrame6" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page7.htm" name="myFrame7" id="myFrame7" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page8.htm" name="myFrame8" id="myFrame8" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page9.htm" name="myFrame9" id="myFrame9" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page10.htm" name="myFrame10" id="myFrame10" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page11.htm" name="myFrame11" id="myFrame11" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page12.htm" name="myFrame12" id="myFrame12" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page13.htm" name="myFrame13" id="myFrame13" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page14.htm" name="myFrame14" id="myFrame14" width="98%" height="98%" frameborder="0"></iframe>
<iframe src="page15.htm" name="myFrame15" id="myFrame15" width="98%" height="98%" frameborder="0"></iframe>
------------------------------------------------------------

Thank you

[R1chard]

Was there a problem before you put the script in?

Surely it will be fine once you put in the target?

[tedster]

Agreed - I think all you were missing in your first attempt is a target="myFrame" attribute after the href attribute in your image map.

[Alfasys]

Hi R1chard and tedster,

thank you for the reply.
I already got some help from ToneLeMoan and the solution was indeed easier than what I was doing.
The missing target tag was indeed the solution :-)

So, this is what I did and now it works just fine :

.
.
.
<AREA SHAPE="RECT" COORDS="5,21,95,40" HREF="dir/somepage.htm" target="myFrame">
.
.
.
<iframe src="page.htm" name="myFrame" id="myFrame" width="98%" height="98%" frameborder="0"></iframe>
.
.
.

Thank you all for the great help.

Beste regards,

Karl