HTML Help

noxis · Joined: 04 Apr 2009 Posts: 4

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

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

</body>
</html>

Thank you for any help you can give!

sticks464 · Joined: 31 Dec 2006 Posts: 2311

Where are these pages?
http://www.freewebs.com/blankreminders/spiffypony/updates.htm
http://www.freewebs.com/blankreminders/spiffypony/about.htm http://www.freewebs.com/blankreminders/spiffypony/registration.htm
http://www.freewebs.com/blankreminders/spiffypony/contests.htm
http://www.freewebs.com/blankreminders/spiffypony/clubcards.htm

They won't come up even using their individual url. What I get is a host error page from Webs. So the url's must be incorrect for your imap links.

noxis · Joined: 04 Apr 2009 Posts: 4

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: 2311

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

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: 2311

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

Thank you so much for your help!

I did as you said and resliced the image--and it worked! Thanks again. ^^