onmouseover vs onmousemove to display info
I've got a minor issue with a legacy app. It displays a graph and when you move the mouse over a point on the graph, it displays some info in a tooltip as well as on the status bar at the bottom of the browser (it's an IE-only app). But it doesn't always display the info; sometimes you have to move the mouse off the point and back on again to get it to display. Back when the app was written, the developers used onmousemove to display the info, instead of onmouseover. Not really sure why so I changed it to onmouseover to see if it makes a difference and it seems to work more reliably, except that now the info doesn't show up on the status bar. Instead, the href info displays (the points on the graph are clickable to drill-down on that point).
Here is some simple sample HTML that displays the problem:
<html>
<script language="JavaScript">
function display(txt) {
window.event.srcElement.title = txt;
window.status = txt;
}
function reset() {
window.status = window.defaultStatus;
}
</script>
<body>
<a href="#" onclick="alert('do something');" onmouseover="display('Displaying mouseover!');" onmouseout="reset();">This is mouseover text.</a>
<br/><br/>
<a href="#" onclick="alert('do something else');" onmousemove="display('Displaying mousemove!');" onmo开发者_如何学JAVAuseout="reset();">This is mousemove text.</a>
</body>
</html>
Is there a way to make the onmouseover event actually display the info on the status bar instead of showing the href info? When using onmousemove, the status bar very briefly shows the href info and then changes to the specified text. Is this just an issue with the order that the two events work?
If the <a> (anchor) in your app has no (real) href, you can replace it with any other html element. (<span> for example); the anchor isn't adding anything (from behavior perceptive), except default styling.
When replacing the anchor with another element some additional styling is maybe needed. For styling I added the class 'link'
<span class="link" onclick="alert('do something');" onmouseover="display('Displaying mouseover!');" onmouseout="reset();">This is mouseover text.</span>
css:
span.link
{
color:blue;
text-decoration:underline;
}
I know this won't fix the problem with onmouseover + <a> but it gives
you the guarantee that the 'href' is never shown in the statusbar and the JavaScript functions will work.
That looks correct as far as I can tell. One thing you may want to check into is that modern browsers have disabled the ability to change status messages. This is done for various reasons - the primary one being security. If you mouse over a link, you should see where the link goes - not some hidden text that prevents you from knowing where you're heading next. You can change the settings on the browser to ensure that you see status messages.
In Internet Explorer:
Go to Tools > Internet Options
- Click the Security tab
- Ensure that the Internet option is selected/highlighted
- Click Custom Level... (this launches the security settings for the Internet zone)
- Scroll down until you see Allow status bar updates via script (under the Scripting option). Click Enable
- Click OK to save this screen
- Click OK again
Of course, you could always go another route and just make the tooltip show the coordinates rather than the status bar. Have you tried that? That's just basic HTML (using the alt attribute).
In my opinion the problem is that you are trying to make the legacy app remain a legacy app.
window.status: Sets the text in the status bar at the bottom of the browser or returns the previously set text.
But its obslete now.
For example if you wanna make it work in Firefox, you have to follow this.
To allow scripts change the the status bar text, the user must set the dom.disable_window_status_change preference to false in the about:config screen.
加载中,请稍侯......
精彩评论