/    Sign up×
Community /Pin to ProfileBookmark

Image rollover with multiple clickable areas

Copy linkTweet thisAlerts:
Mar 31.2010

Hi there,

I have been asked to make a page for a website that wants a series of rollover images and when you roll over a particular image, there are 2 buttons to choose from which take you to another area of the site. I am a bit stuck -I know how to create a simple rollover image…but is there a way to create a rollover image that when you rollover it, yiou can choose from 2 different hyperlinks?(ie. two hotspots I think?) An example of the page is shown below:

Before rollover:

[URL=”http://img145.imageshack.us/img145/2623/image1j.png”]http://img145.imageshack.us/img145/2623/image1j.png[/URL]

After Rollover:

[URL=”http://img214.imageshack.us/img214/7757/image2aw.png”]http://img214.imageshack.us/img214/7757/image2aw.png[/URL]

Thanks for any help! ?

to post a comment
JavaScript

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@FangApr 01.2010 — Do you mean the text and background change?
Copy linkTweet thisAlerts:
@princessbubblesauthorApr 01.2010 — Yes, I know how to do a rollover which allows you to rollover the dark image and it becomes the lighter image with the text but I also want to be able to click the 2 buttons whilst rolling over?
Copy linkTweet thisAlerts:
@FangApr 01.2010 — <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<style type="text/css">
* {margin:0;padding:0;}
html, body {height:100%;}
#panel {width:200px; height:100%; background:#666 url(bgImageDark.jpg);}
#panel h3 {padding-top:200px; color:#fff;}
#panel p {visibility:hidden;}
#panel:hover * {visibility:visible;}
#panel:hover {background:#ddd url(bgImageLight.jpg);}
</style>

</head>
<body>
<div id="panel">
<h3>heading</h3>
<p>Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</p>
<p><a href="index.htm">a link</a>
</p>
</div>
</body>
</html>
Copy linkTweet thisAlerts:
@princessbubblesauthorApr 01.2010 — Thank you so much!! That works perfectly!! ?
×

Success!

Help @princessbubbles 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.17,
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: @nearjob,
tipped: article
amount: 1000 SATS,

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

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