• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 349
  • 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
 
HonorGodSoftware EngineerCommented:
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
 
HonorGodSoftware EngineerCommented:
What browser(s)?
0
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.

 
tech1984Author Commented:
Well I need it to work in IE and Firefox.. I don't care about any others
0
 
HonorGodSoftware EngineerCommented:
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
 
HonorGodSoftware EngineerCommented:
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
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

Cloud Class® Course: Microsoft Exchange Server

The MCTS: Microsoft Exchange Server 2010 certification validates your skills in supporting the maintenance and administration of the Exchange servers in an enterprise environment. Learn everything you need to know with this course.

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