/    Sign up×
Community /Pin to ProfileBookmark

image map for background image

I need to create an image map using css so the coins are clickable. Can anyone help as I am completely stuck?!?

[code=html]<style>
#feedback {
background-color: #ffffff;
background-image: url(http://www.paxton-access.co.uk/Image%20registry/Image%20web/004993.jpg);
background-repeat: no-repeat;
width: 266px;
height: 171px;
float: right;
text-align: left;
}

#title2 {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 20.22px; color: #000;
text-align: left;
margin-top: 14px;
padding-left: 15px;
border: none;
}

#comtext {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px; color: #000;
text-align: left;
padding-top: 5px;
margin-left: 15px;
margin-bottom: 10px;
width: 200px;
border: none;
}

#quotetext {
font-family: Verdana, Tahoma, Arial, sans-serif;
font-size: 11px; color: #000;
text-align: left;
padding-top: 5px;
margin-left: 15px;
width: 130px;
border: none;
}
</style>

<div id=”feedback”>
<div id=”title2″><a href=”#” class=”title2″>How to buy</a></div>
<div id=”comtext”>There are many different ways to buy our products</div>
<div id=”quotetext”>Click <a href=”#”>here</a> to find the nearest authorized retailer near you</div>
</div>[/code]

to post a comment
CSS

5 Comments(s)

Copy linkTweet thisAlerts:
@FangNov 18.2005 — Make an image map in #feedback and position the text relative or absolute to #feedback.
Copy linkTweet thisAlerts:
@JoeADauthorNov 18.2005 — sorry for being dense, but how exactly do I do that? I am not too sharp on css as you can probably guess!
Copy linkTweet thisAlerts:
@FangNov 18.2005 — Something like this:&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd"&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
&lt;title&gt;coins&lt;/title&gt;
&lt;meta http-equiv="Content-Type" content="text/html; charset=utf-8"&gt;

&lt;style type="text/css"&gt;
#feedback {position:relative; background-color: #ffffff; width: 266px; height: 171px; float: right; text-align: left; }
#feedback div {position:absolute; left:15px; color: #000; font-family: Verdana, Tahoma, Arial, sans-serif;}
#feedback img {border:0;}
#title2 {top:15px; font-size: 20.22px; }
#comtext {top:45px; font-size: 11px; color: #000; width: 200px;}
#quotetext {top:90px; font-size: 11px; color: #000; width: 130px;}
&lt;/style&gt;

&lt;/head&gt;
&lt;body&gt;
&lt;div id="feedback"&gt;
&lt;img alt="004993 (8K)" src="../Images/004993.jpg" height="171" width="266" usemap="#coins"&gt;
&lt;div id="title2"&gt;&lt;a href="#" class="title2"&gt;How to buy&lt;/a&gt;&lt;/div&gt;
&lt;div id="comtext"&gt;There are many different ways to buy our products&lt;/div&gt;
&lt;div id="quotetext"&gt;Click &lt;a href="#"&gt;here&lt;/a&gt; to find the nearest authorized retailer near you&lt;/div&gt;
&lt;/div&gt;
&lt;map name="coins"&gt;
&lt;area shape="circle" coords="200,90,40" href="www.coins.com" alt=""&gt;
&lt;/map&gt;
&lt;/body&gt;
&lt;/html&gt;
Copy linkTweet thisAlerts:
@JoeADauthorNov 18.2005 — Thank you. That has helped me enormously to understand positioning in css. You can see the results here: www.paxton-access.co.uk
Copy linkTweet thisAlerts:
@FangNov 18.2005 — Looks good, shame about the [URL=http://validator.w3.org/check?verbose=1&uri=http%3A//www.paxton-access.co.uk/]validation[/URL]
×

Success!

Help @JoeAD spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 6.2,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,
)...