Html

sc8ing · Nov 19, 2010

Hi, I've been building a small website for one of my classes at the school I go to as a project. I'm using a plain text program on a mac. I want to be able to position the image in a certain spot on my page and map the image at the same time (I can do each of these independently without combining them). When I try combining the two pieces of code, the image appears in the correct spot, but with no mapping. Here is the code put in the head of the page:

Code:

<!DOCTYPE html>
<head>
	<title>blank</title>

<style type="text/css">
#letterh
{
position: absolute;
left: 400px;
top: 50px;
padding: 0px;
}

#letteri
{
position: absolute;
right: 350px;
top: 50px;
padding; 0px;
}
</style>
</head>

Here is the code in the body and div tags:

Code:

<body bgcolor="black" link="black" alink="black" vlink="black">

<div id="#letterh">
<img src="h.png" usemap="#h" width="300" height="300" alt="Letter H">

<map name="h">

<area	shape="rect"
		coords="40,208,329,270"
		nohref="nohref"
		title="This is the bottom of the I" />

<area	shape="default"
		nohref="nohref"
		title="This is not the bottom of the H" />
</map>
</div>

</body>

</html>

Any help is greatly appreciated, thanks in advance! ;D

clive12 · Nov 19, 2010

Do you have to build it using only HTML or can you use programs? Positioning images is much easier to do in dreamweaver and you can always fine tune it by editing the code.

You can download a trial with full functionality from adobe and use it for 30 days.

bobtomay · Nov 19, 2010

NOTE: Thread moved to appropriate forum. Not just anything goes in Anything Goes

sc8ing · Nov 20, 2010

Can't...

clive12 said:
Do you have to build it using only HTML or can you use programs? Positioning images is much easier to do in dreamweaver and you can always fine tune it by editing the code.

You can download a trial with full functionality from adobe and use it for 30 days.

No, I can't. The purpose of the project was to learn HTML/css/etc.

sc8ing · Nov 20, 2010

Ohhhh

bobtomay said:
NOTE: Thread moved to appropriate forum. Not just anything goes in Anything Goes

Thanks. I didn't even realize there was an HTML forum.

xstep · Nov 22, 2010

Did you figure this out?

Does your PNG have a black letter on a transparent background. If so, you won't see it on a black background.

The IDs in your DIV tags have the # sign. Remove that and the positioning should work.

Your code is incomplete. I believe you'll need one map per image.

You coords second X position went outside the bounds of your 300 pixel image.

sc8ing · Nov 22, 2010

Thanks a lot xstep. I guess I did something wrong when mapping my image (as it went out of the bounds of the image). Also, I hadn't realized I put in the # sign in my DIV tags.