How can we give mouse click functionality along with mouseover functionality?

Question

How can we add mouse click event when already we have mouseover event my requirement are like this way:

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

Requirement -

MouseOver functionality is working in correct order.
I want to add click event along with mouseover event together -

When user click on any of the images part which is given in both top funnel and bottom rounded circle - then their related text or content will be visible untill user click on any other section and also along with this click event mouseover functionality will work in the same way.

Means - When ever user move mouse over the image section their related text will be visible but if user click any of the section then their related text will be visible every time until user click on any other part or section or move mouse over other section.

Below are the js which i have created for only mouseover functionality - now i want both mouseover and click event together.

var IdAry=['slide1', 'slide2','slide3','slide4','slide5','slide8','slide9','slide12','slide13','slide14','slide15','slide16'];
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 HTML part:

<div class="BottomGraph">
        <div class="row1">
            <a href="#" id="slide1">
                <span id="span1"></span>
                <span class="hide">Each client is provided with quarterly aggregated account statements detailing investment performance across individual accounts. Periodic client meetings provide opportunities to receive more detailed performance attribution.</span>
            </a>
            <a href="#" id="slide2">
                <span id="span1"></span>
                <span class="hide">How funds are invested across broad asset classes is the primary determinant of long term returns and determines the overall risk profile of your portfolio. We therefore take great care in recommending an asset allocation that incorporates the financial goals and risk tolerance of each client.</span>                        
            </a>
        </div>  

        <div class="row2">
            <a href="#" id="slide3">
                <span id="span1"></span>
                <span class="hide">We continuously monitor our managers to ensure that each strategy is performing as expected.</span>
            </a>
            <a href="#" id="slide4">
                <span id="span1"></span>
                <span class="hide">The asset allocation decision is implemented with money managers vetted by WWP for their experience, skill and expertise in their respective investment strategies, including tactical ETF managers, growing dividend equity managers or fixed-income managers.</span>                       
            </a>
        </div>
    </div>

You say `jQuery` in your tags but your javascript don't use jQuery. You want a jQuery code or a native javascript code ? — Magus, Nov 26 '12 at 12:12

score 4 · Answer 1 · answered Nov 26 '12 at 12:14

You can do it in different ways, first you could leave the mouseover behavior to css, as I can see, it's just a text area displaying.

div {display:none;}
div:hover, div:active {display:block;}

Then if you want the same behavior for different events, i'd advise to use jquery that helps declaring multi events with the on and bind methods.

 $.bind('click, hover', function(){
     //do stuff
 })

There is the on method aswell :

 $.on('click, hover', function(){
     //do stuff
 })

score 2 · Accepted Answer · edited May 23 '17 at 11:56

Top Graph:

Letting jQuery handle the hover events instead of using the :hover css pseudo is the only way to do this, as jQuery cannot manipulate the :hover state, while css cannot provide a toggle. Instead, use attributes and attribute selectors. Both available to manipulate through css and jQuery

CSS:

