Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS remote image change

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #29439
    trentstudios
    Member

    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

    #78317
    noahgelman
    Participant

    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.

    https://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)
  • The forum ‘CSS’ is closed to new topics and replies.