Image Mapping and Responsive Design
-
I am still looking for someone to help me with image mapping and responsive design. I want to be able to put an image map on my responsive site but need it to work responsively. Anybody have any ideas how. Here is the image map I am talking about. It is the map of Africa http://ifdcorg.wordpress.com/2scale/
The blog I need help with is: (visible only to logged in users)
-
-
I did try it yesterday but for some reason I couldn’t get it to work. I will check it out again. Thanks.
-
The image is being pushed off the right side of the window because there is a 300px right margin on the div element with the ID “columnfive” which isn’t removed in any of the @media rules for smaller screen sizes.
Either try adjusting it to what you want for each specific size or removing it for all smaller sizes and stop the image from resize like this (you’ll need to test it thoroughly!):
@media screen and (max-width:768px) { div#columnfive { margin-right:0; width:100%; } #columnfive img { min-width:536px; height:auto; } } -
I just tried it again. It resizes but a smartphone size it doesn’t work. Any suggestions?
-
Thanks Hallluke, I will work with what you are saying and try it. Yes, I continually test everything and that is how I know I am having trouble with this one :(
-
The think is I want it to resize. I want it to get small as the window gets smaller but I still want it to be responsive and an image map that works. That’s my challenge and my question
-
I’m not sure how image maps work when they’re resized automatically, have you tested it?
One thing you will need to think about is that on a touchscreen smartphone your users can’t hover over different parts of the picture and see the destination change like desktop users can with a mouse. Without knowing what to expect a user would have to click on the image and then step back several times to figure out what is going on. You might be better off displaying a regular list of text links for touch screen visitors or you could find they get frustrated.
-
You could create create two div elements in the HTML/text editor, one containing the image map and one containing the alternate list. If you give each div a different class you can hide and show them using media queries. So, as an example:
HTML:
<div class="bigscreens"> ...IMAGE_MAP_CODE_GOES_HERE... </div> <div class="littlescreens"> <ol> <li> <a href="URL_GOES_HERE">Some link text</a> </li> ...MORE_LIST_ITEMS... </ol> </div>and then in your CSS:
@media screen and (max-width:768px) { .bigscreens { display:none; } } @media screen and (min-width:768px) { .littlescreens { display:none; } }And (unless I’ve got it the wrong way around) the image map should be hidden at smaller screen widths and the list should be hidden at larger screen widths.
-
Ok. Thanks! I will try to figure this out and let you know what I find out. I appreciate your help!
-
Thanks! This seems to be working. Just playing with it to get it how I want it. Great idea and I appreciate it :)
-
No problem! It’s a tough thing to remember, I’m always getting carried away with things that I think look amazing or are really fancy without checking that it is going to serve a purpose and be useful for as many people as possible!
-
You are very right. It looks great on the big screen but can be extremely difficult to handle on little ones :)
-
I’ve done a little research and found this site, which has a demo of a CSS only responsive image map that seems to work well. On phones though things get very tiny and could be hard to use. You can use the web inspector in your browser to view the source code and see the CSS they used. Also, click through to the comments and read through them.
-
Thanks so much “thesacredpath.” I’m beginning to agree that small image maps may not be very user friendly. I will check into this! Thanks :)
-
You are welcome.
You could limit the image map, using a media query to screen sizes larger than, say, 768px and then have just the image for smaller screens/devices, but that would be an inconsistency in design that may not be the best solution. Still, it is good to see that someone figured this out. I’ve saved the code and link in my “amazing css tricks” file. :)
-
-
Hi hallluke,
Here is the page:
http://ifdcorg.wordpress.com/2scale/So I have two issues with the hidden divs. On portrait for iPad, neither the bigscreeen nor the littlescreen div is showing up. Landscape for iPad is working perfectly with bigscreen
Then for littlescreen, I can’t seem to center the div so it is in the middle of the screen. I know this is basic but I haven’t gotten the hang of centering divs correctly yet. Tips are greatly appreciated.
Thanks!
Heather
-
In your styles for littlescreens you have set the width to 400px, this is causing those list elements to not appear centred on smaller devices, try resetting it to 100%.
To fix the first issue I think you just need to change your media query so the smaller one is 1px less than the other (rather than both being exactly 768px). Try it out and let me know.
- The topic ‘Image Mapping and Responsive Design’ is closed to new replies.
WordPress.com Forums 