?
Solved

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

Posted on 2004-08-05
9
Medium Priority
?
172 Views
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.

0
Comment
Question by:mskvarenina
[X]
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
9 Comments
 
LVL 6

Expert Comment

by:hsmtp
ID: 11726580
Hi mskvarenina,

Why don't you try Flash?
0
 

Author Comment

by:mskvarenina
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.
0
 

Author Comment

by:mskvarenina
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.
0
On Demand Webinar: Networking for the Cloud Era

Did you know SD-WANs can improve network connectivity? Check out this webinar to learn how an SD-WAN simplified, one-click tool can help you migrate and manage data in the cloud.

 
LVL 6

Expert Comment

by:hsmtp
ID: 11726887
mskvarenina,

Flash is a client-side system, like HTML or JavaScript.
It costs some money (http://www.macromedia.com/software/flash/)
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.
0
 
LVL 6

Expert Comment

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

Expert Comment

by:webwoman
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.
0
 

Author Comment

by:mskvarenina
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.
0
 
LVL 19

Accepted Solution

by:
webwoman earned 1000 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.
0
 
LVL 8

Expert Comment

by:shamstar
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.
0

Featured Post

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

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

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…
Technology opened people to different means of presenting information, but PowerPoint remains to be above competition. Know why PPT still works today.
In this Micro Tutorial viewers will learn how to remove an unwanted object using Photoshop’s feature known as content-aware fill.
Add visuals to your Prezi to keep your audience engaged. Learn how to embed images, edit them, and more in this video micro tutorial. Select "Insert" from the top menu in your Prezi editor: Select "Image": A toolbar will pop in from the right …
Suggested Courses

770 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