responsive composite images

[P_a_u_l]

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

[Jon Fritz · Accepted solution]

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_a_u_l · Accepted solution]

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

[Nancy OShea]

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!

[P_a_u_l]

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]

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.