Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Wanet Telecoms Ltd on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

image maps with onmouseover, onmouseout, and onclick 1

Status
Not open for further replies.
jhherring

jhherring

Programmer
Jun 18, 2002
33
US
If this more properly belongs in the HTML forum please let me know and I'll re-post it there.

I have an image map, and I want the various hotspots within it to appear in one state when the mouse is over them, another state when the mouse is not over them, and a third state when they're clicked -- but keeping that third state until another area is clicked.

So, as I see it, the image map should load normally, and each hotspot should have an <AREA> tag defined, with onmouseover and onmouseout states defined as with any normal rollover. But when I add the onclick event handler, the image does change to the onclick state, but does not stay that way -- because of the onmouseout!

How can I get the hotspots to each have this behavior? default (same as onmouseout) = state 1, onmouseover = state 2, and onclick = state 3 and stay that way until another hotspot is clicked?

Thanks for any help you can provide.

John Herring
jhherring@yahoo.com
 
Sort by date Sort by votes
post your existing code, and I can probably help. ======================================

if (!succeed) try++
-jeff
 
Upvote 0 Downvote
OK, take a look at the code at:


If there's a simple way to add onclick to the <AREA> tags, and NOT have its effects undone by the onmouseout, please let me know.

Thanks again.

John Herring
jhherring@yahoo.com
 
Upvote 0 Downvote
John,

not difficult:

1) we can consolidate your rollover() function.
2) create a function to set the currently selected tab onClick.
3) have original() restore the currently selected tab.

Note how the functions rollover() and setCurrent() are called now from your <area> tags...

Code: 
<SCRIPT LANGUAGE=&quot;javascript&quot;>

<!-- hide
var selectedTab = 1;

function setCurrent(imgID) {
	selectedTab = imgID;
	return true;
}

function rollover(imgID) {
	eval(&quot;document.tabs.src = mouseoverimage&quot; + imgID + &quot;.src&quot;);
	return true;
}

function original() {
	eval(&quot;document.tabs.src = mouseoverimage&quot; + selectedTab + &quot;.src&quot;);
	return true;
}

// end hide -->

</SCRIPT>

</head>

<body bgcolor=#ffffff>

<MAP NAME=&quot;imagemap&quot;>
<AREA SHAPE=&quot;poly&quot; ALT=&quot;Record Information&quot; COORDS=&quot;15,11,125,11,141,27,1,27&quot; HREF=&quot;body-frame.html#record&quot; onMouseOver=&quot;rollover(1)&quot; onMouseOut=&quot;original()&quot; onClick=&quot;setCurrent(1);&quot; target=&quot;body-frame&quot;>
<AREA SHAPE=&quot;poly&quot; ALT=&quot;Applicant&quot; COORDS=&quot;144,11,254,11,270,27,130,27&quot; HREF=&quot;body-frame.html#applicant&quot; onMouseOver=&quot;rollover(2)&quot; onMouseOut=&quot;original()&quot; onClick=&quot;setCurrent(2);&quot; target=&quot;body-frame&quot;>
<AREA SHAPE=&quot;poly&quot; ALT=&quot;Spouse&quot; COORDS=&quot;272,11,382,11,398,27,258,27&quot; HREF=&quot;body-frame.html#spouse&quot; onMouseOver=&quot;rollover(3)&quot; onMouseOut=&quot;original()&quot; onClick=&quot;setCurrent(3);&quot; target=&quot;body-frame&quot;>
<AREA SHAPE=&quot;poly&quot; ALT=&quot;Current Address&quot; COORDS=&quot;399,11,509,11,525,27,385,27&quot; HREF=&quot;body-frame.html#current-address&quot; onMouseOver=&quot;rollover(4)&quot; onMouseOut=&quot;original()&quot; onClick=&quot;setCurrent(4);&quot; target=&quot;body-frame&quot;>
<AREA SHAPE=&quot;poly&quot; ALT=&quot;Previous Address&quot; COORDS=&quot;529,11,639,11,655,27,515,27&quot; HREF=&quot;body-frame.html#previous-address&quot; onMouseOver=&quot;rollover(5)&quot; onMouseOut=&quot;original()&quot; onClick=&quot;setCurrent(5);&quot; target=&quot;body-frame&quot;>
</MAP>


================================================================================ ======================================

if (!succeed) try++
-jeff
 
Upvote 0 Downvote
Amazing! Wonderful! The Perfect Answer!

(1) Economical! Consolidating the rollovers was a nice touch, especially since I'm (obviously) weak on passing variables in general.

(2) Elegant! I can't imagine a more compact and more efficient way to do this. Heck, I can even understand it! (At least a little.)

John Herring
Grateful Newbie
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

rogerte
  • Locked
  • Question
Code that works on Windows, Android and Iphone
Replies
0
Views
765
rogerte
rogerte
Ahmad khalafalla
  • Locked
  • Question
How to listen to 'onclick' event on the document
Replies
1
Views
326
feherke
feherke
AbidingDude
  • Locked
  • Question
replaceChild() and Keeping Relationships
Replies
1
Views
865
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question
Field with numbers and characters get nan
Replies
1
Views
404
ggriffit
ggriffit
waubain
  • Locked
  • Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined 1
Replies
2
Views
595
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top