SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is it possible to swap colours in an image?

    A client has approached me to build a website which allows visitors to display a rug, select different parts of the rug and change it's colour.

    I've come across a website that does exactly this, it displays a photo of the rug, you select a colour and then click the part of the image you want to be that colour, and it changes it.

    Does anyone know how 1) to pick a colour from an image, and then to 2) change it.

    Is this possible with javascript, or will I need to use javascript to select the colour from the image, and then some server side PHP to manipulate and reload the image?

  2. #2
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Easiest bet would be to use flash have this type of interactivity...

    Otherwise if that is not an option you could use javascript to get the x,y coordinates of the users click when they click on the image and send that information back to the server to process.

    Another option if you want to get tricky is you could use an image-map or set of divs/elements and upon clicking on a certain element, show/hide an appropriate element with the corresponding color.

    Good luck

  3. #3
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    This might be easily done by using a series of tiles. That way changing the colour of parts of the rug would involve just changing the image of pieces of tile.

    Another possible way is to use images with transparent sections, so that a backgound colour can be set that shows through the transparent parts.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  4. #4
    SitePoint Enthusiast
    Join Date
    Jul 2008
    Posts
    90
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by SlickAU View Post
    Easiest bet would be to use flash have this type of interactivity...

    Otherwise if that is not an option you could use javascript to get the x,y coordinates of the users click when they click on the image and send that information back to the server to process.

    Another option if you want to get tricky is you could use an image-map or set of divs/elements and upon clicking on a certain element, show/hide an appropriate element with the corresponding color.

    Good luck
    I don't suppose you know how to change colours server side do you? I am assuming it'll be using something like GD?

  5. #5
    SitePoint Enthusiast
    Join Date
    Apr 2009
    Posts
    73
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Presuming that you are working with solid colors (and not gradients) then I would imagine that you could use the imagecolorat function once you have transmitted the color data from the client side to the server to find the color at the specified x,y coords.

    Then you could use a php GD method ( see http://php.net/manual/en/book.image.php ) to replace the color in the image.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •