Google Answers Logo
View Question
Q: Generate HTML Area hotspots for parts in exploded diagram from Photoshop layers ( No Answer,   4 Comments )
Subject: Generate HTML Area hotspots for parts in exploded diagram from Photoshop layers
Category: Computers > Graphics
Asked by: benjol-ga
List Price: $2.00
Posted: 21 Nov 2005 01:12 PST
Expires: 21 Dec 2005 01:12 PST
Question ID: 595699
An exploded diagram is generated from ProEngineer - the result is
delivered in the form of a Photoshop PSD file with one layer per part.
The aim is to present this diagram as an image on a web page, where
each part is a clickable zone.
- My first idea is AREA hotspots: this would involve approximating the
outline of each part with a polygon.
- I have also wondered about 'cutting' the diagram up into individual
images, but the drawback is that images are rectangular, and
given that the diagram is in perspective, this would mean separating
the parts so far from each other that the diagram probably wouldn't
fit on the screen.
- There is also Flash, about which I know nearly nothing.
The big problem is that there are hundreds of these diagrams, so I
would REALLY like to have this process automated.
The question is: is there a way of automatically generating
'something' that will present the exploded diagram with individually
clickable parts on a web page?
There is no answer at this time.

Subject: Re: Generate HTML Area hotspots for parts in exploded diagram from Photoshop layers
From: womerz-ga on 01 Dec 2005 16:44 PST
Dear benjol,

I work with ProE and Photoshop too. Your first idea is not so bad ...
so you must use the Photoshop 6.0 or higher and change in the other
programm which is named "image ready". Then do you can use the single
layer. For each layer you can generating "rollover-actions", from
"over", "click" and "out" a.s.o., and
a least to save diretly in a .html file or only single-graphic file (gif, jpeg).
I create a little example for you under: 
3 layer with 1 rectangle. Mouseover, the orange and blue get invisible
- mouseclick on the grey rectangle - the blue come back; go outside
with the cursor and the original status is ready. So you could
generate Layer with other colour or text a.s.o.
In Photoshop or ImageReady you can using the batch-function. So you
can recording the steps and copy to the next file or layer.
If my comment is helpful or you have other questions contact me ...
Kindest regards womerz
Subject: Re: Generate HTML Area hotspots for parts in exploded diagram from Photoshop lay
From: benjol-ga on 02 Dec 2005 00:12 PST
Thanks for this comment. 
If I have correctly understood, 
1) These states can only be used to modify the image, so I couldn't
(at least directly), use the click to open another page (for example).
2) If I don't define an ImageMap, creating a rollover action will
automatically create a layer-based slice, which is rectangular.

1) isn't too much of a problem, as I could probably parse the html
output and change the onclick javascript.
2) This is a problem, because the exploded diagram is in perspective,
so rectangular slices will overlap.

I think that we will be obliged to have user-input to draw image maps
around each layer - I don't think Photoshop is clever enough to
approximate a polygon around a layer (and I'm not clever enough to
code it). Unless you have a good idea for that...
Subject: Re: Generate HTML Area hotspots for parts in exploded diagram from Photoshop layers
From: fataldog187-ga on 07 Dec 2005 23:25 PST
In Image Ready, you can hold CTRL + ALT when clicking on a layer in
the layers tab to select all pixels that reside on that particular
layer. Then you can go to Select > Create Image Map From Selection...
and choose polygon with a certain quality. In the Image Map window
(window>image map) you can then designate a specific URL or file that
the user should be sent to when the image map hotspot is clicked.

This will save a lot of time compared a person manually drawing all of
the image maps. Hope this helps.
Subject: Re: Generate HTML Area hotspots for parts in exploded diagram from Photoshop lay
From: benjol-ga on 08 Dec 2005 00:50 PST
I have currently settled for the following solution:
1. ImageReady batch script creates ImageMap for each layer - save
image and html to File 1.
2. ImageReady batch script creates Slice for each layer (with all
other layers hidden) - save each layer X to image file FileX.
3. Use a text script (I did it by hand so far), to transform the
<IMG/><MAP><AREAs></MAP> structure to <DIV><DIVs><IMG/></DIV>, using
COORDS of AREAs to generate absolute position of DIVs. Set the opacity
of the IMG to 50%.
4. Set the background of each div to the associated part, but with -1000px offset.
5. Dynamically add rollover code to each DIV to shift background on
rollover. This way the current part is 'highlighted' on rollover.

The reason for using DIVs is that the simple ImageMap solution would
imply saving the whole image X times (once for each rollover) - a lot
more disk space, and also with the DIV method, because I use the div
background, the slices are all 'preloaded'.

But now with this extra info, I'm wondering how I can push it a bit further...
I'm a bit dismayed that (apparently) it is not possible to have batch
actions 'for each' layer - this means that I either have to
dynamically generate .isa batch files, or predefine a selection of
batch files for x to x+n layers.
I think what I will try is as follows: steps 1-4 as above, then create
the polygonal ImageMaps as per fataldog187's comment, and integrate
those maps into the new html page.
Transform step 5 so that rollover is captured by the area, but still
transforms the DIV background.

So, if anyone has any news of batches with 'for each layer' functionality...

Important Disclaimer: Answers and comments provided on Google Answers are general information, and are not intended to substitute for informed professional medical, psychiatric, psychological, tax, legal, investment, accounting, or other professional advice. Google does not endorse, and expressly disclaims liability for any product, manufacturer, distributor, service or service provider mentioned or any opinion expressed in answers or comments. Please read carefully the Google Answers Terms of Service.

If you feel that you have found inappropriate content, please let us know by emailing us at with the question ID listed above. Thank you.
Search Google Answers for
Google Answers  

Google Home - Answers FAQ - Terms of Service - Privacy Policy