Dreamweaver with Image Maps [Branched to new topic]

[gunzelguy]

I am in design view, I created one hotspot and now the map tools are gone. If I click on the hotspot I get a hotspot dialog in properties, if I click away from the hotspot but still on the image in properties I get Image ID Src box, link box etc but no map tools, how do I get them back? Just to repeat, I am in design view.

[Nancy OShea]

@gunzelguy.

This is an old topic from 2019 that has already been correctly answered.  I'm moving this to a new topic for you.

1. Image must be in the foreground and selected.  Hotspots won't work in absolute positioned parent containers. 

2. More importantly, ordinary Image Maps don't work well in responsive layouts.  The hotspot coordinates invariably fall out of register when the main image is rescaled to fit smaller or larger devices, making the links unusable.

In 2023 and beyond, you need solutions that work on ALL devices: extra small, small, medium, large, extra larger and all points in between.  Conventional image maps from the 1990's can't do that.

Ask yourself why you need an image map.  Can you do this any other way with separate images?   If an image map really is your ONLY option, use an SVG map instead.

See example below.

Hope that helps.

[gunzelguy]

Hi Nancy, I've taken your advice and ditched the image map and put the info into a fluid container. I realise this is a seperate subject but I'd like to highlight each row as you hover but cannot get the hover to work using CSS. Here is the page.

https://www.victorianrailways.net/grades/grade_maps/grades_north_midland.html

I'd just like each row to have a color as people hover on the line.

[Nancy OShea · Accepted solution]

See Bootstrap 3 Tables

https://www.w3schools.com/bootstrap/bootstrap_tables.asp

See example below with Hover Tables.

https://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_table_hover&stacked=h