Javascript: Combine hover and click events

Question

I have VERY recently started coding and been asked to code our company website from scratch.

I have coded a team page on the website with a PNG of each member of the team. At the moment when the user hovers over any of the PNGs they turn into a little animated GIF of them waving/doing something.

This is the javascript:

$(document).ready(function()
{
    $("#imgAnimateBeth").hover(
        function(){
            this.src = "images/Team/Videos/Beth.gif";
        },
        function(){
            this.src = "images/Team/Static-shots/Beth.png";
        }
    );
});

The issue I am having is that I also want to introduce a click state that would bring up a popup with a video of that person and their job description but I can't get it to work.

I have tried creating a CSS overlay but it refuses to work alongside the hover effect (JavaScript) so my assumption is that they don't play well together (??).

Below is the HTML for the section above. Can anyone enlighten me as to how this could be done? Simple language please!

<div class="teamsection">
    <img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
    <img src="images/Team/Static-shots/Kiemia.png" id="imgAnimateKiemia">
    <img src="images/Team/Static-shots/Emma-B.png" id="imgAnimateEmmaB">
    <img src="images/Team/Static-shots/Mathew.png" id="imgAnimateMathew">
    <img src="images/Team/Static-shots/Sydney.png" id="imgAnimateSydney">
    <img src="images/Team/Static-shots/Liz.png" id="imgAnimateLiz">
    <img src="images/Team/Static-shots/Russ.png" id="imgAnimateRuss">
    <img src="images/Team/Static-shots/Jill.png" id="imgAnimateJill">
    <img src="images/Team/Static-shots/Merry.png" id="imgAnimateMerry">
    <img src="images/Team/Static-shots/Caroline.png" id="imgAnimateCaroline">
    <img src="images/Team/Static-shots/Charlotte.png" id="imgAnimateCharlotte">
    <img src="images/Team/Static-shots/Lucien.png" id="imgAnimateLucien">
    <img src="images/Team/Static-shots/Sarah.png" id="imgAnimateSarah">
    <img src="images/Team/Static-shots/Emma-S.png" id="imgAnimateEmmaS">
    <img src="images/Team/Static-shots/David.png" id="imgAnimateDavid">
    <img src="images/Team/Static-shots/Kathryn.png" id="imgAnimateKathryn">
</div>

Also, if you need me to upload anything else, just shout.

The CSS overlay was like this:

The CSS code overlay was like this:

.popup {
    display: none;
    position: fixed;
    padding: 30px 70px;
    width: 700px;
    height: 100%;
    z-index: 20;
    left: 50px;
    top: 20px;
    background: rgba(0, 0, 0, 0.9);
    overflow: scroll;
}

With a little bit of Javascript:

$ = function(id) {
  return document.getElementById(id);
}

var show = function(id) {
    $(id).style.display ='block';
}
var hide = function(id) {
    $(id).style.display ='none';
}

And I basically did this to the HTML:

<div>
    <a href="javascript:void(0)" onclick="show('beth')">
        <img src="images/Team/Static-shots/Beth.png" id="imgAnimateBeth">
    </a>
</div>
    
<div class="popup" id="beth">
    <div class="close-button">
        <a href="javascript:void(0)" onclick="hide('beth')"><i class="fa fa-times" aria-hidden="true"></i> Close</a>
    </div>
    <h4>CONTENT HERE</h4>
</div>

Could we see the other code you referenced? "I have tried creating a CSS overlay but it refuses to work alongside the hover effect (javascript) so my assumption is that they don't play well together (??)." Also, what is "don't play well together?" What exactly is wrong? — Sidney
– Sidney, Commented Jan 12, 2018 at 19:13
What kind of company has a total beginner creating their website from scratch? — Barmar
– Barmar, Commented Jan 12, 2018 at 19:14
A small company with employees willing to learn new things. Protip: stackoverflow is not beginner friendly. It is what it is. On your subject, try having the hover coded in css and the video onclick coded in javascript. It will dance together well that way. — Iskandar Reza
– Iskandar Reza, Commented Jan 12, 2018 at 19:20

Jordi Nebot · Accepted Answer · 2018-01-12 19:40:48Z

Maybe this will give you some ideas:

var members = document.querySelectorAll('.team-member');

members.forEach(function(member) {
	member.addEventListener('mouseenter', memberShowGIF);
        member.addEventListener('mouseleave', memberShowPNG);
 	member.addEventListener('click', memberVideo);
});

function memberShowGIF(event) {
	this.src = this.dataset.gif;
}

function memberShowPNG(event) {
	this.src = this.dataset.png;
}

function memberVideo(event) {
	console.log('The video thing for: ' + this.id);
}

<div class="teamsection">
  <img id="Beth" class="team-member" 
       src="https://via.placeholder.com/200?text=Beth.png" 
       data-png="https://via.placeholder.com/200?text=Beth.png"
       data-gif="https://via.placeholder.com/200?text=Beth.gif">
  <img id="Kiemia" class="team-member" 
       src="https://via.placeholder.com/200?text=Kiemia.png" 
       data-png="https://via.placeholder.com/200?text=Kiemia.png"
       data-gif="https://via.placeholder.com/200?text=Kiemia.gif">
</div>

The most important learnings here are:

querySelectorAll (as a vanilla alternative to jQuery for selecting nodes)
addEventListener
Data attributes

Collectives™ on Stack Overflow

Javascript: Combine hover and click events

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related