Image within iframe within iframe

Marc Hlavaty

New Member
Hi, new to this forum and inexperienced in web design. I'm working on my own HTML/CSS website and I have an issue. My site is to show various locations for filming and is image heavy. It also needs numerous categories and layers to get to the type of locations requested.

For this I've created a main page that has an iframe that views another set of pages that in turn, have an iframe, etc.

For example, my home page has a large iframe window plus 4 buttons for 4 categories of location... Nature, Structures, etc. Click on, say, the "Nature" button and a sub page comes up in the iframe. This page has another iframe plus a list of sub-categories (Vistas, Woodlands, etc.). Click one of these and a new page comes up in THAT iframe. This new page in the iframe window now has a series of buttons on the left for each of the individual locations for that category, plus it's own iframe. Click on one of those buttons... say, number 23, and a page shows up in THAT iframe with info and a set of thumbnails for that location... when a thumbnail is hovered over a larger image is shown.

So far so good. In general everything I've done so far works fine. My issue is that on the page with the buttons (number "23", etc.), I would also like to have a sample image pop up for that location when the mouse hovers over each button.

I've been able to do this with an onMouseOver MM_goToURL command pointing to a JPEG image (not to an HTML page). It works, but the image cannot be centered in the iframe, since it not HTML. It defaults to the upper left of the frame which doesn't work for the composition of the site (the iframe needs to be larger than the image, which is the main issue).

My attempted fix is that I created yet another HTML page with a centered iframe the exact size as the images I want to show (900px x 506px). What I thought I could do is direct the mouseover command from the "button page" to point to the iframe on this new page, which has a unique id.

Here is the original code that brings up the incorrectly positioned image in the iframe, which generally works:

onMouseOver="MM_goToURL('iframe_right','../images_2/PR16_A.jpg');return document.MM_returnValue"

Here is my replacement experiment to try and bring up the image in the iframe of the nested new HTML:

onMouseOver="MM_goToURL('iframe_right','../Pages_Photo-Sets/child_iframe.html','iframe_child','../images_2/PR16_A.jpg');return document.MM_returnValue"

As you can see I attempted to use the new iframe id (iframe_child) in the string but it doesn't work as I've written it. It DOES bring up that page fine, just not the image in the iframe.

Sorry for such a long request. If anyone has any thoughts, I would appreciate them. Thanks.


Well-Known Member
Staff member
Image within iframe within iframe

However as you appear to be using Dreamweaver scripts, it is the code from the functions you are calling that is required.