Question

所以我使用这个image map plugin，这样即使我调整窗口大小或放大，该区域也会固定在图像上。

我想制作我的代码，当你点击它时，它会调用指定的函数。到目前为止它工作（函数被调用）但由于某种原因，当我将此实现代码添加到我的<script>时，它将该区域更改为更小的大小。当我将其移除时，该区域将恢复原始大小。

$(function () {
            ImageMap('img[usemap]');
            //check for plugin implement
            alert("ImageMap plugin enabled");
        });

我只是删除了上面的代码，因为当我调整窗口大小时，显然该区域没有调整大小，但这只是一个要测试的示例代码。更奇怪的是，当我将模板用于我的实际代码（只是相同的代码但图像和文本内容已更改）时，我的图像地图甚至无法正常工作。 < / p>

这里是完整的代码（更改在右边的第三张图片上）：

＆＃13;

            $(function () {
                ImageMap('img[usemap]');
                //check for plugin implement
                alert("ImageMap plugin enabled");
            });

            function selectASC() {
                alert("Hello");

            }

＆＃13;

            body {
                background-color: #CFFFE7;
                overflow: hidden;
            }

            #master {
                display: table;
                position: relative;

                top: 0;
                bottom: 0;
                left: 0;
                right: 0;
                margin: 30px 70px 60px 70px;

                height: 100%;

            }

            p {
                font-weight: bold;
                font-size: 20px;
                font-size: 2vw;
                font-family: sans-serif;
            }

            #diagrams {
                background-color: lightblue;
                text-align: center;
            }

            .logo-image {
                vertical-align: middle;
                display: table-cell;

            }

            .logo-image img {
                max-width: 90%;
                max-height: 90%;
            }

＆＃13;

<div id="master" class="container">
            <p>This is a very long sentence. This is a very long sentence. This is a very long sentence.</p>
            <p>
                This is a very long sentence.
                <br/> This is a very long sentence.</p>
            <div id="diagrams" class="container">
                <div class="wrapper clearfix">
                    <div class="logo-image">
                        <img id="ssc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
                    </div>
                    <div class="logo-image">
                        <img id="msc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" />
                    </div>
                    <div class="logo-image">
                        <img id="asc" src="http://www.immersion-3d.com/wp-content/uploads/2015/12/image-placeholder-500x500.jpg" alt="Placeholder Image" usemap="#image-map"/>
                        <map name="image-map">
                            <area coords="0,0,338,338" alt="" shape="rect" title="test" href="#" onclick="selectASC()">
                        </map>
                    </div>
                </div>

            </div>
        </div>

＆＃13;

我的示例代码和实际代码的结果是不同的，我确定我的html / css代码不会影响结果，因为它们相同但只是不同的图像和文本内容。

使用插件更改了图像映射区域

0 个答案: