Fire javascript function on image click within a html div

Question

I have a div that contains an image :

<div class="HD">
    <img class="image1"src="img/myimage.png">
</div>

the CSS applied to it is :

.HD img {
    position:absolute;
    top:570px;
    left:1120px;
    width:30px;
    height:90px;
    cursor:pointer
}

I want to apply a click function to the image inside the div. However, when I give an image id or class and use that to create the function the javascript does not fire. When the div does not have an image and I use the class the javascript works as expected. Below is the Javascript function :

$(".HD").click(function () {
    if($('.UpperDiv').attr('data-visible') == "hidden") {
        $('.UpperDiv').attr('data-visible', 'visible');
        $('.UpperDiv').animate({
            opacity:1
            // top:'250px'
        });
    } else {
        $('.UpperDiv').attr('data-visible','hidden');
        $('.UpperDiv').animate({
            opacity:0
            // top:'250px'
        });
    }
});

What could be the reason ? What is wrong with my code ?
How can I fire the javascript, when the user clicks on a div that contains an image?

For reference, this is the website I am trying to make, and the original working version.

I have not used jsfiddle .. I am trying to create one .. will that be useful if i did — Nodnin
– Nodnin, Commented Dec 2, 2013 at 4:12
Yes, definitely would be helpful for answering your question. — jameslafferty
– jameslafferty, Commented Dec 2, 2013 at 4:47

maček · Accepted Answer · 2013-12-02 03:41:49Z

2

Can't you just use .toggle?

$(".HD").toggle(400);

Or .fadeToggle?

$(".HD").fadeToggle();

answered Dec 2, 2013 at 3:41

maček

78k37 gold badges172 silver badges200 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nodnin Over a year ago

I am sorry , I could not understand your answer ..why did you suggest the toggle .. will the toggle thing toggle between the 2 divs's.. but the current problem is that nothing happens on a click..

jameslafferty · Accepted Answer · 2013-12-02 03:37:45Z

1

Try :

$(".HD").on({
    click : function(){
        if($('.UpperDiv').attr('data-visible')=="hidden")
        {
                $('.UpperDiv').attr('data-visible','visible');
                $('.UpperDiv').animate({
                        opacity:1
                        // top:'250px'
                });
        }else{
                $('.UpperDiv').attr('data-visible','hidden');
                $('.UpperDiv').animate({
                        opacity:0
                        // top:'250px'
                });
        }
    }
}, 'img');

answered Dec 2, 2013 at 3:37

jameslafferty

2,1822 gold badges21 silver badges25 bronze badges

2 Comments

Nodnin Over a year ago

Is there a way we could apply an image class or image id and on click of that fire the javascript .. Thank you for the answer though it does provide useful suggestions

jameslafferty Over a year ago

Which version of jQuery are you using?

Abhisek Mishra · Accepted Answer · 2013-12-02 07:10:54Z

1

$(".HD > img").click(function () { });

Use this and try.

answered Dec 2, 2013 at 7:10

Abhisek Mishra

2693 silver badges15 bronze badges

Collectives™ on Stack Overflow

Fire javascript function on image click within a html div

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related