/    Sign up×
Community /Pin to ProfileBookmark

Image Map Rollover….How???

Copy linkTweet thisAlerts:
Dec 06.2003

Could someone please tell me how to do a image map rollover? I know how to do a image map…and I tryed to add a rollover and it did not work…thanks for any help!!?

to post a comment
JavaScript

13 Comments(s) ↴

Copy linkTweet thisAlerts:
@Khalid_AliDec 06.2003 — u need to to add onmouseover and out events to your mapped image maps..

Post the code for a better answer or a link to where you have implemented this code
Copy linkTweet thisAlerts:
@AnacondaAndyauthorDec 06.2003 — Here is the code....It supposed to be a image map with a rollover...and I don't know what the erorr is...thanks for any help!!


[code=php]
<IMG SRC="menu.gif" HEIGHT=183 WIDTH=247

ALT="imagemap" usemap="#map" border="0">

<map name="map">


<area shape="rect" coords="6,6,120,45"
href="home.html"
onMouseOver="src='home3_lit.gif'"
onMouseOut="src='menu.gif'"
alt="Home">


</map>
[/code]


thanks!?
Copy linkTweet thisAlerts:
@demoDec 07.2003 — try:
[code=php]
<IMG SRC="menu.gif" HEIGHT=183 WIDTH=247

ALT="imagemap" usemap="#map" border="0">

<map name="map">


<area shape="rect" coords="6,6,120,45"
href="home.html"
onMouseOver="[B]this.[/B]src='home3_lit.gif'"
onMouseOut="[B]this.[/B]src='menu.gif'"
alt="Home">


</map>[/code]

demo
Copy linkTweet thisAlerts:
@AnacondaAndyauthorDec 08.2003 — Thanks for your help....but it still won't work...any

suggestions? I attached the file....it is only about

10 lines long....BTW...this is the first time I have

ever done a rollover. Well thanks again....?

[upl-file uuid=c6df5a0a-1bd8-4a33-87c6-c832f6715745 size=417B]imagemaprollover.txt[/upl-file]
Copy linkTweet thisAlerts:
@little_jimDec 09.2003 — It's simple, you are saying 'this.src=' in your code, but when you say that it thinks you mean the area because thats the tag you are saying it in. Try this..

<IMG ID="aab" SRC="menu.gif" HEIGHT=183 WIDTH=247


ALT="imagemap" usemap="#map" border="0">

<map name="map">


<area shape="rect" coords="6,6,120,45"
href="home.html"
onMouseOver="document.getElementById('aab').src ='home3_lit.gif'"

onMouseOut="document.getElementById('aab').src = 'menu.gif'"

alt="Home">


</map>
Copy linkTweet thisAlerts:
@AnacondaAndyauthorDec 19.2003 — Thanks....but I got a question??? Do I have to put any JavaScript in the code to make the rollovers work? Could somebody post some code with a simple working rollover for me? That would be real helpful....thanks!

P.S. Sorry it took so long to respond...I had to wipe off my computers hard drive and I lost everything, and it took me a while to set everything back up!?
Copy linkTweet thisAlerts:
@PittimannDec 19.2003 — Hi!

The example posted by little jim works! So what's the problem? Are you using a 4.x browser???

Cheers - Pit
Copy linkTweet thisAlerts:
@AnacondaAndyauthorDec 19.2003 — No Pit I'm using the Internet Explorer 6.0.26. Thanks again all.
Copy linkTweet thisAlerts:
@PittimannDec 19.2003 — Hi!

Please make sure that your images are situated in the same folder like the file containing the map and that the filenames are correct...

Cheers - Pit
Copy linkTweet thisAlerts:
@AnacondaAndyauthorDec 19.2003 — My images are in the same folder...and they show up...they just don't do the rollover thingy...
Copy linkTweet thisAlerts:
@PittimannDec 19.2003 — Hi!

Have a try with that:
[code=php]
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Untitled</title>
</head>
<body>
<IMG name="aab" SRC="menu.gif" HEIGHT=183 WIDTH=247
ALT="imagemap" usemap="#map" border="0">
<map name="map">
<area shape="rect" coords="6,6,120,45" href="home.html" onMouseOver="document.aab.src ='home3_lit.gif'" onMouseOut="document.aab.src = 'menu.gif'" alt="Home">
</map>
</body>
</html>
[/code]
Cheers - Pit
Copy linkTweet thisAlerts:
@AnacondaAndyauthorDec 19.2003 — Thanks Pit....I'll try it as soon as I make some images for it...I lost all my images when my comp crashed.
×

Success!

Help @AnacondaAndy 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.18,
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,
)...