Skip to main content
R
rick_eisner
Inspiring
October 21, 2019
Question

Problem with image files! Go to SVG?

  • October 21, 2019
  • 2 replies
  • 1410 views

I have a problem working with images and hotspots. The problem is that (one year ago) I used a png image with a lot of hotspots to connect to other sites. Now I've made the leap to using bootstrap 4. But the image/hotspot method doesn't work anymore. (Problems: An incredible number of problems!)

 

See the file at http://berkeleyartisans.com/list.html for last year's successful list.

 

Can someone tell me another way to get this working? (I've been seeing something about SVG files, but barely know what they are.) And, of course, I'm on a deadline...

 

Apparently this is a problem that Adobe won't support anymore.

 

I would appreciate any help anyone can give me.

Rick

This topic has been closed for replies.

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
October 21, 2019

PROBLEM #1 Old fashioned image maps are not suitable for responsive web designs because the hotspot coordinates invariably drift out  of register when images are rescaled. 

 

PROBLEM #2 You have mistakenly used an image of text where real text with custom web fonts would have been  a much better choice.   Images of text can't be indexed, resized, translated or copied and pasted into a calendar or e-mail app which would be desirable for an event announcement.   I think you just need to ditch the whole image thing and use simple, sensible text with a few Bootstrap buttons linked to the relevant websites.  

 

Bootstrap buttons https://www.w3schools.com/bootstrap/bootstrap_buttons.asp

 

For future projects, below is a JS Fiddle of a responsive SVG image map.

https://jsfiddle.net/NancyO/6k3v4ge1/13/

Nancy O'Shea— Product User & Community Expert
    R
    rick_eisnerAuthor
    Inspiring
    October 21, 2019

    Thanks to Jon & Nancy for responding.

     

    So, just checking, isn't there another way to export the file and set up an image map for that file? It seems Jon's explanation would be workable (jQuery). But Nancy's explanation Problem #1 makes that sound unworkable. And her explanation #2 seems to change the whole idea of the page.

     

    My entire purpose here is to export parts of an image from Illustrator and put them into Dreamweaver. Is there another way to handle the export so areas can be tagged (somehow)? It seems an SVG could be a solution. But then areas within it would have to be tagged?!

     

    I'm just hoping it can be done so it will appear the same as last year. (Don't confuse the readers!)

    Rick

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    October 21, 2019

    Desperation requires that I get something up now.

     

    So is there a "good enough for today" way to get this up and working? I'm still requesting help with SVG (because that's what appears to work).

     

    Rick


    Show us a screenshot of your image.

     

     

    Nancy O'Shea— Product User & Community Expert
    Jon Fritz
    Community Expert
    Jon FritzCommunity Expert
    Community Expert
    October 21, 2019

    It's not a "problem that adobe won't support anymore" it's a problem they've never supported. The customer service department is really only set up to deal with installation problems, account issues and billing. They don't know how to code for the most part, and there's nothing built into DW that can do this for you.

    Bootstrap is a responsive framework, standard HTML Image Maps are not responsive in any way, so the two don't gel. Probably the easiest/fastest way to fix your issue would be to find a third party javascript to make responsive image maps.

    This one uses jQuery: https://www.jqueryscript.net/other/jQuery-Plugin-For-Responsive-Image-Maps-image-map-js.html but there are a ton of them out there with various levels of support/instruction to help get you going.

      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices