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

问题描述

我有一项任务要做，我无法找到要定位的解决方案或方向。

任务

此任务需要在图像全景背景中放置一些链接。这个图像里面有一些产品，链接需要在这些产品之上，考虑到屏幕可以更宽或不，所以图像背景可以拉伸，因此链接的位置也必须适应。

我已经尝试过

code>< map> 和< area> 标签，但与平板电脑的兼容性可能很棘手。另外一个很大的问题是，我可以指定其位置，但我不能放置任何图像或CSS这些元素。也许解决方案是用jquery？有任何想法吗？

HTML

 < div class =hotspots-image> 
< img class =imagesrc =IMAGEclass =imagemap/> 
 
< a class =hotspothref =＃> 
< span class =hotspot-icon> O< / span> 
< / a> 
< a class =hotspothref =＃> 
< span class =hotspot-icon> O< / span> 
< / a> 
< / div> 
  

所以热点是我认为将被定位绝对和在某个位置的链接。

提前感谢！

小调：

http://jsfiddle.net / uDCuB /

解决方案

一种可能的解决方案：

1. 响应图片的样式应为 width：100％; height：auto;


2. 使用百分比而不是像素计算热点位置**


3. 使用绝对相对定位

此处演示< a>

说到这里，如果你有一个图像和一个图像映射，你可以使用jQuery：

1. 将图片包装在相对定位的容器中


2. 通过解析 area image


3. 舍弃 usemap 属性和< map> / li>
   
4. 重新计算窗口大小调整位置

**例如：

• 如果您的图片宽度为1000像素和200像素。


• 热点坐标为（50,50） - （100,100）


• 对于图像映射，映射到（5％，25％） - （10％，50％）


• ，top：25％，width：5％，height：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屋！