mskvarenina
asked on
How to create a image that can change "sections" to different colors
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.
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.
ASKER
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.
ASKER
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.
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.
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.
So maybe you'll just tune up your JavaScript solution? You may ask for assistance at JS section here.
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.
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.
ASKER
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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.
Also, when you are using layers, make sure that they are the very last html elements coded on the page.
Why don't you try Flash?