How to create a image that can change "sections" to different colors

Posted on 2004-08-05
Last Modified: 2010-04-06
This may be a little difficult to explain but let's just say I have an image cut up into 9 squares, 3 across and 3 down.  I want to be able to click a square and have it change to a different image.  If I click it again I want it to change to yet another different image.  I could click around this image for a few minutes and have a mish-mosh of images.

What this really is being used for is a tool that shows a drawing of a body with each section of the body being a different clickable section.  For example left wrist, right ankle, etc.  When the left wrist is clicked once, it needs to go from white to light pink, if clicked again, it needs to go a little darker, and so on and so on, to a limit.  Basically I need to be able to assign a level, from 0-9 for each section of the body to represent how much pain someone has in that section.

My first attempt was to create an image map of the body drawing slicing up each section.  Then using Photoshop I created 10 different graphics for each section, each with a higher degree of color.  Then using some complicated JavaScript I kept track of the clicks per section and and displayed or not displayed each individual graphic using absolute positioning.  The problem came when someone resized the browser...then everything shifted around and my body became a mish-mosh of images splattered across the screen.

So I'm wonder what a better approach may be.

Question by:mskvarenina
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 2
  • +1

Expert Comment

ID: 11726580
Hi mskvarenina,

Why don't you try Flash?

Author Comment

ID: 11726788
Never used it.  Is it free or do I need to purchase a product to use it.  Plus my web server is an IBM AS/400 running a prorietary web server.  I don't know if it could serve up a Flash object.  I know it can serve up Java Applets so if Flash is similar to that, it may be possible.

Author Comment

ID: 11726808
And I guess a bigger question is could I retreive the state of the image when the Submit button is pressed?  This tool I'm developing is not just an output only tool, meaning they see the body, do some clicking then exit.  I must record what was clicked and at what severity in a database so it can be recalled later.
On Demand Webinar - Networking for the Cloud Era

This webinar discusses:
-Common barriers companies experience when moving to the cloud
-How SD-WAN changes the way we look at networks
-Best practices customers should employ moving forward with cloud migration
-What happens behind the scenes of SteelConnect’s one-click button


Expert Comment

ID: 11726887

Flash is a client-side system, like HTML or JavaScript.
It costs some money (
It can send variables to server which can store it.

But it's not really good to buy Flash just for 9 color blocks.
And it will take you some time to study how to do this.

Expert Comment

ID: 11726907
So maybe you'll just tune up your JavaScript solution? You may ask for assistance at JS section here.
LVL 19

Expert Comment

ID: 11728662
A standard image swap, with some minor modifications, hidden form fields and a submit button, with something on the back end to process it, would do what you want.

You'll need to develop the graphics and get the image swap working first, then add something to track the number of clicks and do the swap based on that. Clicking would also update the hidden fields.

Javascript for the images/form submit, server side to write to the database. Do you also need to track the person? That would require a login of some kind.

Author Comment

ID: 11728846
webwoman, yes I believe the image swap is what we've been trying to work out.  As I may have mentioned we cut up the image into sections then made 10 different images per section of varying color.  We were able to swap or overlay, make visible, whichever you like the appropriate level image, the problem was the developer placed the main image on the screen simply dropping it into a table cell, but then used absolute positioning to display the 'hidden' images which appeared over top of the original image.  This was fine until someone resized the browser window...then everything shifted around.

Right now he's trying to also place the original image using absolute positioning so if it's done correctly, this problem should go away.
LVL 19

Accepted Solution

webwoman earned 250 total points
ID: 11735667
No it won't.

You need to slice up the MAIN image, and swap out the PIECES. Then NOTHING shifts, no matter how they resize the window.

Expert Comment

ID: 11738823
Why dont you just make a 3 by 3 cell table, and place each part of the image inside one of those cells.  Just remember to set the cell space and border to zero... so just as webwoman said, you would have 9 images that made up the main image, and then you would have the colored versions of those original 9 images.  They just use the image swap code whenever the image is clicked.

Also, when you are using layers, make sure that they are the very last html elements coded on the page.

Featured Post

Enroll in June's Course of the Month

June's Course of the Month is now available! Every 10 seconds, a consumer gets hit with ransomware. Refresh your knowledge of ransomware best practices by enrolling in this month's complimentary course for Premium Members, Team Accounts, and Qualified Experts.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Keep your audience engaged and get the most out of your next presentation with these quick Prezi tips.
Many programs have tried to outwit PowerPoint in terms of technology and skill. These programs, however, still lack several characteristics that PowerPoint has possessed from the start. Here's why PowerPoint replacements won't entirely work for desi…
In this Micro Tutorial viewers will learn the basic shortcuts and functions of Illustrator. The viewer will learn about the paintbrush tool, anchor points, font sizing, and more.
In this Micro Tutorial viewers will learn the basic shortcuts and functions in InDesign.

726 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question