I have this:
<div id="click"><a href="link.html"><img src="img/image.png" alt="something"></a>
<a
onmouseover="ReverseContentDisplay('cont'); return true;"
href="javascript:ReverseContentDisplay('cont')">
info
</a>
</div>
<div id="cont"></div>
Right now, when I mouseover the bit of text that says 'info', <div id="cont"></div>
appears. However, I now need to change the markup so that the anchor tag has a link (instead of a javascript function) as we开发者_开发问答ll as showing the cont
div when the mouseover occurs.
Here is an example of what you may want to do. It provides unobtrusive Javascript by removing your JS from your HTML. The HTML is:
<div id="click"><a href="link.html"><img src="img/image.png" alt="something"></a>
<!-- the href attribute below should have whatever link you want -->
<a id="showCont" href="http://www.google.com">info</a>
</div>
<div id="cont">Cont</div>
The javascript would be in a separate file that is referenced from a <script>
tag and is:
window.onload = init; // call init on load
function init() {
document.getElementById("showCont").onmouseover = function() { ReverseContentDisplay("cont") }; // set up the onmouseover handler
}
function ReverseContentDisplay(id) {
var elem = document.getElementById(id);
if(elem.style.display === "block") {
elem.style.display = "none";
} else {
elem.style.display = "block";
}
}
The CSS would also be in a separate file and is the following to hide the cont div:
#cont {
display:none;
}
I am not sure I understand what the question is, but if you want to keep the hover and still have a working link, just put the URL in the href
attribute.
Other tips:
1. What you are doing is not semantic. Look to separate markup from behavior or style. You should add an event listener for click on the link in JavaScript.
2. Keep progressive enhancement in mind, not everyone has JavaScript turned on.
3. Why are you returning true in onmouseover
? If it has a purpose (though I don't see it) ou should just return true in the function.
精彩评论