By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
440,454 Members | 1,803 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 440,454 IT Pros & Developers. It's quick & easy.

how to force browser focus to area map?

P: n/a
The enclosed html snippet displays an area map. The behavior I want
is for each area to show up (eg show the outline of the poly) when the
user mouses over it. This happens nicely BUT in order for this to
occur, the user must hit the tab key to set the focus into the image
(or the map -- I am not sure which at this point).
In any case, I need a way to automatically force the browser focus
into the image (or map) -- because end-users do not understand about
using the tab key to move browser focus when there is no obvious form
in front of them.
So far I have tried several different permutations using focus() and
setActive() and had no success.

And lastly, yes, an IE-specific solution is just-fine-thank-you.
Thanks in advance for your help

---------------------------code begins-------------------------
<html>
<body>
<img src="combo1.png"
onMouseOver="document.getElementById('mymap').setA ctive()"
usemap="#mymap"/>
<map name="mymap" id="mymap">
<area alt="1" title="1" shape="poly" coords="60,15,90,15,90,35,60,35"
tabindex="1"
onMouseOver="this.focus();"
onMouseOut="this.blur();"
href="#" target="_self" />
<area id="area1" alt="2" title="2" shape="poly" tabindex="2"
coords="90,120,110,120,110,140,90,140" href="#" target="_self"
onMouseOver="this.focus();"
onMouseOut="this.blur();"
onclick="javascript:alert(window.event.srcElement. tagName);window.event.srcElement.focus()"
/>
</map>
</body>
</html>
------------------------------code ends-------------------------
Jul 20 '05 #1
Share this Question
Share on Google+
2 Replies


P: n/a
Well, personally for me in ie 5.5 this code seems to do what you request.
Even without the focus being on the image (just on the area)

What browser are you using? It doesn't seem to work in ns 4.75 though, but
that isn't a suprise really.

Maybe that helps......what is it not doing for you? it's
highlighting/focusing on mouseover the area and dehighlighting/bluring on
mouseout of the area.

Stu

"Charles Eubanks" <ce******@alphablox.com> wrote in message
news:df**************************@posting.google.c om...
The enclosed html snippet displays an area map. The behavior I want
is for each area to show up (eg show the outline of the poly) when the
user mouses over it. This happens nicely BUT in order for this to
occur, the user must hit the tab key to set the focus into the image
(or the map -- I am not sure which at this point).
In any case, I need a way to automatically force the browser focus
into the image (or map) -- because end-users do not understand about
using the tab key to move browser focus when there is no obvious form
in front of them.
So far I have tried several different permutations using focus() and
setActive() and had no success.

And lastly, yes, an IE-specific solution is just-fine-thank-you.
Thanks in advance for your help

---------------------------code begins-------------------------
<html>
<body>
<img src="combo1.png"
onMouseOver="document.getElementById('mymap').setA ctive()"
usemap="#mymap"/>
<map name="mymap" id="mymap">
<area alt="1" title="1" shape="poly" coords="60,15,90,15,90,35,60,35"
tabindex="1"
onMouseOver="this.focus();"
onMouseOut="this.blur();"
href="#" target="_self" />
<area id="area1" alt="2" title="2" shape="poly" tabindex="2"
coords="90,120,110,120,110,140,90,140" href="#" target="_self"
onMouseOver="this.focus();"
onMouseOut="this.blur();"
onclick="javascript:alert(window.event.srcElement. tagName);window.event.srcE
lement.focus()" />
</map>
</body>
</html>
------------------------------code ends-------------------------

Jul 20 '05 #2

P: n/a
I am running IE6. I will try this on 5.5 and/or 5.0 to see if
anything is different. The code I included is simplified since there
are items surrounding the image. But so far even this simple version
does not seem to work unless the I click on the image and then hit the
tab key.
Thanks for your time.

"Stuart Palmer" <tr**********@youcant.com> wrote in message news:<bp***********@sp15at20.hursley.ibm.com>...
Well, personally for me in ie 5.5 this code seems to do what you request.
Even without the focus being on the image (just on the area)

What browser are you using? It doesn't seem to work in ns 4.75 though, but
that isn't a suprise really.

Maybe that helps......what is it not doing for you? it's
highlighting/focusing on mouseover the area and dehighlighting/bluring on
mouseout of the area.

Stu

"Charles Eubanks" <ce******@alphablox.com> wrote in message
news:df**************************@posting.google.c om...
The enclosed html snippet displays an area map. The behavior I want
is for each area to show up (eg show the outline of the poly) when the
user mouses over it. This happens nicely BUT in order for this to
occur, the user must hit the tab key to set the focus into the image
(or the map -- I am not sure which at this point).
In any case, I need a way to automatically force the browser focus
into the image (or map) -- because end-users do not understand about
using the tab key to move browser focus when there is no obvious form
in front of them.
So far I have tried several different permutations using focus() and
setActive() and had no success.

And lastly, yes, an IE-specific solution is just-fine-thank-you.
Thanks in advance for your help

---------------------------code begins-------------------------
<html>
<body>
<img src="combo1.png"
onMouseOver="document.getElementById('mymap').setA ctive()"
usemap="#mymap"/>
<map name="mymap" id="mymap">
<area alt="1" title="1" shape="poly" coords="60,15,90,15,90,35,60,35"
tabindex="1"
onMouseOver="this.focus();"
onMouseOut="this.blur();"
href="#" target="_self" />
<area id="area1" alt="2" title="2" shape="poly" tabindex="2"
coords="90,120,110,120,110,140,90,140" href="#" target="_self"
onMouseOver="this.focus();"
onMouseOut="this.blur();"

onclick="javascript:alert(window.event.srcElement. tagName);window.event.srcE
lement.focus()"
/>
</map>
</body>
</html>
------------------------------code ends-------------------------

Jul 20 '05 #3

This discussion thread is closed

Replies have been disabled for this discussion.