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 Chriss Miller 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
Joined
Jun 18, 2002
Messages
33
Location
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 Question
Code that works on Windows, Android and Iphone
Replies
0
Views
908
rogerte
rogerte
Ahmad khalafalla
  • Locked
  • Question Question
How to listen to 'onclick' event on the document
Replies
1
Views
472
feherke
feherke
AbidingDude
  • Locked
  • Question Question
replaceChild() and Keeping Relationships
Replies
1
Views
1K
AbidingDude
AbidingDude
edgarv
  • Locked
  • Question Question
Field with numbers and characters get nan
Replies
1
Views
494
ggriffit
ggriffit
waubain
  • Locked
  • Question Question
First image in slide gallery not showing - Uncaught TypeError: slides[(slideIndex - 1)] is undefined
Replies
2
Views
709
waubain
waubain

Part and Inventory Search

Sponsor

Back
Top