那些遇到过的问题

标签: imagemap

在 Shiny 应用程序中处理图像映射点击

我正在构建一个闪亮的应用程序，其中的selectInput功能既作为传统的 HTML 选择下拉列表又作为可点击的图像地图呈现。我当前的策略是将图像地图多边形链接回应用程序并添加 URL 参数，解析该 URL，然后更新选择。当然，这每次都会重置应用程序，这还可以，但不是很好，而且 UI 闪烁也不是很优雅。

我的问题是：

  • 有没有更好的方法来捕获图像点击并更新输入？
  • 如果我继续我的解决方案，我是否可以延迟渲染，selectInput以便在解析 URL 之前不会显示它，以便在闪烁到参数化选择之前暂时不显示默认选择？

这是一个演示：

截屏

library(shiny)
ui <- fluidPage(
   sidebarLayout(
      sidebarPanel(
         selectInput("letter_select",
                     "Pick a letter:",
                     choices = c('A' = 1, 'B' = 2, 'C' = 3, 'D' = 4))
      ),
      mainPanel(
         h3('Or click a letter'),
         img(src = 'testpattern.png', usemap = '#image-map'),
         HTML('
<map name="image-map">
<area target="_self" title="A" href="?letter=1" coords=0,0,50,0,50,50,0,50" shape="poly">
<area target="_self" title="B" href="?letter=2" coords=50,0,100,0,100,50,50,50" shape="poly">
<area target="_self" title="C" href="?letter=3" coords=0,50,50,50,50,100,0,100" shape="poly">
<area target="_self" title="D" href="?letter=4" coords=50,50,100,50,100,100,50,100" …
Run Code Online (Sandbox Code Playgroud)

r imagemap shiny

Bri*_*per
lucky-day
3
推荐指数
1
解决办法
1115
查看次数

图像的可点击区域 - 即使屏幕改变大小 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
查看次数

php动态生成图像映射的coords

我有一个带有网格的地图.网格的每个单元格将是地图上的可点击区域,通过图像地图坐标.我想动态地这样做以保存为图像映射编写所有这些代码,但我无法弄清楚我需要使用的语句或等式.这是我到目前为止所拥有的图像映射的一个例子.

<div style="text-align:center;" id="location_title">The Hearth Lands</div>
                        <img id="map1" src="./images/maps/regions/1.png" usemap="#map1" border="0" width="800" height="800" alt="" />
                        <map name="map1" id="_map1">
                            <area shape="rect" coords="0,0,50,50" href=""  alt="" title="" />
                            <area shape="rect" coords="50,0,100,50" href=""  alt="" title="" />
                            <area shape="rect" coords="100,0,150,50" href=""  alt="" title="" />
                            <area shape="rect" coords="150,0,200,50" href=""  alt="" title="" />
                            <area shape="rect" coords="200,0,250,50" href=""  alt="" title="" />
                            <area shape="rect" coords="250,0,300,50" href=""  alt="" title="" />
                            <area shape="rect" coords="300,0,350,50" href=""  alt="" title="" />
                            <area shape="rect" coords="350,0,400,50" href=""  alt="" title="" />
                            <area shape="rect" coords="400,0,450,50" href=""  alt="" title="" …
Run Code Online (Sandbox Code Playgroud)

html php imagemap

cha*_*tor
lucky-day
2
推荐指数
1
解决办法
7501
查看次数

HTML,jQuery:在图像映射区域上显示文本

我有一个像这样的图像映射:

<img src ="planets.gif" width="145" height="126" alt="Planets" usemap ="#planetmap" />

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" href="sun.htm" alt="Sun" />
  <area shape="circle" coords="90,58,3" href="mercur.htm" alt="Mercury" />
  <area shape="circle" coords="124,58,8" href="venus.htm" alt="Venus" />
</map>
Run Code Online (Sandbox Code Playgroud)

我使用jQuery将span添加到区域但没有机会在区域上显示任何东西.

有没有办法在区域上显示文本,如工具提示,但没有鼠标悬停,页面加载时文本区域？

谢谢你的帮助.

html jquery imagemap

Mor*_*eza
lucky-day
2
推荐指数
1
解决办法
2万
查看次数

图像映射 - firefox问题

为什么这张地图不适用于Firefox？

<img usemap="m_one" id="one" src="/images/layout/town_and_country/Town__Country_Web_Map.jpg" alt="Town__Country_Web_Map" border="0" height="507" width="720"> 
<map id="m_one" name="m_one">
<area href="/local-area/in-the-community" coords="374,278,375,267,378,257,390,240,407,228,417,225,428,224,438,225,448,228,465,240,477,257,480,267,481,278,480,288,477,298,465,315,448,327,438,330,428,331,417,330,407,327,390,315,378,298,375,288,374,278,374,278" shape="poly">
<area href="/local-area/woodside-village-profile" coords="589,63,590,56,592,50,599,40,609,33,616,31,623,30,629,31,636,33,646,40,653,50,655,56,656,63,655,70,653,76,646,86,636,93,629,95,623,96,616,95,609,93,599,86,592,76,590,70,589,63,589,63" shape="poly">
<area href="/flamstead-village-profile" coords="571,392, 41" shape="circle">
<area href="/slip-end-village-profile" coords="575,118, 41" shape="circle">
<area href="/caddington-village-profile" coords="450,55, 41" shape="circle">
<area href="/aly-green-village-profile" coords="383,118, 41" shape="circle">
<area href="/Kensworth-village-profile" coords="235,144, 41" shape="circle">
<area href="/studham-village-profile" coords="53,147, 41" shape="circle">
<area href="/studham-village-profile" coords="145,304, 41" shape="circle"> 
</map>
Run Code Online (Sandbox Code Playgroud)

html firefox gecko imagemap

ric*_*uck
lucky-day
2
推荐指数
1
解决办法
2446
查看次数

图像映射不能通过ID引用？

我有一个图像和嵌入的地图:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="planetmap" />
<map id="planetmap">
  ...
Run Code Online (Sandbox Code Playgroud)

它不起作用.我尝试使用该name属性map:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map name="planetmap">
  ...
Run Code Online (Sandbox Code Playgroud)

它奏效了!即使这样:

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap" />
<map id="planetmap">
  ...
Run Code Online (Sandbox Code Playgroud)

虽然只在IE9中使用,但在Chrome中却没有.是因为Chrome不支持它还是因为IE的引擎很邋？？

我在这做错了什么？W3Schools 明确建议使用该id属性,而不是name:

HTML和XHTML之间的差异

在XHTML中,不推荐使用标记的name属性,并将其删除.请改用> id属性

我的DOCTYPE是<!DOCTYPE html>.

html browser syntax imagemap

Yat*_*wal
2013 01-24
2
推荐指数
1
解决办法
1237
查看次数

jQuery ImageMapster：突出问题

我在使 ImageMapster 突出显示我的地图区域时遇到了一些麻烦。在阅读文档时，我的印象是只需使用$('img').mapster(); 我应该能够看到我的地图区域在鼠标悬停时突出显示。

我没有看到这种情况发生。我可以选择区域，但它们不会鼠标悬停。

但是，如果我在地图区域上放置 onMouseOver 和 onMouseOut 属性，那么我可以使高亮功能起作用。

这是我的问题的关键。当我尝试将 ImageMapster 与一些动态 C# 代码集成时，我无法在地图区域上放置 onMouseOver 和 onMouseOut 属性。C# 对象WebControls.CircleHotSpot似乎不支持自定义属性。

所以我的问题有两个方面：

  1. 如何使地图区域突出显示仅适用于 ImageMapster 代码？
  2. 有没有办法向 C# 对象 WebControls.CircleHotSpot 添加属性？

这是我目前使用的 javascript 和 HTML 标记。

JavaScript：

$(document).ready(
    function()
    {
        $('#Image1').mapster({
            fillOpacity: 0.5,
            mapKey: 'alt',
            staticState:true,
            render_highlight: 
            {
                fillColor: '2aff00',
            },
            render_select: 
            {
                fillColor: 'ff000c',
            }
        });

        $('#Image2').mapster({
            mapKey: 'alt',

            stroke: true,
            strokeOpacity: 1.0,
            strokeColor: '000000',
            strokeWidth: 2,

            fill: true,
            fillColor: '0000ff',
            fillOpacity: 0.25,

            render_select: 
            {
                fillOpacity: 0.75,
                fillColor: …
Run Code Online (Sandbox Code Playgroud)

c# asp.net jquery imagemap imagemapster

Ben*_*ins
2012 10-15
2
推荐指数
1
解决办法
3152
查看次数

计算图像地图上多边形区域的宽度和高度

是否可以使用坐标计算图像映射上每个多边形区域的宽度和高度？

我有一个图像,并使用多个不同大小的多边形图像映射.我需要找到每个中心点.

javascript image imagemap

Sal*_*ket
2013 03-19
2
推荐指数
1
解决办法
2419
查看次数

将鼠标悬停在图像地图上不会将光标更改为在 IE 中提交

我有一个带有两个可点击区域地图的图像。这些在 Firefox 和 chrome 上按预期工作。在 IE 中，光标不会更改为“手”。我能够很好地点击和导航。所以大多数事情看起来都不错。唯一不会发生的事情是将光标更改为“手”。知道我缺少什么吗？

  <td><img id="shop-icon-image"  src="img3/shop-icon.png" usemap="#shopiconmap" />
        <map name="shopiconmap">
            <area shape="rect" coords="3,75,43,88" href="http://domain/page" /> 
            <area shape="rect" coords="44,75,82,88" href="http://domain/page" /> 
        </map>
    </td>
Run Code Online (Sandbox Code Playgroud)

html internet-explorer imagemap

use*_*407
lucky-day
2
推荐指数
2
解决办法
5426
查看次数

将鼠标悬停在区域上时,如何避免CSS闪烁？

我更新了我的html + css,现在当光标移动到地图区域时我会闪烁.我创造了一个问题的小提琴.

http://jsfiddle.net/niklasro/e0a4sb5g/

我读到我可以更改css和html或输入z值.我试过了,但是当光标移动到地图区域时它仍然闪烁.如果我将光标移动到左侧的区域文本上,则不会闪烁.你能告诉我我能做些什么吗？在我改变了很多CSS之前我没有遇到这个问题.

在此输入图像描述在此输入图像描述

<div class="column_left">
    <div class="box">

        <ul>
            <li>free.</li>

        </ul>


    </div>

    <div id="regions">


        <div class="region_links_one">
            <ul class="regions_one">
                <li><a id="region_8" class="region" href="http://www.koolbusiness.com/andhra_pradesh/">Andhra
                    Pradesh</a></li>
                <li><a id="region_9" class="region" href="http://www.koolbusiness.com/arunachal_pradesh/">Arunachal
                    Pradesh</a></li>
                <li><a id="region_10" class="region"
                       href="http://www.koolbusiness.com/assam/">Assam</a>
                </li>
                <li><a id="region_11" class="region"
                       href="http://www.koolbusiness.com/bihar/">Bihar</a>
                </li>
                <li><a id="region_12" class="region"
                       href="http://www.koolbusiness.com/chhattisgarh/">Chhattisgarh</a></li>
                <li><a id="region_13" class="region"
                       href="http://www.koolbusiness.com/goa/">Goa</a></li>
                <li><a id="region_14" class="region" href="http://www.koolbusiness.com/gujarat/">Gujarat</a>
                </li>
                <li><a id="region_15" class="region" href="http://www.koolbusiness.com/haryana/">Haryana</a>
                </li>
                <li><a id="region_16" class="region" href="http://www.koolbusiness.com/himachal_pradesh/">Himachal
                    Pradesh</a></li>
                <li><a id="region_17" class="region" href="http://www.koolbusiness.com/jammu_kashmir/">Jammu
                    &amp;
                    Kashmir</a></li>
                <li><a id="region_18" class="region" href="http://www.koolbusiness.com/jharkhand/">Jharkhand</a>
                </li>
                <li><a id="region_19" class="region" href="http://www.koolbusiness.com/karnataka/">Karnataka</a>
                </li>
                <li><a …
Run Code Online (Sandbox Code Playgroud)

html javascript css jquery imagemap

Nik*_*ntz
2014 10-17
2
推荐指数
1
解决办法
1391
查看次数

标签 统计

imagemap ×10

html ×7

jquery ×3

css ×2

image ×2

javascript ×2

asp.net ×1

browser ×1

c# ×1

coordinates ×1

firefox ×1

gecko ×1

imagemapster ×1

internet-explorer ×1

php ×1

r ×1

shiny ×1

syntax ×1