ansaurus

Question

Mouseover changes text inside separate DIV

Answer 1

+2 A:

It takes a simple javascript to do this

<HTML>
 <HEAD>
  <SCRIPT LANGUAGE="JavaScript">
    function changeContent()
    {
        document.getElementById("myDiv").innerHTML='New Content';
    }
  </SCRIPT>
 </HEAD>

 <BODY>
  <div id="myDiv">
    Old Content
  </div>
  <a href="#" onmouseover="changeContent()">Change Div Content</a>
 </BODY>
</HTML>

Gaurav Saxena 2010-10-13 04:10:31

How would I handle multiple mouseovers for the same content DIV?

Erik 2010-10-13 04:16:59

I am not sure what you mean by multiple mouseovers. In case, you mean reverting back to old text when mouse moves out, it has been dealt with in lower answers better. It is better to use jquery or any other javascript framework so that you do not have to deal with browser quirks

Gaurav Saxena 2010-10-13 17:56:40

Answer 2

A:

You could use a Javascript library like JQuery for example:

$('#youranchorid').mouseover(function() {
  $('#yourdivid').html("Your new text");
});

check the API

mklfarha 2010-10-13 04:19:52

How would you make it fall back to the original text?

Erik 2010-10-13 04:26:30

using the function .mouseleave() it has the same structure as .mousover(), you can also use .mousenter() instead of .mouseover()

mklfarha 2010-10-13 04:35:48

Answer 3

A:

Here an small example with jquery:

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
    {
    $(".pass").hover(
      function () {
         $(".change").text("MOUSE HOVER");
        },
        function () {
         $(".change").text("DIV TO CHANGE");
        }
        );
    });
</script>
</head>
<body>
<div class="pass">PASS YOUR MOUSE OVER HERE</div>
<div class="change">DIV TO CHANGE</div>
</body>
</html>

Thiago Diniz 2010-10-13 04:28:22

How would you add multiple mouseovers with different corresponding texts?

Erik 2010-10-13 04:41:49

what you mean about multiple mouseovers?! you can see in the docs the function hover receives 2 callbacks, the first is when the mouser enter the second when the mouse leaves, so in first callback you can do whatever you want! take a look in the docs(http://api.jquery.com/hover/)

Thiago Diniz 2010-10-13 12:17:00

ansaurus

tags:

views:

answers:

Mouseover changes text inside separate DIV

related questions