Thread: HTML iframe Question
Results 1 to 6 of 6
Related
-
Calling PHP on HTML page with Iframe Forum: HTML Forum
Replies: 5 -
question about iframe Forum: HTML Forum
Replies: 3 -
How to embed a swf in html with links that target iframe Forum: HTML Forum
Replies: 0 -
html Iframe problem Forum: HTML Forum
Replies: 4 -
A question about the html&perl Forum: CGI Perl Forum
Replies: 11
-
08-25-2005, 11:53 PM #1
HTML iframe Question
Now this could be a CSS or Java related problem, but since iframes are some what html based, I thought I'd ask this.
Now what I'm trying to do is, align an IFRAME within an image. Preferably however, an image map dealy. Meaning I have the one whole image, and I use the map for the top of the image (where the menu is part of the picture, where I want the links to be), and I want to put and align the IFRAME within the image. I've seen this before I do believe, but how would I go about doing that if anything? Where can I get a source code, or if you have your own, would you allow me to scrabble it?
-
08-26-2005, 06:12 AM #2bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: iframe Question
Hi there skadrummer01,
take a look at this working example, it may give you some ideas...
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>XHTML 1.0 Transitional</title> <base href="http://coothead.homestead.com/files/"/> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="Content-Script-Type" content="text/javascript"/> <meta name="Content-Style-Type" content="text/css"/> <style type="text/css"> <!-- body { background-color:#ccf; } #main_container { width:740px; height:514px; margin:40px auto; border-top:6px solid #336; border-right:6px solid #99c; border-bottom:6px solid #99c; border-left:6px solid #336; } #image_container { position:relative; } #image { display:block; } #iframe_container { position:absolute; top:157px; left:120px; } #iframe { width:500px; height:300px; } --> </style> <script type="text/javascript"> <!-- //--> </script> </head> <body> <div id="main_container"> <div id="image_container"> <img id="image" src="grap.jpg" alt=""/> <div id="iframe_container"> <iframe id="iframe" src="http://www.google.com"></iframe> </div> </div> </div> </body> </html>
-
08-26-2005, 08:52 PM #3
Re: iframe Question
Ahh yeah, I'll play around with that one. Thanks very much coot dude!
-
08-26-2005, 09:51 PM #4
Re: iframe Question
Originally Posted by coothead
Actually, now that I look at it, it works like a charm but I'm trying to add this line of code to also, make that image using the iframe code, to make it an image map as well....
<img src="page1.jpg" USEMAP="#page1" BORDER=0>
<map name="page1">
<area name="Home" shape="rect" coords="60,101,122,125" href="index.html" alt="" target="_blank">
<area name="News" shape="rect" coords="145,102,201,124" href="content.html" alt="">
<area name="Band" shape="rect" coords="224,102,285,124" href="band.html" alt="" target="content">
<area name="About" shape="rect" coords="301,100,366,124" href="about.html" alt="" target="content">
<area name="Shows" shape="rect" coords="387,101,451,123" href="shows.html" alt="" target="content">
<area name="Media" shape="rect" coords="472,102,543,123" href="media.html" alt="" target="content">
<area name="Merch" shape="rect" coords="563,102,630,123" href="merch.html" alt="" target="content">
<area name="Guestbook" shape="rect" coords="190,134,297,162" href="guestbook.htrml" alt="" target="content">
<area name="Links" shape="rect" coords="321,135,377,156" href="links.html" alt="" target="content">
<area name="Contact" shape="rect" coords="401,135,485,157" href="contact.html" alt="" target="content">
</map>
As you can see, that wont go along with the Iframe code. Any way I could add that to it, so it works with your current code??
-
08-27-2005, 12:18 AM #5
Re: iframe Question
Oh yes, for all of you that want to view the webpage with the link, go to...
www.freewebs.com/toetappingscoundrels/yadda.html
that should have the source code on it (when you right click for it). On the page now, is one pefectly aligned frame amongst a picture. Which is good. Another picture underneath it, is of just the image as a map, without the frame in it. What I'm trying to do is get both the Iframe and the image map together so it doesn't show up that way. Basically combining both codes so that you have the image map and frame put together. You can kinda get the just of it by looking at that hopefully.
If you could help me on this, I'd really appreciate it, I've been working for an hour trying to get them to work together.
-
08-28-2005, 02:49 AM #6bald headed old fart
Status- Offline
Join Date- Aug 2003
Location- chertsey, a small town 25 miles south west of london, england.
Posts- 739
Re: iframe Question
Hi there skadrummer01,
Here is your page, working, I hope, as you require...
Code:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title>Toe Tapping Scoundrels</title> <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"/> <meta name="Content-Script-Type" content="text/javascript"/> <meta name="Content-Style-Type" content="text/css"/> <style type="text/css"> <!-- body { background-color:#000; } #image_container { position:relative; width:724px; margin:auto; } #image { display:block; border:none; } #iframe_container { position:absolute; top:170px; left:26px; } #iframe { width:666px; height:435px; } --> </style> </head> <body> <div id="main_container"> <div id="image_container"> <img id="image" src="page1.jpg" usemap="#page1"alt=""/> <div id="iframe_container"> <iframe id="iframe" name="iframe" src="content.html" frameborder="0"></iframe> </div> </div> </div> <map name="page1" id="page1"> <area shape="rect" coords="60,101,122,125" href="index.html" alt="" target="_blank"/> <area shape="rect" coords="145,102,201,124" href="content.html" alt="" target="iframe"/> <area shape="rect" coords="224,102,285,124" href="band.html" alt="" target="iframe"/> <area shape="rect" coords="301,100,366,124" href="about.html" alt="" target="iframe"/> <area shape="rect" coords="387,101,451,123" href="shows.html" alt="" target="iframe"/> <area shape="rect" coords="472,102,543,123" href="media.html" alt="" target="iframe"/> <area shape="rect" coords="563,102,630,123" href="merch.html" alt="" target="iframe"/> <area shape="rect" coords="190,134,297,162" href="guestbook.htrml" alt="" target="iframe"/> <area shape="rect" coords="321,135,377,156" href="links.html" alt="" target="iframe"/> <area shape="rect" coords="401,135,485,157" href="contact.html" alt="" target="iframe"/> </map> </body> </html>