Is it possible to run JavaScript and also edit image maps using Design View in Dreamweaver?

1

0

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.

Mike Eng

Posted 2012-09-17T21:02:18.797

Reputation: 318

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 – 2012-09-19T21:10:13.883

Answers

0

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

harrymc

Posted 2012-09-17T21:02:18.797

Reputation: 306 093

1Thanks, but I am looking for a desktop application (not web-based tools) to do this. I just edited the question to clarify. – Mike Eng – 2012-09-22T21:36:55.347

Desktop applications exist as well. If you have Adobe Fireworks it can do this as described here. I also found Imogen, which I have never used. Anyway, what is your problem with Dreamweaver? See this article.

– harrymc – 2012-09-23T06:38:36.020

1I described the problem with Dreamweaver in the original question. I updated it to hopefully make it more clear. – Mike Eng – 2012-09-24T14:58:02.433

Question: Do you mean that images are being displayed over a background image and each one has its own map? My problem is that I can't understand why creating a map separately for each sub-image isn't acceptable. – harrymc – 2012-09-24T15:26:53.340

1No. 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 – 2012-09-25T17:31:31.453

Map coordinates are relative to the top-left corner of the image, so why do you care where the image goes? – harrymc – 2012-09-25T18:33:29.363

1Yes, 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 – 2012-09-25T21:31:33.547

I have difficulties understanding the problem and your mention of "780-screen". You should maybe extend the problem description in the post with (much) more detail. – harrymc – 2012-09-26T06:13:15.250

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 – 2012-09-26T13:29:08.320

Asked: 2012-09-17T21:02:18.797

Viewed: 382 times

Active: 2014-03-19T11:45:26.240