www.webdeveloper.com
Results 1 to 4 of 4

Thread: Multiple transparent images that look like one image

  1. #1
    Join Date
    Jul 2006
    Posts
    146

    Multiple transparent images that look like one image

    Hi,

    I have a client who wants to have multi-part images where different parts of the image can have their colors changed. So, I am thinking i need multiple transparent images that can be displayed as one image, and that i use javascript and css to change the background color of the individual images.

    An example image would be a flower, where the stem, leaves, and petals where all able for me to change their colors upon user input, but which other than the color changes would like like a single image in the website display.

    Really would appreciate help and suggestions with this.

    Mike

  2. #2
    Join Date
    Mar 2011
    Posts
    1,108
    I doubt you'll be able to use transparency and background colors unless the regions that change color are very simple and never overlap.

    I'm not a graphics guru, but I suspect that you'll need to create/extract masks for each region that will change colors and then use a server-based graphics library like GD or ImageMagick to fill the appropriate mask(s) and then composite it with a base image. I've never done it myself, but I've seen sites that have. It might take some time, but I bet if you do some serious searching that you'll be able to find a ready-made script for this process, and if you're very lucky, an online tutorial. Good luck!
    Rick Trethewey
    Rainbo Design

  3. #3
    Join Date
    Sep 2006
    Location
    new york
    Posts
    254

    image MAP?

    I'm trying to visualize (but have not tested) how an image map with link areas might be used?

    Also wonder how slicing might help?

  4. #4
    Join Date
    Mar 2011
    Posts
    1,108
    Image maps might be incorporated into the design, but that doesn't address the issue of changing the color in selected regions. Similarly, I'm afraid slicing is probably inadequate unless the regions to be colored are rectangular. When I think of this topic, I'm reminded of websites I've seen from the car manufacturers who can display their cars with different body colors. While they could simply replace the images as needed, my impression is that they were doing color fills. There are other sites that display maps of the world or the US states where the colors change. In any case, it's a good way to think of the problem because these are the kind of irregularly-shaped objects that I think the OP has to work with.
    Rick Trethewey
    Rainbo Design

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles