Databases
StackOverflow2013
Postsdbo
POmenu item button click then do imageswap in different location on webpage
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POmenu item button click then do imageswap in different location on webpage
    text
    copied!<p>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.</p> <p>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?</p> <p>Here's my code for that portion:</p> <pre><code>&lt;div id="nav_container"&gt; &lt;ul id="nav"&gt; &lt;li class="first active"&gt;&lt;a href="/" class="index.ph"&gt;Home&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="JPLCSubpages/aboutcoaching/about.html" class="about-coaching"&gt;About&lt;/a&gt; &lt;ul class="about-coaching"&gt; &lt;li&gt;&lt;div class="wicoaching"&gt;&lt;a href="index.php" style="border-top:0px"&gt;What is Coaching?&lt;/a&gt; &lt;/div&gt;&lt;/li&gt; &lt;li&gt;&lt;div class="wdinacoach"&gt;&lt;a href="why-do-i-need-a-coach.php"&gt;Why Do I Need a Coach?&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;div class="coachingtherapy"&gt;&lt;a href="isnt-coaching-just-therapy.php"&gt;Isn't Coaching Just Therapy?&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;div class="myphilosophy"&gt;&lt;a href="my-coaching-philosophy.php"&gt;My Coaching Philosophy&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="../coachingservices/services.html" class="services"&gt;Services&lt;/a&gt; &lt;ul class="services"&gt; &lt;li&gt;&lt;a href="../coachingservices/life-coaching.php" style="border-top:0px"&gt;Life Coaching&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="../coachingservices/professional-executive-coaching.php"&gt;Professional &amp; Executive Coaching&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="../coachingservices/group-team-coaching.php"&gt;Group &amp; Team Coaching&lt;/a&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="../coachingservices/sports-performance-coaching.php"&gt;Sports Performance Coaching&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/li&gt; &lt;li&gt;&lt;a href="../coachingseminars/seminars.html" class="seminars"&gt;Seminars&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a href="../coachingcontact/contact.html" class="contact"&gt;Contact&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; </code></pre> <p></p> <pre><code>&lt;div id="content_home"&gt; &lt;div style="text-align: left;" class="textbox"&gt;&lt;img width="722" height="518" src="../../Images/AboutCoaching Images/AboutMe.gif" alt="" /&gt;&lt;/div&gt; </code></pre> <p>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. </p> <p>Thanks in advance for your help. </p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload