• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 194
  • Last Modified:

any way to onmouseover an 'invisible' area?

I have an app with a hidden nav bar that pops up when you mouseover the company logo (an <img> tag) at the top of the page.

I need to add the same nav bar to the bottom of the page, but without any new visible elements in the page.  One reason the nav bar hides/shows is that the page prints to some very specific specs.

Is there a way to delineate an area of whitespace below all the other components (the bottom few pixels of the page) and tie onmouseover to it?

Thanks for any help-
1 Solution
You can place a div anywhere on the page of any dimensions that you can attach an onmouseover to.
Pravin AsarPrincipal Systems EngineerCommented:
You can override the mouseover event for a tag
<script language="javascript">
function reassignMO (idx) {
     var obj = document.getElementById (idx);
     if (!obj) { return; }
     for (ix=0; ix < obj.childNodes; ix++) {
            obj.childNodes[ix].onmouseover = null;

<body onload="reassignMO ('bottom');">
<span id="top">
<img  src="logo.gif" onmouseover="popup();">

<span id="bottom">
<img  src="logo.gif" onmouseover="popup();">
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now