Javascript code runs on IE11 but not on Safari and Chrome
Question
I have programmed a webpage where you can hover over certain parts of an image an a text field with a link pops up if you do so. This functionality has been implemented in JavaScript.
The pop-up text box shows in IE11 but not in Safari or Chrome (JavaScript enabled, so this is not causing the problem). Anybody knows a fix for this to get this running also on Safari and Chrome?
The relevant code is here:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="../Rules.css" />
</head>
<body>
<p>
By hovering over the below links should pop up in light yellow boxes.
</p>
<p>
<map id="OMMap" name="OMMap">
<area href="../2/CCEP general.htm" shape="rect" coords="0, 0, 1531, 18"/>
<area href="../2/CCEP general.htm" shape="rect" coords="151, 133, 301, 170"/>
<area href="../2/CCEP general.htm" shape="rect" coords="302, 284, 453, 321"/>
<area href="../2/CCEP general.htm" shape="rect" coords="454, 435, 604, 472"/>
<area href="../2/CCEP general.htm" shape="rect" coords="1247, 643, 1398, 680"/>
</map>
<div style="position:relative">
<img onmouseover="ResetAllMenus()" src="OM.gif" usemap="#OMMap"
width="1531px"
height="851px" />
<div style="position:absolute; left:152px; top: 200px">
<span onmouseover="MakeVisible('PD2')"> <b>PD2</b> Preliminary Design </span>
</div>
<div id="PD2" class="OMLinks" style="top:215px; left:166px">
<a href="../3/PD.htm"> PD2 State-Wide</a>
</div>
</div>
</div>
<script>
function MakeVisible(element){
ResetAllMenus()
// Find the element and unhide it.
var element = document.getElementById(element)
element.style.display = "block"
}
function ResetAllMenus() {
// Get an array with div elements.
var links = document.getElementsByTagName("div")
// Search the array for OMLink boxes, and hide them.
for (var j = 0; j<links.length; j++) {
if(links[j].className =='OMLinks') links[j].style.display = "none"
}
}
</script>
</body>
</html>
1 answers
solution1
0 2017-04-05 01:34:00
The issue is that the mouseover event from the link with MakeVisible bubbles to the the mouseover listener for the parent with ResetAllMenus , so the "dialogue" is shown then hidden again.
You need to pass the event to the listener and stop propagation from the link mouseover. It might work in IE because the listeners are called in a different order.
Also, function names starting with a capital letter are, by convention, reserved for constructors, so makeVisible and resetAllMenus is preferred.
Below is your code refactored as an exmaple.
function makeVisible(element, event) { event.stopPropagation(); resetAllMenus(); // Find the element and unhide it. var element = document.getElementById(element); element.style.display = ''; } function resetAllMenus() { // Get an array with div elements. var links = document.getElementsByTagName("div"); // Search the array for OMLink boxes, and hide them. for (var j = 0; j < links.length; j++) { if (links[j].className == 'OMLinks') { links[j].style.display = "none"; } } }
.OMLinks { background-color: yellow; }
<p>By hovering over the below links should pop up in light yellow boxes.</p> <div onmouseover="resetAllMenus()"> <p> reset div </p> <div><span onmouseover="makeVisible('PD2', event)"><b>PD2</b> Preliminary Design </span> </div> <div id="PD2" class="OMLinks"> <a href="../3/PD.htm"> PD2 State-Wide</a> </div> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.