javascript onmouseover/onmouseout stay in previous content until hover / trigger the next one

Question

I am a beginner of javascript. For this project we can not use jQuery here. I like to have rectangular 4 cells at the bottom right function as thumbnails and they will trigger to show different images when hover respectively.

<div id="resistorContent">
            <section id="resistorDetail1" class="1stdetailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
            <section id="resistorDetail2" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
            <section id="resistorDetail3" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
            <section id="resistorDetail4" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>

            <span class="closeButton"><a id="close" onclick="hideContent('resistorContent')">X</a></span>

            <ul>
                <li onmouseover="showDetailContent('resistorDetail1')" onmouseout="hideDetailContent('resistorDetail1')"></li>
                <li onmouseover="showDetailContent('resistorDetail2')" onmouseout="hideDetailContent('resistorDetail2')"></li>
                <li onmouseover="showDetailContent('resistorDetail3')" onmouseout="hideDetailContent('resistorDetail3')"></li>
                <li onmouseover="showDetailContent('resistorDetail4')" onmouseout="hideDetailContent('resistorDetail4')"></li>
            </ul>
        </div>
</section>


<script type="text/javascript">
        function showDetailContent(target) {
            document.getElementById(target).style.display = "block";
        }

        function hideDetailContent(target){
            document.getElementById(target).style.display = "none";
        }
    </script>

I like to make some improvement because these cells are now rely on onmouseout that turn off the linked <section> so it can reload the next <section>. If I move the mouse away from cells it will show a blank page.

How do I write the javascript to make it stays at the current <section> and only load the other <section> when hover on the other cells?

Thank you in advance

http://jsfiddle.net/63L72trx/10/

Answer 1

Let's break down what you want to do to a simple sentence:

"When I show another item, I want to hide other items that may or may not be shown."

So, let's remove the onmouseout that hides the elements and force a "reset" state that ensures all items are hidden whenever we show an item from our onmouseover.

<div id="resistorContent">
  <section id="resistorDetail1" class="1stdetailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic1.jpg" alt=""></section>
  <section id="resistorDetail2" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic2.jpg" alt=""></section>
  <section id="resistorDetail3" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic3.jpg" alt=""></section>
  <section id="resistorDetail4" class="detailContent"><img src="http://d3d71ba2asa5oz.cloudfront.net/40000483/images/pic4.jpg" alt=""></section>
  <span class="closeButton"><a id="close" onclick="hideContent('resistorContent')">X</a></span>
    <ul>
      <li onmouseover="showDetailContent('resistorDetail1')"></li>
      <li onmouseover="showDetailContent('resistorDetail2')"></li>
      <li onmouseover="showDetailContent('resistorDetail3')"></li>
      <li onmouseover="showDetailContent('resistorDetail4')"></li>
    </ul>
  </div>
</section>

<script type="text/javascript">
  var children = document.querySelectorAll('#resistorContent > section[id]');
  function showDetailContent(target) {
    // Simply loop over our children and ensure they are hidden:
    for (var i = 0, child; child = children[i]; i++) {
      child.style.display = 'none';
    }
    // Now, show our child we want to show
    document.getElementById(target).style.display = 'block';
  }
</script>

Here's a working fiddle: http://jsfiddle.net/rgthree/63L72trx/12/