• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Images Maps and Hotspots

New Here ,
Jan 05, 2021 Jan 05, 2021

Copy link to clipboard

Copied

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

Views

123

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 05, 2021 Jan 05, 2021

Copy link to clipboard

Copied

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?

 

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Jan 06, 2021 Jan 06, 2021

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 06, 2021 Jan 06, 2021

Copy link to clipboard

Copied

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 PadRadius 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 O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Jan 06, 2021 Jan 06, 2021

Copy link to clipboard

Copied

LATEST

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/

Nancy O'Shea— Product User, Community Expert & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines