Member Avatar for w33n

A client needs me to change the size of an image, but the hotspots obviously stay the same size. Is there a way to increase the size of them while constraining the proportions so I don't need to go and reshape them all over again?

b

  • 2 Contributors
  • 2 Replies
  • 133 Views
  • 5 Days Discussion Span
  • Latest Post Latest Post by w33n

Dani AI

Generated

Builds on 's note about editing the map code and on 's followup: Dreamweaver will adjust an image map’s coordinates when the image is resized from inside the editor, but that behavior only applies while the image and map are edited together in the page. Two practical points that are often missing from short answers here:

  1. Verify what changed: after resizing in Dreamweaver, open Code view and confirm the <map>/<area> coords updated and the <img> width/height reflect the new size. A typical structure looks like this:
<img src="photo.jpg" usemap="#mymap" width="600" height="400" alt="...">

<map name="mymap" id="mymap">
  <area shape="rect" coords="10,20,100,200" href="...">
</map>
  1. When it breaks and how to fix it: if the image is scaled later by CSS (percent widths for responsive design), replaced by a different source file, or resized outside Dreamweaver, the pixel coords in <area> no longer match the displayed image. For responsive pages, use a small script that rescales map coords on resize instead of editing every area manually. Two widely used solutions:

Example initialization (after including the library):

$('img[usemap]').rwdImageMaps();
// or
imageMapResize();

Final tips: keep a backup copy before bulk edits; redraw complex hotspots on the final-size image if coordinates look off; test hotspots in a browser (and on touch devices) after any size change.

Recommended Answers

All 2 Replies

Member Avatar for MJ Pieterse

as far as i'm aware, you need to change it either manually, or with the code. the hotspot is (although part of the image) a seperate item on it's own with the code normally situated at the bottom of your page. it's like trying to reshape multiple images on your webpage at the same time.

Member Avatar for w33n

I actually figured it out. I simply changed the size of the image IN Dreamweaver and it changed the size of the hotspots along with it. Thank you for your reply.

B

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.