IFrame Help

Can an IFrame be put over a jpeg image?

[Preeminent]

Hi all,
I am wondering if this is possible: My whole basic home page is a jpeg image not in a table. Part of that image has a section of it that is a Tv/Computer monitor. All made in photoshop. I am really hoping that I can somehow insert an iframe in the Tv's monitor section of the jpeg to display the pages of my site. So when links are clicked on the home page, those pages will load in the Iframe and look like the tv monitor is showing the content. Is there any way this can be done? I use dreamweaver.

[testy]

Yes, It can be done.

Use the computer image as the background of your main page/table and then create a iframe in the required position...

[Xapti]

Gah. Think of the accessibility of your site, man. A webpage that is an image? What do you use, image maps?
But yeah, like was mentioned, it can be done. Numerous ways. Another way is to absolutely position the iframe over the coordinates where the screen is.

[edited by: Xapti at 6:35 am (utc) on June 27, 2007]

[Preeminent]

Thanks for the replies! Yes, I know that is sounds bad having the whole page be an image, but it is a portfolio site and should look pretty good if I can get this iframe to work. I will have to try with the absolute positioning, because I cannot have it as the background of a table, since I have to use parts of the image for links. I have to make hotspots and you cannot do that with a background image right?

[Xapti]

You can make links over background images yes, just place empty, sized, block formatted anchor tags over the part of the background image which should be a link.
Example CSS:
div#moogle a{height:100px;width:100px;display:block}

For accessibility reasons, it's best not to have them empty as I said before though. A text description of the link enclosed in a container is a good idea. To prevent the text description from interfering with the background image, set the anchor to overflow:hidden, and the text container to something like margin-left:-900px.

The advantage imagemaps have over this type of method is that the anchors can be non-rectangular. This method requires your links to be rectangular, which shouldn't be an issue unless you're doing something quite advanced (or unless your picky with anchor shapes :P).
As far as I know, imagemaps are not as easily accessible though.

[edited by: Xapti at 11:25 pm (utc) on June 30, 2007]

[neilparnham]

Very useful just what i needed as well cheers.

No links Insert

<Sorry, no personal URLs.
See Forum Charter [webmasterworld.com]>

[edited by: tedster at 11:17 pm (utc) on July 2, 2007]