Member Avatar for serkan sendur

I needed an Image map. Since visual studio doesnt offer any tool for that, i tried to use dreamweaver's visual map editor. When i copied and paste the markup dreamweaver generated to the visual studio, it didnt work as i expected. So i downloaded a free evaluation copy of Mapedit 4.05 and created an image map via it. It was successfull when i carried the markup to the visual studio.

  • 2 Contributors
  • 1 Reply
  • 113 Views
  • 5 Months Discussion Span
  • Latest Post Latest Post by mgwalk

Dani AI

Generated

As noted, markup that looks fine in one editor can fail after being moved into another — often because something changed between the mapper output and the rendered HTML. Common root causes are a missing leading # on the usemap value, the <map> element lacking a matching name (and id for safety), server-side frameworks or design-mode editors rewriting attributes, or the image being scaled by CSS so the pixel coords no longer line up. ’s pointer to alternate tools is useful: dedicated mappers often produce cleaner, easier-to-debug markup than general WYSIWYG editors.

A minimal, correct example:

<img src="buttons.png" usemap="#siteMap" alt="Site navigation">

<map name="siteMap" id="siteMap">
  <area shape="rect" coords="0,0,80,40" href="/home" alt="Home">
  <area shape="rect" coords="80,0,160,40" href="/products" alt="Products">
</map>

Inspect the browser’s rendered source to confirm the usemap value and the <map> name/id arrived intact. Verify coords are based on the image’s natural pixel dimensions (CSS-resized images break fixed coords). For server-side pages, compare server-generated HTML to the mapper output — some frameworks change attributes or IDs. Add alt on each area and provide a text navigation fallback for accessibility.

For responsive layouts consider SVG hotspots or a small JS helper that rescales coords on resize; see the HTML map reference on MDN and a practical write-up on responsive image maps for implementation options and pitfalls (MDN: <map> element, ). Inspecting and comparing rendered HTML vs. mapper output is usually enough to find what an editor altered.

Member Avatar for mgwalk

you can try my free image map tool

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.