相关疑难解决方法(0)

调整包含圆的图像映射的大小

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

在此输入图像描述

这是相关的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 …

Run Code Online (Sandbox Code Playgroud)

html javascript resize imagemap

Bar*_*yle

2017 05-23

6
推荐指数

1
解决办法

1686
查看次数

图像的可点击区域 - 即使屏幕改变大小 html

我正在尝试学习如何用 HTML 制作一个简单的网站。目前我已经创建了一个背景图像，该图像上有多个形状。我希望图像的不同部分是可点击的链接。我了解如何查找坐标并使用图像地图，但是当我更改屏幕尺寸时，可点击链接不起作用。如何使可点击区域适用于不同的屏幕尺寸？

body, html {
        height: 100%;
        margin: 0;
    }
    
    .bg {
        background-position: left;
        background-repeat: no-repeat;
        background-size: 100% 100%;
    }

Run Code Online (Sandbox Code Playgroud)

    <div class="bg"></div>
    <body>
    <img src="https://cdn.pixabay.com/photo/2018/01/24/18/05/background-3104413_1280.jpg" width="100%" height="100%" usemap="workmap" class="bg">
    <map name="workmap">
        <area target="_blank" alt="Game1" title="Game1" href="game1.html" coords="243,133,79" shape="circle">
        <area target="_blank" alt="Game2" title="Game2" href="game2.html" coords="870,147,680,33" shape="rect">
        <area target="_blank" alt="Game3" title="Game3" href="game3.html" coords="889,379,80" shape="circle">
        <area target="_blank" alt="CS" title="CS" href="https://code.org/educate/csp " coords="770,671,73" shape="circle">
        <area target="_blank" alt="Game4" title="Game4" href="game4.html" coords="163,587,214,492,267,473,335,483,377,603,327,631,249,658,211,641" shape="poly">
    </map>

Run Code Online (Sandbox Code Playgroud)

谢谢！

html css image imagemap coordinates

Ali*_*Ali

2018 11-08

3
推荐指数

1
解决办法

4937
查看次数