个人中心
gpt4 book ai didi

javascript - 调整包含圆圈的图像映射

转载 作者：太空狗 更新时间：2023-10-29 15:41:08 41 4
gpt4 key购买 nike

我正在尝试映射下图中的所有数字，我已经完成了。但现在我想根据窗口的宽度动态调整图像和 map 的大小。

enter image description here

这是相关的 html:

    <html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>20 Keys</title> 

    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
    <link rel="stylesheet" type="text/css" href="css/styles.css">

    <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
    <script src="js/script.js"></script>

</head> 

<body> 
<!-- Start of first page: #home-->
<div data-role="page" id="home" data-theme="b"> 

    <div data-role="header">
        <img src="images/20keyslogo.jpg" width="100%">
    </div><!-- /header -->

    <div class="white" data-role="content" data-theme="b">  

    <img id="imageMaps" src="images/20keys.jpg" usemap="#20Keys" width="100%" alt="Select Key" border="0"/>
        <map id="20Keys" name="20Keys">
            <area shape="circle" alt="Key 1" title="" coords="41,54,31" href="" target="" />
            <area shape="circle" alt="Key 2" title="" coords="41,543,31" href="" target="" />
            <area shape="circle" alt="Key 3" title="" coords="538,543,31" href="" target="" />
            <area shape="circle" alt="Key 4" title="" coords="499,293,31" href="" target="" />
            <area shape="circle" alt="Key 5" title="" coords="484,213,31" href="" target="" />
            <area shape="circle" alt="Key 6" title="" coords="79,293,31" href="" target="" />
            <area shape="circle" alt="Key 7" title="" coords="141,145,31" href="" target="" />
            <area shape="circle" alt="Key 8" title="" coords="483,374,31" href="" target="" />
            <area shape="circle" alt="Key 9" title="" coords="209,99,31" href="" target="" />
            <area shape="circle" alt="Key 10" title="" coords="290,504,31" href="" target="" />
            <area shape="circle" alt="Key 11" title="" coords="289,83,31" href="" target="" />
            <area shape="circle" alt="Key 12" title="" coords="370,99,31" href="" target="" />
            <area shape="circle" alt="Key 13" title="" coords="370,488,31" href="" target="" />
            <area shape="circle" alt="Key 14" title="" coords="95,213,31" href="" target="" />
            <area shape="circle" alt="Key 15" title="" coords="438,442,31" href="" target="" />
            <area shape="circle" alt="Key 16" title="" coords="438,145,31" href="" target="" />
            <area shape="circle" alt="Key 17" title="" coords="95,374,31" href="" target="" />
            <area shape="circle" alt="Key 18" title="" coords="141,442,31" href="" target="" />
            <area shape="circle" alt="Key 19" title="" coords="209,488,31" href="" target="" />
            <area shape="circle" alt="Key 20" title="" coords="538,45,31" href="" target="" />
        </map>
        <p><a href="#two" data-role="button">Interactions between any two keys</a></p>  
        <p><a href="#about" data-role="button">About 20 Keys</a></p>    
        <p><a href="http://www.20keysglobal.com" data-role="button">Visit International 20 Keys Website</a></p>                 
        <p><a href="#register" data-role="button" data-rel="dialog" data-transition="pop">Register for Pro Version</a></p>
        <p><a href="mailto:christiaan.grove@odi.co.za" data-role="button">Make Suggestion for Improvement</a></p>
    </div><!-- /content -->

    <div data-role="footer" data-theme="d">

        <p class="margin">
        <a href="#home" data-rel="back" data-role="button" data-inline="true" data-icon="gear">Settings</a>
        </p>

    </div><!-- /footer -->
</div><!-- /page one -->

这是我在 Dynamically resizing Image-maps and images 中的最佳答案中使用的 javascript (感谢提莫):

window.onload = function () {
    var ImageMap = function (map) {
            var n,
                areas = map.getElementsByTagName('area'),
                len = areas.length,
                coords = [],
                previousWidth = 604;
            for (n = 0; n < len; n++) {
                coords[n] = areas[n].coords.split(',');
            }
            this.resize = function () {
                var n, m, clen,
                    x = document.body.clientWidth / previousWidth;
                for (n = 0; n < len; n++) {
                    clen = coords[n].length;
                    for (m = 0; m < clen; m++) {
                        coords[n][m] *= x;
                    }
                    areas[n].coords = coords[n].join(',');
                }
                previousWidth = document.body.clientWidth;
                return true;
            };
            window.onresize = this.resize;
        },
        imageMap = new ImageMap(document.getElementById('20Keys'));
    imageMap.resize();
    return;
}

图像和 map 确实会根据窗口宽度调整大小，但不幸的是没有我想要的那么完美。当窗口调整大小时，只有第一个 Key 实际上会完美地调整大小。对于其余部分，离左上角越远越不准确。

我已经将图像更改为完美的正方形，希望它能解决问题，但事实并非如此。

我在 javascript 方面经验不足，而且我的数学技能也大不如前。所有帮助将不胜感激。提前谢谢你。

最佳答案

可能图像的宽度不是 body 的 100%。不要使用 document.body.clientWidth 计算比例 (x)，而是使用图像的 offsetWidth:

x = img.offsetWidth / previousWidth;
                 :
previousWidth = img.offsetWidth;

A live demo at jsFiddle .

请注意，图片的纵横比不必为 1:1，只要保持图片的原始比例，两个方向的比例都相同。

(原始代码可能过于依赖原始问题，而不是通用的多用途 map 缩放器。)

关于javascript - 调整包含圆圈的图像映射，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23752408/

41 4 0
文章推荐： c - 如何检测字符缓冲区编码？
文章推荐： html - Foundation 5 - 顶部栏菜单图标不可见
文章推荐： 计算我的 C 程序的执行时间？
文章推荐： c - 在我的 C 程序中使用 gdb 需要帮助
太空狗
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com