Grow your CSS skills. Land your dream job.

remote image change

  • # June 21, 2010 at 5:19 pm

    Does anybody know how to do this:
    click on a color swatch and a remote image changes.
    like the car websites do.

    [img]http://www.trentstudios.com/remote_image_mouseover_example.jpg[/img]

    I don’t know if this can be done with only css or if there needs to be javascript, too.

    Thanks!
    Cway

    # June 21, 2010 at 5:59 pm

    If you want the image to change with a click, then yes, you have to use java. However, if you don’t feel comfortable getting into jquery you can neatly do it with just CSS when you hover over the swatch option. Chris did a tutorial on it.

    http://css-tricks.com/video-screencasts … -switcher/

    However, if you need to use jquery. Try this:

    Put all of your car images into a div with the id of car.
    Give each of the car images an id of what color it is (i.e #red-car, #green-car, #silver-car)
    Make a list of links inside a div with the id of swatches.
    Give each link the id of a color.

    Code:
    $(function() {
    $(‘#car img’).hide();
    ///This will hide all the car images inside the car div
    $(‘#car img#red’).show();
    ///This will show only the red car. This is your default///
    $(‘#swatches a’).click(function() {
    ///This targets the anchor links that are the swatch options///
    $(‘#car img’).hide();
    ///This means that when you click a swatch it will hide all the car images///
    });
    $(‘ swatches a#red’).click(function() {
    $(‘img#red-car’).show;
    ///This means when you click on the swatches like with the id of red, the img with the red car will show///
    });
    $(‘ swatches a#green’).click(function() {
    $(‘img#green-car’).show;
    ///This means when you click on the swatches like with the id of green, the img with the green car will show///
    });
    $(‘ swatches a#silver’).click(function() {
    $(‘img#silver-car’).show;
    ///This means when you click on the swatches like with the id of silver, the img with the silver car will show///
    });
    < ---Copy and paste.
    });

    I know that can be a lot to take it if you’d don’t know jquery but it’s pretty easy to see how it works if you look over it. You can copy and paste the following into the script for as many cars as you need just change the color to whatever you need it to be. All of these ID’s can be substituted for classes as well. Good luck.

    Code:
    $(‘ swatches a#silver’).click(function() {
    $(‘img#silver-car’).show;
    ///This means when you click on the swatches like with the id of silver, the img with the silver car will show///
    });
Viewing 2 posts - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.

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