Skip to main content
P
P_a_u_l
Participant
December 20, 2019
Answered

responsive composite images

  • December 20, 2019
  • 2 replies
  • 655 views

Greetings,

I am a visual artist not a web designer. I have been using Dreamweaver for many years to create interactive composite imagery.  My coding abilities are rudimentary, and I’ve learned by trial and error and I am being made aware that the tools and techniques I am using are archaic or obsolete.

I use slices exported from Photoshop to cut an image into individually linked composite components. These hot linked areas must  follow the contours of forms within the image. Since final web page must be responsive, I cannot use “hotspots” to link these areas of the image, the only option I have found was to slice the image in Photoshop and link them separately, sometimes there are dozens of these components.  Of course, the pieces have to be perfectly aligned, even 1/10th of a percentage off shows up as a line. I am placing the components using percentage scaled and positioned AP divs.

Here is an example of a space http://uqbar.ca/19/DHC_451_1.html

and here is an example of an object http://uqbar.ca/19/Macchina/EX2MacchinaCover.html

Slices are obviously on the way out in Photoshop, they’ve been relegated to a legacy export. Photoshop html export is not up-to-date (html 4) and you have to go back to DW CS 6 to get an automatic converter to html 5. I can see the writing is on the wall for my process.

Is there another way to do what I am doing?  

Any help would be greatly appreciated.

Thank you,

Paul

 

This topic has been closed for replies.
Correct answer P_a_u_l

The plug in demo appears to be perfectly alligned from minimum to maximum window sizes. This will work fine for me, and I'm pretty sure that any amount of code I might have to learn will not be as time consuming as calculating and  converting the max width and position from pixels to percentages of the dozens of AP divs of each page.

 

Thanks for your help.

Paul

 

 

2 replies

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
December 20, 2019

Actually image slices have not been in widespread use on the web for about 25 years.  I can't  remember the last time I used them or why we ever thought they were a good idea.  

 

Below is a working example of a responsive "image map" made with SVG shapes over a raster image.  The hotspots are oversized to facilitate easier finger tapping from a touch screen device which will soon be the majority of users.

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

 

Animated and interactive web content can be created in Animate CC,  however I would stay away from FLASH as that's a dead web technology.  Instead, output to HTML5 canvas or WebGL.

 

 

Happy coding!

 

 

 

Nancy O'Shea— Product User & Community Expert
    P
    P_a_u_lAuthor
    Participant
    December 22, 2019

    I guess until you hit a wall even the most prehistoric of processes can be the most comfortable, even if they are also time consuming. My entrance into html was through photoshop so it was a logical path, since then I’ve been flying by the seat of my pants.

     

    But I am interested in migrating to the third millennium and thank you for showing me the way.

     

    Since I am a long way from being able to directly code mathematical coordinates for vector shapes as the code in your example shows, I would greatly prefer to use a visual interface that will allow me to trace over the image. So far, the only visual interface I have been able to find is the online image map at https://www.image-map.net/ . This interface doesn’t appear to zoom in, and since many of my grounds are scrollable panoramic spaces several thousand pixels wide and the hot shapes extremely small, it’s a little hard to be precise.

     

    Is there another option I missed to be able to generate code for drawn shapes? Is there any image map software I can purchase, or any way of converting vector shapes from photoshop into image map coordinates?

     

    Is this why you mentioned Animate CC. Will this program create shapes I can convert to vector coordinates for an image map?

     

    Thanks for your help

     

    Paul

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 22, 2019

    You can make vector graphics and export them to SVG from Illustrator.  But you'll need to open the SVG code in DW to manipulate it manually.

     

    Animate CC also supports vectors but I wouldn't use it to make an image map.  That would be like swatting flies with a sledgehammer.

     

     

    Nancy O'Shea— Product User & Community Expert
      Jon Fritz
      Community Expert
      Jon FritzCommunity Expert
      Community Expert
      December 20, 2019

      Not without learning a bit of code I'm afraid.

      This can be done with an image map, controlled by javascript, on a responsive image, however there's nothing built into DW that will keep the hot spots from drifting.

      This jQuery Plug-in will do the trick though: http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html

      You basically build an image map (from one singular image, rather than slices) in DW, link to the jQuery library, and the plug in .js file at the link, add the "document.ready" function at the bottom of your code as directed and you're done.

        P
        P_a_u_lAuthorCorrect answer
        Participant
        December 20, 2019

        The plug in demo appears to be perfectly alligned from minimum to maximum window sizes. This will work fine for me, and I'm pretty sure that any amount of code I might have to learn will not be as time consuming as calculating and  converting the max width and position from pixels to percentages of the dozens of AP divs of each page.

         

        Thanks for your help.

        Paul

         

         

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