How to add both mouseover and click event at same time?

Question

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:

Mouseover Example Link: http://wheaton.advisorproducts.com/investment-advisory

Mouse click Example : http://ivyfa.advisorproducts.com/financial-planning-process

Requirement are like this

In this example ( http://ivyfa.advisorproducts.com/financial-planning-process ) right now mouseover functionality is working but now i want below functionality:

1. When user move mouse over the images then in center thier related text will be visible both for funnel and below circle example.
2. 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.
3. 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.

In the end i want to merge both the examples

Its very complicated to explain this example sorry for that :(

Below is the js code used for mouseover functionality:

/*-----Only for hove over image -show hide text------*/
var IdAry=['slide1','slide2','slide3','slide4'];
window.onload=function() {
 for (var zxc0=0;zxc0<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;
}

Below is the js code used for click event functionality:

/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide4'];
window.onload = function () {
    for (var zxc0 = 0; zxc0 < 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 && 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();
}

Thanks Sushil

Answer 1

You can add multiple event names to the same assignment:

$(document).on('mouseover click', '.yourObject', function (event) {
    if (event.type === "mouseover") {
        // Mouse-Over code here
    } else if (event.type === "click") {
        // Click code here
    }
});

Also, try to use addEventListener instead of hardcoding events like el.onmouseout=function(){...} use:

el.addEventListener("mouseout", function () {...});

That'll make it easier to manage the events (Remove them, for example), should that be needed.

Answer 2

The problem with your code is that you are setting window.onload twice. Since your are using jQuery you can make it work by binding on document.ready event.

//first sample
(function($){
/*-----Only for hove over image -show hide text------*/
var IdAry=['slide1','slide2','slide3','slide4'];
$(function() {
 for (var zxc0=0;zxc0<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;
}
}(jQuery));

//second sample
(function($){
/*----------Text change on click - Our Process page---------------*/
var prev;
var IdAry = ['slide1', 'slide2', 'slide3', 'slide4'];
$(function () {
    for (var zxc0 = 0; zxc0 < 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 && 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();
}
}(jQuery));

Answer 3

You can add multiple events to a DOM by using

$(document).on('mouseover','.yourObject', function(){ //over code })
           .on('click', '.yourObject', function() { //click code});