Take the 2-minute tour ×
Super User is a question and answer site for computer enthusiasts and power users. It's 100% free, no registration required.

I'm using Dreamweaver CS5.5 for an HTML prototype that is built with image-mapped screenshots. I am using JavaScript to dynamically include the appropriate main image, and the navigation is done with image maps.

I found some references to the "Live View" feature, which runs JavaScript successfully, but I cannot see or edit image maps in "Live View". I am only able to edit the image maps using "Design View" which does not show the proper image which is set using JavaScript.

Is it possible to have the Dreamweaver "Design View" run JavaScript initially (which will set the main image) and also allow me to edit the image maps in place (so I can see them placed over the correct main image)?

If this is not possible in Dreamweaver, is there another (possibly paid) WYSIWYG code editor that can execute JavaScript (at least on page load) and edit image maps with the JavaScript-generated content in place? I am looking for desktop software for Mac OS, not online tools, to do this since it is a large (780-screen) prototype.

share|improve this question
    
It's a bit of an idiosyncratic setup, but I am trying this approach to deal with an existing 780-screen prototype. Including the appropriate screenshot image using JavaScript would be a huge time-saver when creating new screens. –  Mike Eng Sep 19 '12 at 21:10

1 Answer 1

To ensure that the image-mapping is correct, the easiest way is to use one of the numerous free online websites that allow the interactive creation of image maps.

Here are two such that I found via google, the first of which I have used personally. None of them is perfect, but they allow one to do the job and export the generated HTML.

When switching the image via Javascript, you can at the same time change the innerHTML of the <map> tag to contain the new coordinates.

Basic Online Image Mapping Tool
Online Image Map Editor

share|improve this answer
1  
Thanks, but I am looking for a desktop application (not web-based tools) to do this. I just edited the question to clarify. –  Mike Eng Sep 22 '12 at 21:36
1  
I described the problem with Dreamweaver in the original question. I updated it to hopefully make it more clear. –  Mike Eng Sep 24 '12 at 14:58
1  
No. Images are being loaded dynamically using JavaScript. When using Design View in Dreamweaver, it does not run the JavaScript and therefore does not show the appropriate image. Using Dreamweaver in this way means that I cannot see where on the image the map areas are going. –  Mike Eng Sep 25 '12 at 17:31
1  
Yes, I realize this. I need to see the image (which is large and complex) in order to determine where to appropriately place the image map. –  Mike Eng Sep 25 '12 at 21:31
1  
"780-screen" means that the entire prototype has 780 individual screens. I've given as much detail as I can without including screenshots to show examples, but I don't think it's worth it at this point - seems there is not an easy way to make this approach work the way I intended. –  Mike Eng Sep 26 '12 at 13:29

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.