Question

我有一个地区地图,使用直线坐标,以突出显示所占领的地表。当你接手时,将显示公司的名称。足够容易。

我想做的是,利用这些坐标,通过每个桌子的四级协调,在直观参考方面,它具有更黑暗的不透明性。计算每张桌上/上岸值以及计算出宽度和高值非常容易。我不知道如何把这些价值观带在 j子里添加这一特征。这里有一部法典。

<img src="images/floor_plan_2011_small.png" alt="" usemap="#fp" />
<map name="fp" id="fp">
    <area shape="rect" coords="419,264,439,285" href="javascript://" title="Booth 73" alt="Booth 73" />
    <area shape="rect" coords="141,366,164,385" href="javascript://" title="Booth 62" alt="Booth 62" />
    <area shape="rect" coords="119,385,142,402" href="javascript://" title="Booth 64" alt="Booth 64" />
</map>

Answer 1

• 绘制图像地图。毫无意义:

<div class="map">
    <img src="images/floor_plan_2011_small.png" />
    <a style="top:419px; right:264px; height:20px; width:21px" href="javascript://" title="Booth 73" />
    <a style="top:141px; right:366px; height:23px; width:19px" href="javascript://" title="Booth 62" />
    <a style="top:119px; right:385px; height:23px; width:27px" href="javascript://" title="Booth 64" />
</div>

在您的风格上加上这一点,并再次做:

.map {
    position: relative;
}
.map a{
    position: absolute;
    display: block;
    background: black;
    opacity: 0.1;
}
.map a:hover{
    opacity: 0.5;
}

Answer 2

如果你在图像上添加一个集装箱,你可以通过 Java本(或CSS)对图像进行透视:

<span id="img-span"><img src="images/floor_plan_2011_small.png" alt="" usemap="#fp" /></span>
<map name="fp" id="fp">
    <area shape="rect" coords="419,264,439,285" href="#" title="Booth 73" alt="Booth 73" />
    <area shape="rect" coords="141,366,164,385" href="#" title="Booth 62" alt="Booth 62" />
    <area shape="rect" coords="119,385,142,402" href="#" title="Booth 64" alt="Booth 64" />
</map>

JS-

//cache the span wrapper so it only has to be selected once
var $imgSpan = $( #img-span );

//bind a mouseleave event handler to the image map so when the user moves the cursor away from the image map the overlays will be removed
$( #fp ).on( mouseleave , function () {
    $imgSpan.children( .overlay ).remove();

//bind a mouseenter event handler to the image map area tags to create an overlay
}).children( area ).on( mouseenter , function () {
    var $this  = $(this);
    $imgSpan.children( .overlay ).remove()
            .prepend( <div class="overlay" style="top:   + $this.css( top ) +  ; left:   + $this.css( left ) +  ; width:   + $this.css( width ) +  ; height:   + $this.css( height ) +  ;"></div> );
});

CSS-

#img-span .overlay {
    position : absolute;
    opacity  : 0.6;
    filter   : alpha(opacity=60);
    z-index  : 1000;
}

注:on() is new in jQuery 1.7 and in this case is the same as .bind().



说明:我从未使用过图像地图,因此,我不敢肯定,读到<条码><>>>>>/条码>/条码>。 风格特性是可能的,如果是的话,你只能获得<条码>coordsvide($.attr(coords ),并将之纳入适当的信息。

友情链接