Welcome to WebmasterWorld Guest from 54.225.51.21

Forum Moderators: incrediBILL

Message Too Old, No Replies

IFrame Help

Can an IFrame be put over a jpeg image?

     
9:32 pm on Jun 26, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 11, 2006
posts:57
votes: 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.
6:25 am on June 27, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Mar 18, 2005
posts:61
votes: 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...

6:34 am on June 27, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
posts:671
votes: 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]

9:53 pm on June 28, 2007 (gmt 0)

Junior Member

10+ Year Member

joined:Dec 11, 2006
posts:57
votes: 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?
11:15 pm on June 30, 2007 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Mar 18, 2007
posts:671
votes: 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]

9:52 pm on July 2, 2007 (gmt 0)

New User

5+ Year Member

joined:July 2, 2007
posts:1
votes: 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]

 

Join The Conversation

Moderators and Top Contributors

Hot Threads This Week

Featured Threads

Free SEO Tools

Hire Expert Members