title: How to add both mouseover and click event at same time?
body: <p>I have two different example one have mouseover functionality and other have click event functionality but now i want both together below are the description:</p>
  
  <p><strong>Mouseover Example Link:</strong> <a href="http://wheaton.advisorproducts.com/investment-advisory" rel="nofollow">http://wheaton.advisorproducts.com/investment-advisory</a></p>
  
  <p><strong>Mouse click Example :</strong> <a href="http://ivyfa.advisorproducts.com/financial-planning-process" rel="nofollow">http://ivyfa.advisorproducts.com/financial-planning-process</a></p>
  
  <p><strong>Requirement are like this</strong> </p>
  
  <p>In this example ( <a href="http://ivyfa.advisorproducts.com/financial-planning-process" rel="nofollow">http://ivyfa.advisorproducts.com/financial-planning-process</a> ) right now mouseover functionality is working but now i want below functionality:</p>
  
  <ol>
  <li>When user move mouse over the images then in center thier related text will be visible both for funnel and below circle example.</li>
  <li>If user click on any of the image section then their related text will be visible everytime untill user click on another image or portion.</li>
  <li>Along with this click event when user mousehover on diif-2 images section then also thier related text will be visible , when user move mouse out of the circle then the selcted text will be shown.</li>
  </ol>
  
  <p><strong>In the end i want to merge both the examples</strong></p>
  
  <p>Its very complicated to explain this example sorry for that :(</p>
  
  <p><strong>Below is the js code used for mouseover functionality:</strong></p>
  
  <pre><code>/*-----Only for hove over image -show hide text------*/
  var IdAry=['slide1','slide2','slide3','slide4'];
  window.onload=function() {
   for (var zxc0=0;zxc0&lt;IdAry.length;zxc0++){
    var el=document.getElementById(IdAry[zxc0]);
    if (el){
     el.onmouseover=function() {
       changeText(this,'hide','show')
      }
     el.onmouseout=function() {
       changeText(this,'show','hide');
      }
    }
   }
  }
  function changeText(obj,cl1,cl2) {
     obj.getElementsByTagName('SPAN')[0].className=cl1;
     obj.getElementsByTagName('SPAN')[1].className=cl2;
  }
  </code></pre>
  
  <p><strong>Below is the js code used for click event functionality:</strong></p>
  
  <pre><code>/*----------Text change on click - Our Process page---------------*/
  var prev;
  var IdAry = ['slide1', 'slide2', 'slide3', 'slide4'];
  window.onload = function () {
      for (var zxc0 = 0; zxc0 &lt; IdAry.length; zxc0++) {
          var el = document.getElementById(IdAry[zxc0]);
          if (el) {
              setUpHandler(el);
              el.onmouseover = function () {
                  changeText(this,'hide','show')
              }
              el.onmouseout = function () {
                  changeText(this,'show','hide');
              }
          }
      }
  }
  
  
  /*---------This is used to add selected class on clicked id only and remove class selected from rest---------*/
  
  function setUpHandler(el) {
  $("#" + IdAry.join(",#")).click(function () {
      $(this).addClass("selected");
      $("#graphics .selected").not(this).removeClass("selected");
  })
  
  /*---------This will add show hide class to thier spans and vise versa-------*/
  
  $("#" + IdAry.join(",#")).click(
  function () {
      changeText(this, "hide", "show");
      clearSelection();
  },
  function () {
      changeText(this, "show", "hide");
      clearSelection();
  })
  }
  
  
  function changeText(obj, cl1, cl2) {
  
      obj.getElementsByTagName('SPAN')[0].className = "hide";
      obj.getElementsByTagName('SPAN')[1].className = "show";
  
      if (prev &amp;&amp; obj !== prev) {
          prev.getElementsByTagName('SPAN')[0].className = "show";
          prev.getElementsByTagName('SPAN')[1].className = "hide";
      }
      prev = obj
  }
  
  
  function clearSelection() {
      if (window.getSelection) window.getSelection().removeAllRanges();
      else if (document.selection) document.selection.empty();
  }
  </code></pre>
  
  <p>Thanks
  Sushil</p>