|
|
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: http://www.4dsign.de/test/benjol-rollover.html 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 |
Excellent! 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... |
If you feel that you have found inappropriate content, please let us know by emailing us at answers-support@google.com with the question ID listed above. Thank you. |
Search Google Answers for |
Google Home - Answers FAQ - Terms of Service - Privacy Policy |