Hello forum:
This has got me stumped, hope someone can help.
I am mapping hot spots to an image. When the mouseover event occurs on one of these hot spots I want to set focus() to that hotspot. Doing this outlines the hotspot, showing it has focus. The focus at the hotspot works and it shows that the spot is focused.
However since the hotspot is within the image <src element, it appears that the focus is bubbling up to the image someway and the image is being repositioned away from the cursor position, to the bottom of the page. The image and mapping code, and JS is within the item's product description and is shown below. The cancel bubble function is included on the image's <src tag.
The cancelBubble function is where I need help to prevent the repositioning of the image.
Thanks, Larry
<center>
<img src="graphics/00000001/DUMPSTATIONWATERSPEC900.jpg" border=0 usemap="#dumpmap" onmouseover="cancelBubble(event)" >
</center>
<map name="dumpmap">
<area id="area1" shape="rect" coords="28,9,170,40" href="http://dev.rvparksupplies.com/p/DOGIPOTBAGS2000/" alt="dump water hose kit part" onmouseover="myFunction(this)">
<area id="area2" shape="rect" coords="89,42,212,80" href="http://dev.rvparksupplies.com/p/DOGIPOTBAGS4000/" alt="dump water hose kit part" onmouseover="myFunction(this)">
<area id="area3" shape="rect" coords="170,184,268,215" href="http://dev.rvparksupplies.com/p/DOGIPOTBAGS6000/" alt="dump water hose kit part" onmouseover="myFunction(this)">
</map>
<script>
function myFunction(obj) {
// reposition focus from elsewhere
aField = document.getElementById(obj.id);
setTimeout("aField.focus()", 0);
// focus on mouseover, blur on mouseout
var areas = document.getElementsByTagName('area')
for (var i=0; i<areas.length; i++) {
areas[i].onmouseover = over;
areas[i].onmouseout = out;
}
}
function over() {
this.focus();
}
function out() {
this.blur();
}
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
// if (evt.cancelBubble!=null)
evt.cancelBubble = true;
}
</script>
This has got me stumped, hope someone can help.
I am mapping hot spots to an image. When the mouseover event occurs on one of these hot spots I want to set focus() to that hotspot. Doing this outlines the hotspot, showing it has focus. The focus at the hotspot works and it shows that the spot is focused.
However since the hotspot is within the image <src element, it appears that the focus is bubbling up to the image someway and the image is being repositioned away from the cursor position, to the bottom of the page. The image and mapping code, and JS is within the item's product description and is shown below. The cancel bubble function is included on the image's <src tag.
The cancelBubble function is where I need help to prevent the repositioning of the image.
Thanks, Larry
<center>
<img src="graphics/00000001/DUMPSTATIONWATERSPEC900.jpg" border=0 usemap="#dumpmap" onmouseover="cancelBubble(event)" >
</center>
<map name="dumpmap">
<area id="area1" shape="rect" coords="28,9,170,40" href="http://dev.rvparksupplies.com/p/DOGIPOTBAGS2000/" alt="dump water hose kit part" onmouseover="myFunction(this)">
<area id="area2" shape="rect" coords="89,42,212,80" href="http://dev.rvparksupplies.com/p/DOGIPOTBAGS4000/" alt="dump water hose kit part" onmouseover="myFunction(this)">
<area id="area3" shape="rect" coords="170,184,268,215" href="http://dev.rvparksupplies.com/p/DOGIPOTBAGS6000/" alt="dump water hose kit part" onmouseover="myFunction(this)">
</map>
<script>
function myFunction(obj) {
// reposition focus from elsewhere
aField = document.getElementById(obj.id);
setTimeout("aField.focus()", 0);
// focus on mouseover, blur on mouseout
var areas = document.getElementsByTagName('area')
for (var i=0; i<areas.length; i++) {
areas[i].onmouseover = over;
areas[i].onmouseout = out;
}
}
function over() {
this.focus();
}
function out() {
this.blur();
}
function cancelBubble(e) {
var evt = e ? e:window.event;
if (evt.stopPropagation) evt.stopPropagation();
// if (evt.cancelBubble!=null)
evt.cancelBubble = true;
}
</script>
Comment