Member Avatar for kavithakesav

Hi,

I am using map tool in DW whenever i need all time its working very fine, but this is the first time i am getting some problem with that? The problem is

for a image i m giveing rectangular Hotspot tool for some portion, that is coming very fine? But when i see in explorer that Hotspot is not coming where i given, its coming in some other part?

Any one has any idea????????????????

  • 3 Contributors
  • 2 Replies
  • 96 Views
  • 6 Days Discussion Span
  • Latest Post Latest Post by MJ Pieterse

Dani AI

Generated

Summary tied to the thread: reported a Dreamweaver hotspot that looks right in the editor but appears offset in the browser. Responses from and pointed to layout/browser and file-reference issues. The technical root to add here is concrete: HTML image-map coords are defined in the image's natural pixel space. If the image is displayed at a different size (CSS scaling, responsive rules, thumbnails, or a different image file), the coords values will no longer line up with the visible pixels.

Minimal examples and a practical fix:

<img src="photo.jpg" usemap="#mymap" alt="">
<map name="mymap">
  <area shape="rect" coords="34,44,270,350" href="...">
</map>

When an image is resized by CSS or the layout, the simplest reliable approaches are:

  • keep the image at its original pixel dimensions when using static coords, or
  • use a scaling script that recalculates coords from the image's naturalWidth/naturalHeight to the displayed width/height on load and resize (sample code pattern shown below).
// store original coords, compute scaleX/scaleY, update area.coords
function scaleMap(img){ /* see post for full code pattern */ }
window.addEventListener('load', function(){ /* call per image and on resize */ });

Quick troubleshooting checklist (builds on points from and ):

  • Confirm the served image file and dimensions match the one edited in Dreamweaver.
  • Verify usemap="#name" matches <map name="name"> exactly.
  • Temporarily disable responsive CSS (max-width, transforms) to see if coords align.
  • Ensure a standards DOCTYPE (for consistent layout modes).
  • For responsive sites, prefer an SVG overlay or a coords-scaling script (examples and plugins exist).

Authoritative references: MDN on HTML map element (developer.mozilla.org) and a commonly used responsive image-map helper (github.com/stowball/jQuery-rwdImageMaps).

Recommended Answers

All 2 Replies

Member Avatar for MidiMagic

Absolute positioning is different in different browsers. Do not use absolute positioning.

Member Avatar for MJ Pieterse

agreed! also make sure that you are not referencing a specific point in your site that is not availalbe...for example, if you have been working on multiple sites, that when you added that hot spot, that you were not working on a 'different site' and dreamweaver is referencing that point.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.