Images Maps and Hotspots

[Sara5E6E]

Hi Everybody,

I have a large image in Dreamweaver, I want to make clickabnle links, to jump to a different parts, of the same image. I am using hotspots, and I can link to other pages, is there a way I can use this technique to move around my image, using coords for example,

Many thanks,

Sara

[Nancy OShea]

Hi @Sara5E6E,

Why do you think you need an image map? 

Can you show us an online example of what you mean?

Nowadays nobody uses image maps because they're not responsive.  The hotspot coordinates drift out of register when the image is rescaled to fit smaller devices.  So it's not a good solution in responsive layouts. 

A simple image gallery can be achieved very easily without image maps. Is that what you're looking for?

[Sara5E6E]

Hi Nancy,

Thank you for your reply, here is my work in progress:
http://recipesforbakingbread.co.uk/LinksandConnections.html

I want to be able to click on each title, to move to its associated link. Here, I am using internal links, and target ID’s. These work well to navigate up and down my page, I’m unable to make them consistent when navigating from left to right. Any advice will be appreciated,

Many thanks,

Sara

[Nancy OShea]

I'm afraid the purpose if this is lost on me.  From a UX standpoint, it fails.  Why?  Because site navigation is supposed to be simple and easy to access, especially for people on touch screen devices. 

Linked areas must be sufficiently sized and spaced away from other links so that an average adult finger can easily reach them. See screenshot.

Radius of Adult Finger Tip Pad

Your diagram contains too much information in a cramped space thus it's not suitable for what you have in mind. 

[Nancy OShea]

In addition, your document contains many critical code errors which makes it invalid for use on the web.

https://validator.w3.org/nu/?doc=http%3A%2F%2Frecipesforbakingbread.co.uk%2FLinksandConnections.html

In order to build websites, you really do need a working knowledge of HTML, CSS and to some extent JavaScript code. Without understanding code, it's unlikely you'll get the results you're hoping for.  See links below.  Read the chapters, do code exercises and take quizzes at the end.
- https://www.w3schools.com/html/
- https://www.w3schools.com/css/
- https://www.w3schools.com/js/