Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 323
  • Last Modified:

Can't get a div onMouseover to change the innerHTML and keep it there

I have a simple but frustrating question regarding why I can't change the innerHTML of a div onMouseover and keep the contents there. The code attached will allow me to mouse over the div and will change the innerHTML to the image, but If I touch that image with the mouse, it executes as a onMouseout, because I assume it is not touching the div anymore. Any thoughts?

<script language="JavaScript" type="text/javascript">
function proof_image(action)
{
	if(action == 'on')
	{
	document.getElementById("image_holder").innerHTML = '<img src="../../images/proof_label.png">';
	}
	else
	{
	document.getElementById("image_holder").innerHTML = "&nbsp;";
	}
 
}
</script>
 
<div id="image_holder" onMouseOver="proof_image('on');" onMouseOut="proof_image('off');" style="background-image:url(thumbnails/thumb1.jpg); height:500px; width:500px; vertical-align:middle;">&nbsp;</div>

Open in new window

0
tech1984
Asked:
tech1984
  • 4
  • 3
1 Solution
 
HonorGodCommented:
Have you considered updating the onmouseover and onmouseout event handlers on the div during the onmouseover function?
0
 
tech1984Author Commented:
No, how do you do that?
0
 
HonorGodCommented:
What browser(s)?
0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
tech1984Author Commented:
Well I need it to work in IE and Firefox.. I don't care about any others
0
 
HonorGodCommented:
The challenge is:

How exactly, we we want it to work?

Let's use the following diagram to represent the section of the browser associated by the DIV.

How are we supposed to differentiate a mouse movement from DIV "area" to the "image" area from one over the DIV area to away from the DIV area?

+------------------------------+
|                              |
|  +------------------------+  |
|  |                        |  |
|  |  Your Image Goes Here  |  |
|  |                        |  |
|  +------------------------+  |
|                              |
+------------------------------+

Open in new window

0
 
tech1984Author Commented:
That is my question.. I thought making it a background image would work best, but I am using the background image for the actual image that I want display the mouseover image over..... if that makes sense.

0
 
HonorGodCommented:
This is going to take some thinking, and playing...
0
 
KelevraCommented:
Hi,
that's easy.

With the help of JQuery, there is a fonction called .toggle().
 The toggle method takes two arguments, both of wich are functions.
The first click on the element cause the first function to execute. The second click triggers the second function.( Of course it could be as easily done with a hover. With the  .hover method.)
the two function continue to alternate every other click thereafter.

Of course you might also want to take a look at the F.A.Q or the basic help and tutrials from the JQUERY web site.
Toggle:
http://docs.jquery.com/Effects/toggle
Hover:
http://docs.jquery.com/Events/hover

You, then just have to adapt your css class, with the images you wish!


Hope this'll help!
/*With JQuery Syntaxe:*/
 
$(document).ready(function(){
  $('#anIdHere h#').toggle function(){
    $('#anIdHere .button').addClass('hidden');
}, function () {
    $('#anIdHere .button').removeClass('hidden');
      });
});

Open in new window

0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

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