161 users online (0 members and 161 guests)  

> > > > HTML iframe Question

  Results 1 to 6 of 6

Related

  1. Calling PHP on HTML page with Iframe    Forum: HTML Forum
    Replies: 5
  2. question about iframe    Forum: HTML Forum
    Replies: 3
  3. How to embed a swf in html with links that target iframe    Forum: HTML Forum
    Replies: 0
  4. html Iframe problem    Forum: HTML Forum
    Replies: 4
  5. A question about the html&perl    Forum: CGI Perl Forum
    Replies: 11
  1. 08-25-2005, 11:53 PM #1
    skadrummer01
    skadrummer01 is offline
    skadrummer01's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Mar 2004
    Posts
    36

    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?
    Reply With Quote Reply With Quote
  2. 08-26-2005, 06:12 AM #2
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

    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>
    coothead
    Reply With Quote Reply With Quote
  3. 08-26-2005, 08:52 PM #3
    skadrummer01
    skadrummer01 is offline
    skadrummer01's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Mar 2004
    Posts
    36

    Re: iframe Question

    Ahh yeah, I'll play around with that one. Thanks very much coot dude!
    Reply With Quote Reply With Quote
  4. 08-26-2005, 09:51 PM #4
    skadrummer01
    skadrummer01 is offline
    skadrummer01's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Mar 2004
    Posts
    36

    Re: iframe Question

    Quote 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??
    Reply With Quote Reply With Quote
  5. 08-27-2005, 12:18 AM #5
    skadrummer01
    skadrummer01 is offline
    skadrummer01's Avatar
    Junior Member
    Status
    Offline
    Join Date
    Mar 2004
    Posts
    36

    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.
    Reply With Quote Reply With Quote
  6. 08-28-2005, 02:49 AM #6
    coothead
    coothead is offline
    coothead's Avatar
    bald headed old fart
    Status
    Offline
    Join Date
    Aug 2003
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    733

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


    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Tags for this Thread