ansaurus

Question

How can accomplish a dual div swap on rollover?

Answer 1

A:

It sounds like you pretty much have it figured out. Using jQuery, bind a function to each link in div B, fired by a mouseover event. That function will contain the logic to set the contents of divs A and C according to which link in div B fired the mouseover.

Are you unclear about how to actually set the contents of divs A and C?

Matt Ball 2009-09-23 16:22:46

Yes, I'm afraid I am unclear on how to do that... I have only used basic jQuery plugins in the past. Can you point me to any examples/tutorials on how to do this with jQuery that might help? Thank you!

2009-09-23 16:27:35

Well, it really depends on exactly what about the div's content you're trying to change. But, as Seth used in his example code, you can completely specify the contents of each div with jQuery by setting the innerHtml: http://docs.jquery.com/Manipulation (under the "changing contents" heading. Seth's answer uses basic DOM methods - I strongly recommend doing it entirely with jQuery.

Matt Ball 2009-09-23 16:39:30

Answer 2

A:

You can change a div's contents with something like this:

<script type="text/javascript">
    function over() {
        var a = document.getElementById('a');
        var c = document.getElementById('c');

        a.style.backgroundImage = "url(/path/to/image)";
        c.innerHTML = "<b>Dogs rock</b>";
    }
</script>

<div id="a"></div>
<div id="b" onmouseover="over();"></div>
<div id="c"></div>

Then all you need to do is add whatever other div's you want and write code to change them appropriately. Set the initial state of A and C using css, or just call the over() function on page load.

Seth 2009-09-23 16:24:19

Answer 3

+2 A:

Assuming the href points to one resource that contains the content for both, but you can't just inject the entire output of the link into one element, something like this could work:

$('#divB a').mouseover(function() {

    //get images from link, inject into divA
    $('#divA').html('<strong>Loading...</strong>')
              .load($(this).attr('href') + ' img');

    //get divs from link, inject into divC
    $('#divC').html('<strong>Loading...</strong>')
              .load($(this).attr('href') + ' div'); 
});

karim79 2009-09-23 16:28:19

Answer 4

+1 A:

Hmm... this should be pretty simple with jQuery (compared to some of the other answers here):

If you're unfamiliar with jQuery, the $() is a shortcut for calling jQuery(), and using

 $(document).ready(function() {
  // put all your jQuery goodness in here.
 });

is a way to make sure jQuery fires at the right time. Read more about that here: http://j.mp/TxePc

So first, add a class (ie .dogs) to each <a> element in your #divB list. Next, give each of the corresponding images the same class, and contain each of your text blocks in #divC in divs with the same class as well. The HTML would look something like this:

<div id="divA">
   <img src="dogs.jpg" class="dogs" />
   <img src="flowers.jpg" class="flowers" />
   <img src="cars.jpg" class="cars" />
</div>
<div id="divB">
   <ul>
      <li><a href="dogs.html" class="dogs">Dogs</a></li>
      <li><a href="flowers.html" class="flowers">Flowers</a></li>
      <li><a href="cars.html" class="cars">Cars</a></li>
   </ul
</div>
<div id="divC">
   <div class="dogs"><p>Text about dogs.</p></div>
   <div class="flowers"><p>Text about flowers.</p></div>
   <div class="cars"><p>Text about cars.</p></div>
</div>

Then use the following jQuery, putting this up in the <head> section of your HTML doc:

 $(document).ready(function() {
     $('a.dogs').hover(function() {
        $('#divA img').hide("fast");
        $('#divA img.dogs').show("fast");
        $('#divC div').hide("fast");
        $('div.dogs').show("fast");
     });
 });

We say when the document is ready, when you hover over the <a> element with the .dogs class, perform a function. That function will hide all of the images in #divA and immediately show the image with the .dogs class. Then it will hide all of the divs in the #divC and immediately show the div with the .dogs class.

You can do the same thing twice more for .flowers and .cars, or however many you have.

Keep in mind, there are more efficient ways of doing this too, if you're interested in looking deeper into jQuery, but this will be a solid way to get started in helping you understand exactly what jQuery is doing. And it keeps the script OUT of the HTML body, too!

Jason Rhodes 2009-09-23 17:46:54

Oh and don't forget to enclose the above jQuery in <script></script> tags.

Jason Rhodes 2009-09-23 17:48:30

Thanks, this seems pretty clear! I'm definitely a jQuery newbie, so I'm going to give this a try as it makes sense to me. Once I get the basics down I'll look into more efficient ways of doing this... Thanks again to everybody!

2009-09-23 18:26:18

Good luck -- hope it works.

Jason Rhodes 2009-09-23 22:45:33

ansaurus

tags:

views:

answers:

How can accomplish a dual div swap on rollover?

related questions