Home/ Questions/Q 370361
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-12T14:00:37+00:00

I am looking for advice on a way to accomplish this. Given the following:

  • 0

I am looking for advice on a way to accomplish this. Given the following:

[Div A (contains an image)]
[Div B (contains a horizontal list of 8 or so text links)]
[Div C (contains text)]

Upon rolling over any link in Div B, how can I have Div A and Div C swap their respective contents out to something different that corresponds to the content of that link?

For example, if one were to rollover a Div B link called “Dogs”, then upon that rollover, Div A would replace its contents and display an image of a dog and Div C would replace its contents and display text about dogs.

After rolling over that link, the new Div A and Div C contents will remain in place until a new link is rolled over.

I hope this makes sense. Does anyone have advice on the best way to accomplish this?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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.

    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!

    • 0