Grow your CSS skills. Land your dream job.

How to make an image change on click

  • # February 11, 2011 at 5:48 am

    Hello all,

    I dont know javascript so I download all the dynamic content for my sites.

    On my own website I have a list of services and I got some code so that when the user clicks one of the services more information appears. I have a little plus sign beside each service and I want it to turn into a minus sign that I have as an image. How can I do this ?

    Heres a link to the page.
    http://michaeloneilldesign.com/new/services.html

    Thanks alot,
    Micky

    # February 11, 2011 at 6:17 am

    Have a look at this – You could probably manipulate it to get the effect you would like: http://css-tricks.com/examples/jQueryFAQ/

    # February 11, 2011 at 6:56 am

    jamy_za, I already have something similar to this. Click the link I gave. I want something to make the plus image change when clicked. Note that I only have the “Websites in XHTML and HTML5″ set up to do this.

    # February 11, 2011 at 7:16 am

    @michaeloneill the link you gave doesn’t load. I get this error: Content Encoding Error

    # February 11, 2011 at 7:28 am

    jamy_za – The link should work fine now :)

    # February 11, 2011 at 10:09 am

    You can use jquery and change the src attribute:


    $('#plus-symbol-button).click(function() {
    $(this).attr('src', 'images/minus-symbol.png');
    });


    Something like that should work.

    # February 11, 2011 at 10:20 am

    @johnnyb I have put that code onto the page making the necessary changes… However it still wont work! :L Check out the link http://michaeloneilldesign.com/new/services.html

    Thanks

    # February 11, 2011 at 10:55 am

    I think you may need to include the switch within your showslidingdiv function.

Viewing 8 posts - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".