HTML iframe Question

**skadrummer01** · 08-25-2005, 11:53 PM

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?

**coothead** · 08-26-2005, 06:12 AM

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>

coothead

**skadrummer01** · 08-26-2005, 08:52 PM

Ahh yeah, I'll play around with that one. Thanks very much coot dude!

**skadrummer01** · 08-26-2005, 09:51 PM

Originally Posted by coothead

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>

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

**skadrummer01** · 08-27-2005, 12:18 AM

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.

**coothead** · 08-28-2005, 02:49 AM

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>

coothead

Thread: HTML iframe Question

Thread Tools

Related

Calling PHP on HTML page with Iframe Forum: HTML Forum

question about iframe Forum: HTML Forum

How to embed a swf in html with links that target iframe Forum: HTML Forum

html Iframe problem Forum: HTML Forum

A question about the html&perl Forum: CGI Perl Forum

HTML iframe Question

Re: iframe Question

Re: iframe Question

Re: iframe Question

Re: iframe Question

Re: iframe Question

Tags for this Thread

Cloudjiffy- PaaS for Developers