 |
|
|
| View previous topic :: View next topic |
| Author |
Message |
noxis
Joined: 04 Apr 2009
Posts: 4
|
 Posted: Sat Apr 04, 2009 10:08 am Merging/Layering/Combining i-frames with i-maps. |
 |
|
|
Hi! I've been working on this for a few hours, and what I thought what would have been a simple combining of codes has turned into an annoying mess. D:
What I'm trying to do is make an i-map menu open in an i-frame on the same image. I've uploaded all the slices on the image, so the layout shows up...
Here's the HTML.
| Quote: |
<html>
<head>
<title>spiffypony copy</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- ImageReady Slices (spiffypony copy.jpg) -->
<table id="Table_01" width="800" height="1000" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="3">
<img src="http://i42.tinypic.com/54g8jo.jpg" width="800" height="413" alt=""></td>
</tr>
<tr>
<td rowspan="2">
<img src="http://i41.tinypic.com/2wny14w.jpg" width="28" height="587" alt=""></td>
<TD WIDTH="562" HEIGHT="577"><iframe src="http://www.freewebs.com/blankreminders/herolayout/main.htm" name="frame" WIDTH="562" HEIGHT="577" frameborder="0"></iframe></TD>
<td rowspan="2">
<img name="j0" img src="http://i44.tinypic.com/rl04ci.jpg" width="210" height="587" usemap="#imap" alt="" />
<map name="imap">
<area shape="rect" coords="134,5,202,26" href="http://www.freewebs.com/blankreminders/spiffypony/updates.htm" alt="Updates" target="frame">
<area shape="rect" coords="91,37,202,55" href="http://www.freewebs.com/blankreminders/spiffypony/about.htm" alt="About Ponies" target="frame">
<area shape="rect" coords="95,65,202,87" href="http://www.freewebs.com/blankreminders/spiffypony/registration.htm" alt="Registration" target="frame">
<area shape="rect" coords="124,98,201,114" href="http://www.freewebs.com/blankreminders/spiffypony/contests.htm" alt="Contests" target="frame">
<area shape="rect" coords="108,124,200,146" href="http://www.freewebs.com/blankreminders/spiffypony/clubcards.htm" alt="Club Cards" target="frame">
</map></td>
</tr>
<tr>
<td>
<img src="http://i44.tinypic.com/wtyg0o.jpg" width="562" height="10" alt=""></td>
</tr>
</table>
<!-- End ImageReady Slices -->
</body>
</html> |
Thank you for any help you can give! |
|
sticks464
Joined: 31 Dec 2006
Posts: 2625
|
|
noxis
Joined: 04 Apr 2009
Posts: 4
|
| Posted: Sat Apr 04, 2009 1:15 pm |
|
|
|
They're actually pages I have yet to make on my website. ^^;
I'd like to get the layout coding working before I make the pages the i-map links to, although if it would be easier to work on with the pages made, I'll be happy to make them. |
|
sticks464
Joined: 31 Dec 2006
Posts: 2625
|
| Posted: Sat Apr 04, 2009 3:10 pm |
|
|
|
| The map is working correctly, the error page opens in the iframe so all you need is a valid page to open in the iframe. |
|
noxis
Joined: 04 Apr 2009
Posts: 4
|
| Posted: Sat Apr 04, 2009 4:07 pm |
|
|
|
True, but isn't the image out of alignment? At least that's what it looks like when I view it in Internet Explorer. Also, there's this blue frame-thing that surrounds the I-map section of the image.
...I'm sorry if I'm making this more complex than it ought to be. <_< >_> |
|
sticks464
Joined: 31 Dec 2006
Posts: 2625
|
| Posted: Sat Apr 04, 2009 6:07 pm |
|
|
|
The images are out of line because of the way they are sliced.
The top image should not have any lines that act as borders and the image map should be one image that includes the top border where the text is. You only need two images, the top and the map.
Here's what I did but I can't align the map because it is bound to it's top border in the top image.
| Code: |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
* {
margin:0;
padding:0;
border:none;
}
#Table_01 {
width:800px;
border:none;
padding:0;
border-collapse:collapse;
background:#febcfa;
}
#header {
background:url(http://i42.tinypic.com/54g8jo.jpg) no-repeat;
height:412px;
}
#frame {
width:562px;
height:577px;
display:block;
border:none;
overflow:auto;
border:1px solid #000;
margin-left:24px;
}
#map {
width:210px;
margin-left:1px;
}
</style>
</head>
<body>
<table id="Table_01" cellspacing="0">
<tr>
<td id="header" colspan="3"></td>
</tr>
<tr>
<td colspan="2"><iframe id="frame" name="frame" src="http://www.freewebs.com/blankreminders/herolayout/main.htm"></iframe></td>
<td><img id="map" "name="j0" img src="http://i44.tinypic.com/rl04ci.jpg" width="210" height="587" usemap="#imap" alt="" />
<map name="imap">
<area shape="rect" coords="134,5,202,26" href="http://www.freewebs.com/blankreminders/spiffypony/updates.htm" alt="Updates" target="frame">
<area shape="rect" coords="91,37,202,55" href="http://www.freewebs.com/blankreminders/spiffypony/about.htm" alt="About Ponies" target="frame">
<area shape="rect" coords="95,65,202,87" href="http://www.freewebs.com/blankreminders/spiffypony/registration.htm" alt="Registration" target="frame">
<area shape="rect" coords="124,98,201,114" href="http://www.freewebs.com/blankreminders/spiffypony/contests.htm" alt="Contests" target="frame">
<area shape="rect" coords="108,124,200,146" href="http://www.freewebs.com/blankreminders/spiffypony/clubcards.htm" alt="Club Cards" target="frame">
</map></td>
</tr>
<tr>
<td colspan="3"> </td>
</tr>
</table>
</body>
</html> |
|
|
noxis
Joined: 04 Apr 2009
Posts: 4
|
| Posted: Sun Apr 05, 2009 11:43 am |
|
|
|
Thank you so much for your help!
I did as you said and resliced the image--and it worked! Thanks again. ^^ |
|
|
|
You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot vote in polls in this forum
|
|
|
|
|
HTML Help Forum
FAQ
Search
Memberlist
Register
Profile
Log in to check your private messages
Log in
