menu item button click then do imageswap in different location on webpage

Question

I am trying to do something that seems relatively simple, I think. I have a webpage that uses a CSS defined menu item list. When I click on one of the menu items, I'd like to change content in the middle of the page (in it's own div container). If another menu item is clicked, I'd like the content to again change. The content area in the middle of the page is in it's own div, so I think I'm just looking for code that would, on a button click, replace one item with another. I've looked at replaceWith from JQuery, but can't seem to see how that function would work in this situation. That is, from what I've read, it doesn't include a condition for when the menu item is clicked. I've also read through CSS styles and z-indexes, but can't seem to find what would work.

So, my question is, how can I change the content (a .gif in this situation) in it's own div container to another .gif when a menu button item is clicked?

Here's my code for that portion:

<div id="nav_container">
   <ul id="nav">
     <li class="first active"><a href="/" class="index.ph">Home</a></li>
     <li><a href="JPLCSubpages/aboutcoaching/about.html" class="about-coaching">About</a>
       <ul class="about-coaching">
     <li><div class="wicoaching"><a href="index.php" style="border-top:0px">What is Coaching?</a> 
      </div></li>
     <li><div class="wdinacoach"><a href="why-do-i-need-a-coach.php">Why Do I Need a Coach?</a></li>
     <li><div class="coachingtherapy"><a href="isnt-coaching-just-therapy.php">Isn't Coaching Just Therapy?</a></li>
     <li><div class="myphilosophy"><a href="my-coaching-philosophy.php">My Coaching Philosophy</a>
        </li>
      </ul>
    </li>

<li><a href="../coachingservices/services.html" class="services">Services</a>
 <ul class="services">
  <li><a href="../coachingservices/life-coaching.php" style="border-top:0px">Life Coaching</a></li>
  <li><a href="../coachingservices/professional-executive-coaching.php">Professional & Executive Coaching</a></li>
  <li><a href="../coachingservices/group-team-coaching.php">Group & Team Coaching</a>  
  </li>
  <li><a href="../coachingservices/sports-performance-coaching.php">Sports Performance Coaching</a></li>
    </ul>
</li>

      <li><a href="../coachingseminars/seminars.html" class="seminars">Seminars</a></li>
      <li><a href="../coachingcontact/contact.html" class="contact">Contact</a></li>
    </ul>

<div id="content_home">

<div style="text-align: left;" class="textbox"><img width="722" height="518" src="../../Images/AboutCoaching Images/AboutMe.gif" alt="" /></div>

So, for instance, if someone clicks on "What is Coaching?" menu item, I'd like the image in "textbox" to change. In one case, I'd like for the image "Aboutme.gif" to some other image. How can I accomplish this? I'm open to using Javascript, JQuery, or CSS.

Thanks in advance for your help.

Answer 1

This is a farily simple task it might be a duplicate and the solution is found easily on the internet ,but please read through my answer and let me know if you need further instructions.

Using javascript events and functions:

 <li>
   <div class="wicoaching">
   <a href="index.php" style="border-top:0px" onclick="ChangeImage();">
   What is Coaching?</a> 
   </div>
 </li>

This means that whenever someone clicks on 'What is coaching?' a function called ChangeImage will be executed.

Now you need to declare the function.

<script>
 function ChangeImage{  
       var thePic = document.getElementById('MyImage');
       // Note you need to add a name or image to your img tag.
       thePic.src = "SomeOtherImage.gif"; 
             }
</script>

If you instead want to remove the image and add another one:

var imageToBeRemoved = document.getElementById('MyImage');
var Parent = imageToBeRemoved.parentNode;
Parent.removeChild(imageToBeRemoved);

Now it's gone from your DOM. It would go inside your ChangeImage function, instead of changing the image source.

If you want to add another one with a different Source :

var newImage = document.createElement("img");
NewImage.src = 'MyNewImage.jpg';
Parent.appendChild("newImage"); // alternatively, you can reference to parent by its ID or Name using getElementById or a similar method.