/    Sign up×
Community /Pin to ProfileBookmark

Create a hotspot on a background image?

Hi,

I have been trying to create a hotspot on a background in Dremaweaver but it seems its not working.

Any ideas?

Thanks,
Jimmy

to post a comment
HTML

3 Comments(s)

Copy linkTweet thisAlerts:
@cootheadFeb 19.2009 — Hi there jimo474,

here is a basic example...
[color=navy]
<!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=iso-8859-1">
<meta http-equiv="Content-Style-Type" content="text/css">

<title></title>

<style type="text/css">
body {
background-color:#333;
}
#box {
width:296px;
height:68px;
background-image:url(http://www.coothead.co.uk/images/map.jpg);
margin:40px auto;
padding:144px 0 0 40px;
list-style-type:none;
}
#box li {
float:left;
width:39px;
height:27px;
padding-right:33px;
}
#box li span {
display:none;
}
#box li a {
width:100%;
height:100%;
border:1px solid #000;
display:block;
}
</style>

</head>
<body>

<ul id="box">
<li><a href="http://www.google.com" title="google"><span>google</span></a></li>
<li><a href="http://www.webdeveloper.com/"title="webdeveloper"><span>webdeveloper</span></a></li>
<li><a href="http://validator.w3.org/" title="validator"><span>validator</span></a></li>
<li><a href="http://www.quirksmode.org/" title="quirksmode"><span>quirksmode</span></a></li>
</ul>

</body>
</html>
[/color]

[i]coothead[/i]
Copy linkTweet thisAlerts:
@jimo474authorFeb 19.2009 — thanks a lot. I'll experiment with it and post my results.

Jimmy
Copy linkTweet thisAlerts:
@donatelloFeb 19.2009 — How about just posting a clear image over it the same size?

Make a clear gif and save it as 1 pixel by 1 pixel.

Then put it over the background image and resize it in the browser like this:

[code=html]
<a href="http://www.somelink.com"><img src="images/clearpixel.gif" width="200" height="200" border="0" /></a>
[/code]
×

Success!

Help @jimo474 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 5.19,
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: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

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

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...