Mobile Friendly Website

CSSPLAY

Doing it with style

Responsive Image Map COMMENTS

Welcome to my Comments Pages

Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.

So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.

If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.

Post a comment


Current posts

Flo:-
You made my day, very coool!!!
(24.08.2013, 12:23)

Didier:-
Very impressive !

Thanks !!
(13.03.2014, 11:51)

Conner:-
Simple, cute, fun demo, right on Stu!!!
(24.04.2014, 00:25)

Brittney:-
Hi Stu,
I am wondering how you got your rollover hotspots to be responsive?
Your help will be much appreciated!
Thank you.
Brittney
(28.04.2014, 16:42)

Stu:-
Give the map image a position:relative, use position:absolute for the hotspots but use percentage positioning and sizing for these hotspots so that they resize and stay in place when the map resizes.
See the page source code.
(28.04.2014, 20:35)

Marks:-
As simple as brilliant...
Thanks for sharing!
(05.05.2014, 14:53)

steve luiting:-
Wow. It was so simple that I find it ironic to see all of these programmers writing JQuery to do this. Now if only Adobe would add this into DreamWeaver. I'm wondering if they even support it anymore with how behind they are in that program.
(14.07.2014, 14:46)

Roger:-
Stu,

Is there a way to make this solution work for polygon images as well?
(25.07.2014, 20:50)

Stu:-
If you can generate the polygon shape using just CSS then you can use this method with polygon images.
(25.07.2014, 21:35)

Alex:-
My client says it doesn't work on his Mac Pro. He is using Firefox. I checked it on my windows PC in IE, Firefox and Chrome and there no issues whatsoever. Works great, but I just need to make sure it's compatible with Mac Pro systems
(14.08.2014, 22:02)

Stu:-
I do not have a Mac Pro but do have a Mac Book Air and this demo works on this platform using Firefox so would assume that it works on all Macs.
If you are working for clients then you should have all the basic platforms for testing.
(15.08.2014, 09:03)

Anonym:-
Thank you Stu. I think it's a retina equipped Mac Pro that can be causing the issue. Not exactly sure how to simulate mac Pro on my PC desktop. Checked some forums, but still in oblivion.
(15.08.2014, 18:12)

Adrian:-
Thanks a lot for your solution!
(01.10.2014, 18:01)

Allie:-
This is probably a very noob question, but how does one calculate the percentage positions for their image? I would love to try this but am stuck.

Thanks
(09.11.2014, 15:33)

Allie:-
Okay I managed to work out the very simple math from my first question, but here's another:
In my original image map I had a secondary photo pop up on hover (and still had hotspots link elsewhere). The code was as follows:
position:relative;
display:block;
width:256px;
left:70px;
top:-150px;

How would I achieve the same, offset hover image with your % workaround?
(15.11.2014, 20:05)

Arpita Patel:-
Very simple and useful...
(12.02.2015, 19:53)

Brett:-
Great solution.
Saved me a major headache and time so many thanks :)

One question though, is it possible to create a rollover in conjunction with this method for each individual rollover?
I tried making the image a background image of the imageMap div but that didn't work :(
My idea was to create a hover like this:
a.p1:hover {background-image:url(../img/world-map-north-america.gif);}

I'm probably way out but any help would be great.

Actually, just seen I could look at expanding on the hotspots hover .. doh!

I'll have a play and see what I can stumble onto :)

Thanks again.
(27.02.2015, 10:30)



Post

Your comment:

Your Name:

Stu's First Name - 3 letters (required)

Thanks to Alex for this script.

Please enter your comments for this site page.
Please note that all posts are moderated.

Posting rules

HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'http://'

Support CSSPLAY

Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.


CUSTOM SEARCH

Facebook Twitter rss feed Facebook Fan Page