Image-map hotspot coordinates as variables ?

I am looking to develop an application that will allow operators to interactively define hotspots (clickable zones) on an image. Once done, this image map will be made available to a Web application, for user interaction (each click will be registered with predefined data that depends on the hotspot clicked). The process is to be repeated for a large number of images – that’s why I need an application, rather than having the operators defining the hotspots through the template/HTML editor.
My question: Is there a way to define variables for the hotspot coordinates, so that these coordinates - e.g. a rectangle’s corners - can be captured by the operators (typically, through mouse-pointer positioning) ?
PS: I am not a DreamWeaver developer – but I am looking for the right development platform for this project …

JavaScript. Probably something you could do with some of jQuery's functions. Preferrably you would simply store the data in a database to avoid file writing permission issues which go against Java's security sandbox model...
Mylenium

Similar Messages

Cannot adjust attributes or resize image map hotspots

Can't figure this one out. It has worked fine in all prior
versions of Dreamweaver, but for some reason CS3 isn't liking my
image map hotspots.
I can't select the hotspots in an image map in design view
and adjust their attributes in the properties window, or resize
them in the design view. When I select a hotspot, Dreamweaver
immediately selects "Multiple CSS-P Elements". So if I try to
adjust the size of a hotspot it thinks I'm dragging and dropping
the "Multiple CSS-P Elements" and not the hotspot. I can't edit the
hotspot attributes either because the properties of the hotspot do
not stay open; it flashes to the properties of the "Muliple CSS-P
Elements."
I've tried creating a new document and recreating the image
and hotspots, and they work fine. So it must be the way my image is
coded, nested in divs, the CSS applied to the image, or something
that isn't allowing me to adjust my hotspots.
Any ideas?