.TopGraph a[attr-active="one"]
{
    float:left;
    width:240px;
    height:104px;
    position:absolute;
    left:0;
    top:35px;
    -webkit-border-radius: 20px 100px 100px 20px;
    -moz-border-radius: 20px 100px 100px 20px;
    border-radius: 20px 100px 100px 20px;
    background:url('../images/one-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

.TopGraph a[attr-active="two"]
{
    float:left;
    width:250px;
    height:180px;
    position:absolute;
    left:250px;
    top:51px;
    -webkit-border-radius: 100px 20px 20px 500px;
    -moz-border-radius: 100px 20px 20px 500px;
    border-radius: 100px 20px 20px 500px;
    background:url('../images/two-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

.TopGraph a[attr-active="three"]
{
    float:left;
    width:221px;
    height:103px;
    position:absolute;
    left:84px;
    top:155px;
    -webkit-border-radius: 20px 100px 100px 20px;
    -moz-border-radius: 20px 100px 100px 20px;
    border-radius: 20px 100px 100px 20px;
    background:url('../images/three-hover.jpg') 0 0 no-repeat;
    behavior: url('css/PIE.htc');
}

JS:

$(document).ready(function() {
    $('.TopGraph').find('a').each(function() {
        $(this).attr('attr-active', '');
        $(this).attr('attr-clicked', '');
        $(this).click(function(event) {
            event.preventDefault();
            var isAnyActive_dsanjj325kj4 = false;
            if ($(this).attr('attr-clicked') == "true") {
                isAnyActive_dsanjj325kj4 = true;
            }
            $('.TopGraph').find('a').each(function() {
                $(this).attr('attr-active', '');
                $(this).attr('attr-clicked', '');
            });
            if (isAnyActive_dsanjj325kj4 == false) {
                $(this).attr('attr-clicked', 'true');
                $(this).attr('attr-active', $(this).attr('class'));
            }
        });
        $(this).hover(function() {
            if ($(this).attr('attr-clicked') == '') {

                var isAnyActive_dsanjj325kj4 = '';
                $('.TopGraph').find('a').each(function() {
                    $(this).attr('attr-active', '');
                });
            }
            $(this).attr('attr-active', $(this).attr('class'));
        }, function() {
            $('.TopGraph').find('a').each(function() {
                $(this).attr('attr-active', '');
                if ($(this).attr('attr-clicked') == 'true') {
                    $(this).attr('attr-active', $(this).attr('class'));
                }
            });
        });
    });
});

Bottom Graph [original answer]:

By attaching a attribute to the element to detect if it has been clicked, then resetting that attribute to all elements if another element is interacted with, this effect is possible:

$(document).ready(function() {
    $('[id^="slide"]').each(function() {
        $(this).attr('attr-active', 'false');
        $(this).attr('attr-clicked', 'false');
        $(this).click(function(event) {
            event.preventDefault();
            var preExist_ksnfk4n534nj5345 = false;
            if ($(this).attr('attr-clicked') == 'true') {
                preExist_ksnfk4n534nj5345 = true;
            }
            $('[id^="slide"]').each(function() {
                $(this).attr('attr-active', 'false');
                $(this).attr('attr-clicked', 'false');
                changeText($(this), 'show', 'hide');
            });
            if (preExist_ksnfk4n534nj5345 == true) {
                $(this).attr('attr-clicked', 'false');
                changeText($(this), 'hide', 'show');
            } else {
                $(this).attr('attr-active', 'true');
                $(this).attr('attr-clicked', 'true');
                changeText($(this), 'hide', 'show');
            }
        });
        $(this).hover(function() {
            var isAnyActive_san9h39423ht = false;
            $('[id^="slide"]').each(function() {
                $(this).attr('attr-active', 'false');
                changeText($(this), 'show', 'hide');
            });
            changeText($(this), 'hide', 'show');
        }, function() {
            if ($(this).attr('attr-active') == 'false') {
                changeText($(this), 'show', 'hide');
            }
            $('[id^="slide"]').each(function() {
                if ($(this).attr('attr-clicked') == 'true') {
                    changeText($(this), 'hide', 'show');
                }
            });
        });
    });
});

function changeText(obj, cl1, cl2) {
    obj.children('span').eq(0).attr('class', cl1);
    obj.children('span').eq(1).attr('class', cl2);
}

Thanks for your reply we are now almost close to my destination - the only thing which is left is when user click on any option it shows their related text which is correct - but when again i hover over other option its shows their related text which is also correct but after hovering other it also hide that selected field which need to be their if still you move your mouse outside or anyother field option - Hope you understand my requirement — Sushil Raghav, Nov 26 '12 at 14:12
The only thing which is left is by default it shows hover effects but if user selected or click any of the field then that field will be shown every time until user click another filed then that another field will be visible - mouseover effect is perfect :) - Thanks a lot for your work — Sushil Raghav, Nov 26 '12 at 14:15
i have gone through your code and even applied that when you clicked on any field then (attr-active = true ) changed to true but again when you hover your mouse to any field even to selected field again, then your attr-active value again changed to false, which needs to be true every time until user click on another field :) — Sushil Raghav, Nov 26 '12 at 14:23
Sorry for the delay, missed out on a small detail and had to debug it for 15minutes. For the modified solution see edit — extramaster, Nov 26 '12 at 14:32
Thanks for your reply you have done a great job - I am really very thank full to you - Will definitely recommend you :) Still one requirement is left when after selecting one filed its show their selected field which is ok then again if you move your mouse over the same selected field then it hides the selected filed which need to be remain visible every time - 2nd after selecting any field when we move mouse to other fields it show other option which is correct but again when you move your mouse out then selected field will be visible. — Sushil Raghav, Nov 27 '12 at 07:19
so now the problem is with hover functionality it is hiding selected field text which need to be remain their. 2 things we have to resolve -1. If once user click on any field then their selected text will be visible even after if you move your mouse out of that circle after hovering over other fields or selected field. 2. Mouseover functionality is perfect it will remain same even if you hover over selected and other fields - while hovering over any field its show their related text. — Sushil Raghav, Nov 27 '12 at 07:26
Hope this helps you to understand my requirement: Can we make it so when you roll over, it shows the respective information but if you click on any of them, it reveals the information and keeps it open until the user rolls over or clicks a new part of the graphic? Ex: User hovers over Financial Plan. FInancial Plan text appears. User clicks on Investment Philosophy. Respective text in graphic appears and stays open. Hovering over Asset Allocation shows respective text but when mouse leaves this, it goes back to showing INvestment Philosophy since it was the last clicked item. — Sushil Raghav, Nov 27 '12 at 07:57
Oh... Re-read your comment... I need to make this clear: Is the bottom graph complete? [as it is what your sample code demonstrates] Do you need to work on the ".topgraph"? It so, next time, please clearly specify in your question, it really helps us understand your objectives more clearly... — extramaster, Nov 27 '12 at 08:21
Excellent work :) Yes i have to do same thing on topgraph - i thought i will apply same functionality to topgraph what you suggest? - because on top graph i have only images which i am showing on image hover below is the code — Sushil Raghav, Nov 27 '12 at 10:12
You are really very intelligent and genius thanks a ton :) The is the same requirement what i want :) — Sushil Raghav, Nov 27 '12 at 10:16

score 0 · Answer 3 · answered Nov 26 '12 at 12:18

0

You could add

el.onclick= function(){
//code
}

as seen here

answered Nov 26 '12 at 12:18

agryson

297
2
9

score 0 · Answer 4 · answered Nov 26 '12 at 12:24

This should not be a problem, just make two functions that are showing and hiding text and called them from both events. I.E.

el.onmouseover = function(){
showFunction();
};
el.onclick = function(){
showFunction();
}
function showFunction(){
changeText(this,'hide','show');
}

Also you should consider using jquery as it is much eiser and cleaner to select elements and catch events. Also consider using css class instead of list of id-s, cause just it is much cleaner. Also if you use css class i.e. class="slide" you can call closing of previous text much eiser:

el.onclick = function(){
$(".slide").hide(); // hides all text elements.
showFunction();
}

How can we give mouse click functionality along with mouseover functionality?

4 Answers4

Top Graph:

Bottom Graph [original answer]: