Set links spread out in responsive image map

[FabioM]

Hi there

I’m trying to have several links spread out in a responsive image map and making them “stick” in the same place in mobile view as they were on desktop view.

As i run from solution to solution, hopefully i can find a solution here at css-tricks. I’ve already tried to use image mapping along with the ImageResizer plugin to calculate new coords when there is a change in browser size, but i can’t find a way to have the links stay in exactly in the same place as they were before.

Here you can see an example of what i’m trying to accomplish: http://jsbin.com/qavajijoco/1/edit?output

As you can see, there is a blue dot which transitions to a bigger size and shows a video when the mouse hovers and if you resize the browser it will be in a different place. There will be more blue dots like this on the map but before i do that, how can i keep this blue dot in the same place?

[giudev]

Hi,

I don’t know if I got your question, but I’d use a different approach.
The map container should have position relative, its width and height should be given from the inner image (the map).
So don’t set the map as background image.
Then just place the blue dots with position absolute like you did, but using percentage values.

Here you can find what I mean:

http://codepen.io/giudev/pen/aZoewV

[FabioM]

giudev thank you very much. It was exactly what i was looking for. Just to think this was an easy solution after trying several ones…

But all was not well since i ran into problems, because when the navigation menu was shown, the background image jumped a bit below. I had to change the position to fixed and set the z-index to -1.

The problem i have now is about the embeded youtube iframe video i inserted in the first div…when the mouse hovers it doesn’t show the video. Could this be because Div’s are not allowed inside span (or inline) elements?

I’ve made a new Jsbin here http://jsbin.com/xojonucado/edit?html,output

[giudev]

Check both JS and youtube link

$("body").on("mouseenter","#video-wrapper1",function(){              
$(this).children("#video1").css({display:"block",position:"relative",top:"5px",right:"120px"}); //Show video on hover
playVideo();
 });

#video-wrapper1 is not defined in your HTML
And the video URL looks broken
https://www.youtube.com/embed/fVsONlc3OUY-VE

[FabioM]

Yes, i’ve already solved the problem.

Instead of using a Div inside a span as that was giving an error, i replaced the span for a div element so the video Div is now inside another Div.

Everything is working well right now so i can go to the next phase of the project which is building a new augmented reality application.

Thank you very much again for your help giudev.

[FabioM]

By the way, i forgot to tell you that the videos and the crowdfunding iframes aren´t responsive.

Here is an updated jsBin http://jsbin.com/xadonuhude/edit?html,output

The iframes are inside the div #wrapper, so no matter if i give a width/height of 100% , auto or any other percentage, they never resize.

Is there any way to solve this?

[giudev]

to have it responsive, just use media queries to target your iframes
In this case, if you want to go for percentage values, remember that the percentage is relative to its parent/container and now the iframe container has ho width

[Author]

Posts