Skip to main content
M
mavic28
Participant
February 27, 2017
Question

tricky question [How to implement rollover image where car changes colour?]

  • February 27, 2017
  • 3 replies
  • 527 views

i am trying to implement  rollover type image(s) on a basic webpage!

Scenario

a picture of an illustration, where there is a car... I give a color pallet though and the visitor is able to mouse over the pallet. as doing so the image changes to match (mouseover) color... say a white car, they run the mouse over the blue on the pallet and the image is now a blue car. If that is what they want to select... they click on it and the default image is now a BLUE car... etc etc... with approx 40 colors to choose from...  i cant figure it out, i tried it in Flash and it worked well, but is a ton of work incorporating all image variations into it.,

Im hoping there is an easier way to do it in standard page formats..

I guess very similar to ford and gm sites, where you build your car and it changes images for you

Anyone have any idea?..

I am using Dreamweaver CC2017

thanks in advance!!

    This topic has been closed for replies.

    3 replies

    pziecina
    pziecina
    Legend
    February 27, 2017

    I think you should rethink the entire problem, as no matter what solution you finally decide on, it will not work on mobile devices, which now accounts for over 50% of internet usage.

    Mobile devices do not have any method for implementing rollovers, as they do not use a mouse.

    O
    osgood_
    Legend
    February 27, 2017

    pziecina  wrote

    I think you should rethink the entire problem, as no matter what solution you finally decide on, it will not work on mobile devices, which now accounts for over 50% of internet usage.

    Mobile devices do not have any method for implementing rollovers, as they do not use a mouse.

    'click' would work though as my example demonstrates. Unfortunatley I think we a probably talking about photgraphs here or should be if you want to show the car in its best light. I don't think I'm going to be particularly impressed by something that looks like a kids coloring in book.

    pziecina
    pziecina
    Legend
    February 27, 2017

    One possible solution, (though time consuming) would be -

    'cut-out' the car in the image, and use this as a background image.

    'cut out' the background of the images for all possible car colors, leaving just the car, and make the background transparent.

    Make a 'swap-image' behaviour, so that when a user selects a color, the car image of that color is superimposed over the background image, (over the cut out, so car image should be slightly larger).

    O
    osgood_
    Legend
    February 27, 2017

    IF it is a vector illustration you are using (I'm doubtful) and NOT an image then below is the whole solution, not half of one. If you are using actual images this solution would not be suitable.

    <!DOCTYPE html>

    <html lang="en">

    <head>

    <meta charset="utf-8" />

    <title>SVG Sample</title>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>

    <script>

    $(document).ready(function() {

    $('.color_swatch').click(function() {

    var color = $(this).attr('dir');

    $('#phone').css('fill', color)

    });

    });

    </script>

    <style>

    body {

    background: #343434;

    }

    #phone {

    transition: 1s;

    }

    .page_wrapper {

    width: 30%;

    margin: 0 auto;

    text-align: center;

    }

    .colors {

    display: flex;

    justify-content: center;

    }

    /* colors */

    .color_swatch {

    width: 30px;

    height: 30px;

    margin: 20px 4px;

    }

    .red {

    background-color: red;

    }

    .green {

    background-color: green;

    }

    .blue {

    background-color: blue;

    }

    .yellow {

    background-color: yellow;

    }

    </style>

    </head>

    <body>

    <div class="page_wrapper">

    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="300px" height="300px" >

    <path fill="#ffffff" id="phone" d="M204.316,0H95.664C83.827,0,74.252,9.595,74.252,21.432v257.146c0,11.816,9.575,21.422,21.412,21.422

    h108.652c11.836,0,21.432-9.605,21.432-21.422V21.432C225.748,9.595,216.152,0,204.316,0z M133.214,20.725h34.106

    c2.667,0,4.809,2.141,4.809,4.797s-2.142,4.787-4.809,4.787h-34.106c-2.646,0-4.797-2.141-4.797-4.797

    S130.568,20.725,133.214,20.725z M149.646,286.941c-7.454,0-13.493-6.061-13.493-13.493c0-7.454,6.04-13.493,13.493-13.493

    c7.424,0,13.473,6.039,13.473,13.493C163.119,280.892,157.07,286.941,149.646,286.941z M214.517,246.957H85.453V53.054h129.063

    V246.957h0.011H214.517z"/>

    </svg>

    <div class="colors">

    <div class="color_swatch red"  dir="red"></div>

    <div class="color_swatch green"  dir="green"></div>

    <div class="color_swatch blue"  dir="blue"></div>

    <div class="color_swatch yellow"  dir="yellow"></div>

    </div>

    <!-- end colors -->

    </div>

    <!-- end page_wrapper -->

    </body>

    </html>

    BenPleysier
    Community Expert
    BenPleysierCommunity Expert
    Community Expert
    February 27, 2017

    You are best off using an SVG rather than a raster image. For more, have a lokk at How do I make an SVG image change color when hovering over the object tag? | Treehouse Community

    Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
    Terms & ConditionsAccessibility statement
    Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices