链接在响应的图像背景的某个位置 [英] link on certain position of an image background which is responsive

问题描述

我有一项任务要做，但我无法找到解决方案或目标方向.

任务

此任务需要在图像完整背景中定位一些链接.这个图片里面有一些产品，链接需要在这些产品的顶部，考虑到屏幕可以更宽或不可以这样图像背景可以拉伸，因此链接的位置也必须适应.知道如何做到这一点吗?

试用

我已经尝试过 和 标签，但与平板电脑的兼容性可能很棘手.还有一个很大的问题是我可以指定它的位置，但我不能在这些元素上放置任何图像或 CSS.也许解决方案是使用jquery?有任何想法吗?

HTML

<img class="image" src="IMAGE" class="imagemap"/><a class="hotspot" href="#"><span class="hotspot-icon">O</span></a><a class="hotspot" href="#"><span class="hotspot-icon">O</span></a>

所以热点是我认为将被定位在绝对位置和特定位置的链接.也许您还有其他意见或方向要遵循?

提前致谢！！！

小提琴:

http://jsfiddle.net/uDCuB/

解决方案

一种可能的解决方案:

1. 响应式图片的样式应为 width: 100%;高度:自动；
2. 以百分比而不是像素来计算热点位置**
3. 使用绝对相对定位

此处演示

话虽如此，如果你有一个图像和一个图像映射，你可以使用jQuery来:

1. 将图像包装在相对定位的容器中
2. 通过解析图像地图中的area标签来创建绝对定位的链接
3. 丢弃 usemap 属性和 标签
4. 在调整窗口大小时重新计算位置

** 例如:

• 如果您的图片宽 1000 像素，高 200 像素
• 热点坐标为 (50,50) - (100,100)
• 对于图像映射，这映射到 (5%,25%) - (10%,50%)
• 对于绝对定位，此映射到左侧:5%，顶部:25%，宽度:5%，高度:25%

I've got a task to do and I'm not able to find a solution or direction in which to target.

Task

This task needs some links positioned in a image full background. This image has some products inside it and the links need to be on top of these products, taking into consideration that the screen can be wider or not so the image background could stretch and therefore the position of the links would also have to adapt. Any idea how to do this?

Tryout

I tried already the <map> and <area> tags but the compatibility with tablets can be tricky. Also a great issue is that I can specify its position but I cannot place any image or CSS on these elements. Maybe the solution is with jquery? Any ideas?

HTML

<div class="hotspots-image">
    <img class="image" src="IMAGE" class="imagemap"/>

    <a class="hotspot" href="#">
        <span class="hotspot-icon">O</span>
    </a>
    <a class="hotspot" href="#">
        <span class="hotspot-icon">O</span>
    </a>
</div>

So the hotspot is the links which I suppose would be positioned absolute and in a certain position. Maybe you have other inputs or directions to follow?

Thanks in advance!!!!

Fiddle:

http://jsfiddle.net/uDCuB/

解决方案

One possible solution:

1. Responsive image should be styled as width: 100%; height: auto;
2. Calculate the hotspots position in percentages instead of pixels**
3. Use absolute-relative positioning

Demo here

Having said that, if you have an image and an image map, you can use jQuery to:

1. Wrap the image in a relative positioned container
2. Create absolutely positioned links by parsing area tags in image map
3. Discard usemap attribute and the <map> tag
4. Recalculate position on window resize

** For example:

• If your image is 1000px wide and 200px tall
• Hotspot coordinates are (50,50) - (100,100)
• For image maps this maps to (5%,25%) - (10%,50%)
• For absolute positioning this maps to left: 5%, top: 25%, width: 5%, height: 25%

这篇关于链接在响应的图像背景的某个位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！