homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Home / Forums Index / Code, Content, and Presentation / HTML
Forum Library, Charter, Moderators: incrediBILL

HTML Forum

IFrame Help
Can an IFrame be put over a jpeg image?

5+ Year Member

Msg#: 3379614 posted 9:32 pm on Jun 26, 2007 (gmt 0)

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.



5+ Year Member

Msg#: 3379614 posted 6:25 am on Jun 27, 2007 (gmt 0)

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...


WebmasterWorld Senior Member 5+ Year Member

Msg#: 3379614 posted 6:34 am on Jun 27, 2007 (gmt 0)

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]


5+ Year Member

Msg#: 3379614 posted 9:53 pm on Jun 28, 2007 (gmt 0)

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?


WebmasterWorld Senior Member 5+ Year Member

Msg#: 3379614 posted 11:15 pm on Jun 30, 2007 (gmt 0)

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]


5+ Year Member

Msg#: 3379614 posted 9:52 pm on Jul 2, 2007 (gmt 0)

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]

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / HTML
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved