Image map hotspots in SM?

Teetime

I would like to do a page similar to this one at Animoto. This would require several HTML hotspots. Is there a way to do these with one of my images in new SM?

Thanks,

Jerry

Teetime

My research on this indicates even if I could do this in SM, it wouldn't be responsive because hotspot are fixed coordinates and as such can't resize. So, is there a way to place a grid of photos (multi-photo content block) and have each photo link to a video or another page that would display in a popup window?

Thanks,

Jerry

rainforest1155

Hi Jerry,
You could add a html content block and see if the image maps feature of html described here would work for you. I've not tested it on SmugMug, but since it only uses basic html tags and css, it should work. Of course, the photo would be displayed in the specific size you specify for the map to work. So it wouldn't dynamically resize.

Note that the way image maps work in html, you'd have one photo that you split up with the image map. That means, you would have to create the collage of photos and save it as a single photo on your computer for uploading to SmugMug.

Teetime

Thanks Sebastian. Further reading has uncovered that some folks are using a jQuery plugin to do responsive image maps. Is that something I can do in SM?

rainforest1155

Hi Jerry,
What is described in the link is javascript code, which can't be used on SmugMug. You may only use basic html and css. Javascript code won't work.

Teetime

rainforest1155 wrote: »

Hi Jerry,
What is described in the link is javascript code, which can't be used on SmugMug. You may only use basic html and css. Javascript code won't work.

Ok. If I put several photos in the multi-photo content block, is there a way (through CSS?) to link each photo to a modal video player?

Or maybe there is a more straight forward way in SM to achieve what I want. Basically, I want to showcase three or so videos on a page that describes a particular video service I offer (e.g., Events, Web Commercials, etc.). I want the design to be responsive because google is now penalizing us in searches if we aren't mobile friendly. I can achieve this by putting three video content blocks on a page but there are two problems: 1) It is slow to load with the three videos, and 2) If you play one video and then click one of the other videos they both play at the same time. I would rather have a modal popup (as in the Animoto page in my original post) so that only one video can play at a time.

Any hope for this?