Dynamic images click function with Javascript

Question

I have a list of friends, (BOB, TINA, LISA, TERRY, MIKE) and each listed person has a picture identifying them on hover. When you click on that person their image stays on the screen, until you click a different person. Currently I am getting the same persons picture on click regardless the name I select.

How to I create a dynamic click function in js? When I click on a listed friend, I would like the click function to recognize which person I selected and display the image associated with that person.

Can someone please help me?

CSS

.BOB,.TINA,.LISA,.TERRY,.MIKE { background: url("../theme/images/blank.png") no-repeat 0 0; }

.BOB:hover { background: url("../theme/images/BOB.png") no-repeat 0 0; }
.TINA:hover { background: url("../theme/images/TINA.png") no-repeat 0 0; }
.LISA:hover { background: url("../theme/images/LISA.png") no-repeat 0 0; }
.TERRY:hover { background: url("../theme/images/TERRY.png") no-repeat 0 0; }
.MIKE:hover { background: url("../theme/images/MIKE.png") no-repeat 0 0; }

.highlight { background: url("../theme/images/BOB.png") no-repeat 0 0; display: block;}

JAVASCRIPT

$(document).ready(function(){
$('a').click(function(){
    $(".highlight").removeClass('highlight')
    $(this).addClass('highlight');
});

Purag · Accepted Answer · 2011-12-24 01:36:33Z

1

Your $(document).ready() function is not closed properly.
Your $("a").click() function is not preventing the default link action (this is only a concern if you have a href attribute defined for the link).
Your .highlight class has a single background image, which is identical to that of your first person's background image. This is causing you to see the same background image for each one.

You can do this to fix number 3:

$("a").click(function(e){
    e.preventDefault(); // prevent link from directing to a different url
    $(this)
        .parent() // assuming the link is in the div you want to "highlight"
        .css({ // modify parent's css
            'background':
                'url(../theme/images/' + $(this).attr("class") + '.png no-repeat 0 0',
                // take class name (bob, tina, etc) and fetch image accordingly
            'display': 'block'
        });
});

edited Dec 24, 2011 at 1:36

answered Dec 24, 2011 at 1:26

Purag

17.1k4 gold badges57 silver badges78 bronze badges

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

Comments

Virendra · Accepted Answer · 2011-12-24 01:27:52Z

0

The .highlight class is using he same image always.

Can you post the html code too? It is difficult to find out what's happening without seeing your html code.

answered Dec 24, 2011 at 1:27

Virendra

2,5433 gold badges23 silver badges39 bronze badges

7 Comments

need2nobasis Over a year ago

here is a link to my issue. When you hover over one of the ratings, you will see the hover effect. I removed the highlight code since it was problematic and useless. I am trying to get that rating to stay when clicked. thanks for the help. [link]cuuzo.com/language.html

Virendra Over a year ago

I copied your code into jsfiddle and modified it. Here is the link to it. jsfiddle.net/c9Fxg Let me know if this is what you are looking for.

need2nobasis Over a year ago

It's a lot better than what I originally had. But, only the selected should be highlighted at a time. Right now the jsfiddle never deselects the item when another is selected.

need2nobasis Over a year ago

absolutely perfect! thank you so much. I had been struggling with this for a few days literally.

Virendra Over a year ago

Just updated the fiddle jsfiddle.net/c9Fxg/3, as it was not showing your target image. Glad I could help :)

|

Collectives™ on Stack Overflow

Dynamic images click function with Javascript

2 Answers 2

Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related