Is the image carrying these hotspots within a parent
container that has the
overflow style set by any chance?
Murray --- ICQ 71997575
Adobe Community Expert
(If you *MUST* email me, don't LAUGH when you do so!)
==================
http://www.projectseven.com/go
- DW FAQs, Tutorials & Resources
http://www.dwfaq.com - DW FAQs,
Tutorials & Resources
==================
"Hesadanza" <[email protected]> wrote in
message
news:fmgtdm$o0c$[email protected]..
> Can't figure this one out. It has worked fine in all
prior versions of
> Dreamweaver, but for some reason CS3 isn't liking my
image map hotspots.
>
> I can't select the hotspots in an image map in design
view and adjust
> their
> attributes in the properties window, or resize them in
the design view.
> When I
> select a hotspot, Dreamweaver immediately selects
"Multiple CSS-P
> Elements".
> So if I try to adjust the size of a hotspot it thinks
I'm dragging and
> dropping
> the "Multiple CSS-P Elements" and not the hotspot. I
can't edit the
> hotspot
> attributes either because the properties of the hotspot
do not stay open;
> it
> flashes to the properties of the "Muliple CSS-P
Elements."
>
> I've tried creating a new document and recreating the
image and hotspots,
> and
> they work fine. So it must be the way my image is coded,
nested in divs,
> the
> CSS applied to the image, or something that isn't
allowing me to adjust my
> hotspots.
>
> Any ideas?
>

Can you create an image map hotspot for an external URL in Dreamweaver CS6?

Can you create an image map hotspot for an external URL in Dreamweaver CS6?

Duplicate post: http://forums.adobe.com/thread/1338701?tstart=0

Unable to Create Image Map Hotspot

I've got a GIF image inserted into a RoboHelp HTML 8 topic and am trying to create multiple image map hotspots on the graphic. I successfully created the first hotspot (a rectangular one). When I try to create the second, the crosshair cursor displays, but when I drag with the mouse, it fails to draw a box outline. When I release the mouse, nothing happens.
This behavior is erratic. Sometimes, if I close and reopen the topic, I can draw a hotspot. Other times, if I complete exit and re-launch RoboHelp, I can draw a hotspot. Is this a bug, or is there something I can do to make it work more effectively?

Do you have many other hotspots in this topic?
Do you have other dynamic HTML in this topic (Related Topics, See Also, drop-down text, etc.)?
Have you been performing a lot of Cut/Paste operations prior to experiencing this issue?
Have you ever hit multiple keys in this topic and caused a RH crash?
RH places numerically identified data in the <HEAD> section for dynamic HTML entities, in addition to the related, numerically matched code that resides in the BODY section. At some point, these numeric matches can get corrupted (the old fat fingers causing a crash trick, for example). The only cure to that is to delete all the HEAD and BODY data, and then start over. Sorry.
Good luck,
Leon

Cannot select image map hotspot

Hi Folks --
I have a Dreamweaver file with an image that has 3 hotspots.
I changed the image and now need to change with size and placement
of the hotspots.
Dreamweaver Help says to use the Pointer Hotspot Tool to
select a hotspot, and then drag a hotspot selector handle to resize
the hotspot.
However, when I click on the hotspot using the pointer tool,
nothing happens - I see no selector handles, there is no outline
around the hotspot. All that happens is that the image is selected,
but not the hotspot.
My setup: Mac OS 10.3.9; Dreamweaver 8.0.2; PowerMac G5 Dual
2.0
Thanks in advance for any assistance.

Tooltips are what you're looking for.
http://jqueryui.com/tooltip/
Nancy O.

Does anyone know how to save / preserve image maps when updating graphics?

Hello all,
I'm currently working on a RH7 HTML project, which I've designed to be used in support of a software application.
Some of the application's dialogue boxes have quite complex multi-tabbed GUIs, so when it comes to describing their functionality, you often end up with a long list below the graphic image. What this means of course, is that the user is forever scrolling up and down to make reference between the GUI and the explanatory text.
I hit upon an idea I'd used previously, whereby I created popups to multiple image map hotspots. It works like a dream and the client and users really like the concept - but there's a snag (apparently).
Because the application is still in development. some of those GUIs are (and will continue to) change. No problem with that either - until I try and insert the updated graphic. Poof !! All my hotspots disappear . . .
Surely I'm not alone in trying this approach and there must be some way of preserving the hotspots?
Any suggestions?
Bob (in a UK time zone)

Hi there
It sounds like you are using the standard methods of inserting an image. Don't do that!
All you need to do in these cases is to use Windows Explorer to save the updated image using the same file name and replacing the former image. When you do this your other data will remain intact. If the new image is a different size, just right-click it inside the RoboHelp HTML editor and choose Reset Size. You also may need to tweak your hotspots if things shifted some.
Cheers... Rick
Helpful and Handy Links
RoboHelp Wish Form/Bug Reporting Form
Begin learning RoboHelp HTML 7 or 8 within the day - $24.95!
Adobe Certified RoboHelp HTML Training
SorcerStone Blog
RoboHelp eBooks

Problem creating several image maps (linking to different pdf files) RoboHelp 8

Hi,
I have a problem creating several image map hotspots (that link to different .pdf files), from the same image using RoboHelp 8 HTML (WebHelp project).
After compiling, the first image map hotspot created, opens the .pdf file correctly. Unfortunately, when clicking on the other image hotspots, I get an error " Cannot find file...<file path>... Make sure path or Internet address is correct".
All the pdf documents are located in the same folder within the project.
Can anyone help?

Have you added the target files as baggage?
See www.grainge.org for RoboHelp and Authoring tips
@petergrainge

Non rectangular hotspots for image maps

Hi everyone,
I've been stuck with this problem for a while. I'm trying to make an image map of sectors in a circle. I have the four coordinates of each sector. How do I determine if the the user has clicked inside a particular sector. Most of the examples for image maps I've seen are for rectangular hotspots. Is there a PointInRegion() method or anything like that??
Thanks a million for your help!

Found it out myself!!
There is a contains() method in the Polygon class that tests if a given point is contained within a polygon

Image Maps and Hotspots in a liquid layout?

I'm wondering if anyone is aware of a way to make an image map with hotspots conform to a liquid layout. Since each hotspots has its own coordinates, when the image moves (grows smaller or larger) those hospots no longer coincide with those specified coordinates on the map. I currently have a map with rollovers and clickable links (an image map with hotspots) at a fixed 987 pixels and I'd like to redo it so it's 1920 pixels and liquid. I've got the rest of my site working with a liquid layout, but can't figure out the image map thing and an exhaustive search online has proved unfruitful as have all my attempts. Here's a link to my current liquid site and the page where the image map is. Thanks.
http://christopherdeldridge.com/PhotoWorldMap.php

All things are possible but this one is right on the edge! You *could* do this by adjusting EACH coordinate dynamically but it would be a major beast given the number of hotspots you are using, and the number of coordinate pairs in each.
I wouldn't want to tackle this project.
Perhaps Flash is the answer here?

Black border around hotspots in Image map?

I have an image map in my HTML file that contains three
circular hotspots. When they're viewed in a browser, each one has a
black border around it after it's clicked on. I've seen other help
threads on the border problem talk about putting 'border:none" in
the IMG tag, but there's no IMG tag..it's an image map and border
is already set to "0". The code is below:
<map name="satelliteLinks">
<area shape="circle" coords="94,64,41" href="
http://gi.leica-geosystems.com/LGISub5x307x0.aspx"
target="_self" />
<area shape="circle" coords="297,51,48" href="
http://www.erdas.com/erdasCompanyNews.aspx"
target="_self" />
<area shape="circle" coords="517,59,43" href="
http://www.erdas.com"
target="_self" />
</map>
Any suggestions would be very helpful as my deadline to have
this complete is today!!

jgleica wrote:
> I have an image map in my HTML file that contains three
circular hotspots. When
> they're viewed in a browser, each one has a black border
around it after it's
> clicked on. I've seen other help threads on the border
problem talk about
> putting 'border:none" in the IMG tag, but there's no IMG
tag..it's an image map
> and border is already set to "0". The code is below:
> <map name="satelliteLinks">
> <area shape="circle" coords="94,64,41"
> href="
http://gi.leica-geosystems.com/LGISub5x307x0.aspx"
target="_self" />
> <area shape="circle" coords="297,51,48"
> href="
http://www.erdas.com/erdasCompanyNews.aspx"
target="_self" />
> <area shape="circle" coords="517,59,43" href="
http://www.erdas.com"
> target="_self" />
> </map>
>
> Any suggestions would be very helpful as my deadline to
have this complete is
> today!!
>
Thats the way the web works, its an accessibility feature, as
its how
you can tab around the page and see where the links are. Look
at any
website, click the link, and see what happens.
Steve

Global change for hotspots on image map

The image underneath my hotspots needed to be changed in
Photoshop. It's on all of the pages, and when the image was
replaced in Dreamweaver, I noticed that all of the hotspots that I
created manually in Dreamweaver were lost. How can I create
hotspots on just one of the pages and have it apply to all of the
pages? (I'm not using templates, by the way.)
I created slices on the image in Image ready, then exported
images and html, but I'm not sure how to incorporate and organize
everything in Dreamweaver.

jgleica wrote:
> I have an image map in my HTML file that contains three
circular hotspots. When
> they're viewed in a browser, each one has a black border
around it after it's
> clicked on. I've seen other help threads on the border
problem talk about
> putting 'border:none" in the IMG tag, but there's no IMG
tag..it's an image map
> and border is already set to "0". The code is below:
> <map name="satelliteLinks">
> <area shape="circle" coords="94,64,41"
> href="
http://gi.leica-geosystems.com/LGISub5x307x0.aspx"
target="_self" />
> <area shape="circle" coords="297,51,48"
> href="
http://www.erdas.com/erdasCompanyNews.aspx"
target="_self" />
> <area shape="circle" coords="517,59,43" href="
http://www.erdas.com"
> target="_self" />
> </map>
>
> Any suggestions would be very helpful as my deadline to
have this complete is
> today!!
>
Thats the way the web works, its an accessibility feature, as
its how
you can tab around the page and see where the links are. Look
at any
website, click the link, and see what happens.
Steve

Can someone help me and explain how to affect hotspot/image map with css rules or any other way?

i have problem with hotspot because its position cant be fixed to follow the proportion of the fixed background in different resoulutions.

You can't affect hotspots at all with css. Here are a couple different options you have available though...
You could try using multiple images that scale, linking each individual image, instead of hotspots.
You could also look into "responsive image maps" to get quite a few examples of jquery/javascript run image maps that can be scaled.
Depending on your image, (for example, if you are linking states on a map) you would be able to use SVG paths and link the paths with javascript.

Hi I'm trying to find a simple bit of freeware that I can use to image map for creating hotspots on a website. Any ideas?

Hi
I'm wanting to create a pretty complicated image map for a web page so it'll be lot's of polygons. Does anyone know of a good bit of freeware I can use that will help me work out the coordinates for the image maps?
Thanks
Neil

You could do this in any text or html editor.t I imaging you want a click and drag capability when selecting the areas of the image map. Try looking at some of these. https://www.google.com/search?q=image+map+create+apple+mac

Remove blue boarders on hotspot image maps?

Hi
Something changed in Safari recently and all my hotspot image maps now have a blue boarder when clicked: www.harveyregan.com
I'm afraid, as a web know-nothing, I just used Dreamweaver to make a site with tables, big jpegs and links/navigation through said hotspots. No Css links. Is there any way out there to correct these lines?
Cheers
DazzaHR

A friend helped me sort it using this code after the first body tag in the coding:
}area {
outline:none;
He did change the map name too I think but I just remember going through each page and copying the above into the code and it worked. Hope that helps

Image map with hotspots refuses working in Google Chrome

I made a page with an image map with a few mouse-over's to swap images. Everything is working fine, but the image map refuses working in Google Chrome. It's a little complicated to explain, so here my link. You can see the broncode if you want.
http://users.telenet.be/gepo/X_Tests/mouse_over.html
To see the misfunction, you need to open the link in Chrome.
Is there a workaround for Chrome ?

Thanks for the link. Clicking off the 'Overlap Items Below' button fixed the issue. The other tip, test your site on different platforms, mobile devices and browsers – it was working in Safari but not in Chrome .

Image-map hotspot coordinates as variables ?

Similar Messages

Maybe you are looking for