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
  • 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.

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.
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).


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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Why Alexa says that my WEB IS VERY SLOW? 4 345
switching image colours 11 105
Adobe Illustrator CC 2015 - colors disappeared 3 87
VCD to mp4 11 103
I've been using this technique since Adobe CS2, and it should work with any version of Illustrator that includes the appearance panel. In this tutorial we'll create a button using the appearance panel in Adobe Illustrator, and then save it as a r…
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 how to remove an unwanted object using Photoshop’s feature known as content-aware fill.

747 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

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now