Question

我正在尝试将图像映射到我的应用程序中，并且我有以下错误代码：

  <div class="col-xs-12 col-sm-4 text-center">
    <!-- Image Map Generated by http://www.image-map.net/ -->
    <%= image_tag "Remote.png", style: "width: 200px", usemap: "#image-map", alt: "Remote control menu.  Yes, you get to hold it." %>

    <map name="image-map">
        <area target="" alt="BBQ" title="BBQ" href="<%= url_for home_bbq_path %>" coords="241,595,103" shape="circle">
        <area target="" alt="Jokes" title="Jokes" href="<%= url_for home_jokes_path %>" coords="511,587,95" shape="circle">
        <area target="" alt="Memory Enhancer" title="Memory Enhancer" href="#" coords="786,580,106" shape="circle">
        <area target="" alt="Gift Helper" title="Gift Helper" href="#" coords="259,866,105" shape="circle">
        <area target="" alt="Grey Bottom Middle" title="Grey Bottom Middle" href="#" coords="521,856,102" shape="circle">
        <area target="" alt="Grey Bottom Right" title="Grey Bottom Right" href="#" coords="784,868,97" shape="circle">
        <area target="" alt="My Mancard" title="My Mancard" href="<%= url_for edit_user_registration_path(current_user) %>" coords="241,315,140" shape="circle">
        <area target="" alt="Sign In" title="Sign In" href="<%= url_for new_user_session_path %>" coords="669,234,909,410" shape="rect">
        <area target="" alt="Green Left Top" title="Green Left Top" href="#" coords="262,1224,92" shape="circle">
        <area target="" alt="Green Middle Top" title="Green Middle Top" href="#" coords="516,1205,89" shape="circle">
        <area target="" alt="Green Right Top" title="Green Right Top" href="#" coords="771,1212,93" shape="circle">
        <area target="" alt="Green Left Bottom" title="Green Left Bottom" href="#" coords="268,1421,97" shape="circle">
        <area target="" alt="Green Middle Bottom" title="Green Middle Bottom" href="#" coords="520,1409,91" shape="circle">
        <area target="" alt="Green Right Bottom" title="Green Right Bottom" href="#" coords="767,1417,92" shape="circle">
        <area target="" alt="Sign Out" title="Sign Out" href="#" coords="788,1614,76" shape="circle">
        <area target="" alt="Menu" title="Menu" href="#" coords="255,1618,73" shape="circle">
    </map>
  </div>

当我查看页面的检查源时，它呈现给：

  <div class="col-xs-12 col-sm-4 text-center">
    <!-- Image Map Generated by http://www.image-map.net/ -->
    <img style="width: 200px" usemap="#image-map" alt="Remote control menu.  Yes, you get to hold it." src="/assets/Remote-4f484678a9b3452f30cec85b33c1abf34aa0a74ef9c933b9c42d40a823c59b30.png" />

    <map name="image-map">
        <area target="" alt="BBQ" title="BBQ" href="/home/bbq" coords="241,595,103" shape="circle">
        <area target="" alt="Jokes" title="Jokes" href="/home/jokes" coords="511,587,95" shape="circle">
        <area target="" alt="Memory Enhancer" title="Memory Enhancer" href="#" coords="786,580,106" shape="circle">
        <area target="" alt="Gift Helper" title="Gift Helper" href="#" coords="259,866,105" shape="circle">
        <area target="" alt="Grey Bottom Middle" title="Grey Bottom Middle" href="#" coords="521,856,102" shape="circle">
        <area target="" alt="Grey Bottom Right" title="Grey Bottom Right" href="#" coords="784,868,97" shape="circle">
        <area target="" alt="My Mancard" title="My Mancard" href="/users/edit.1" coords="241,315,140" shape="circle">
        <area target="" alt="Sign In" title="Sign In" href="/users/sign_in" coords="669,234,909,410" shape="rect">
        <area target="" alt="Green Left Top" title="Green Left Top" href="#" coords="262,1224,92" shape="circle">
        <area target="" alt="Green Middle Top" title="Green Middle Top" href="#" coords="516,1205,89" shape="circle">
        <area target="" alt="Green Right Top" title="Green Right Top" href="#" coords="771,1212,93" shape="circle">
        <area target="" alt="Green Left Bottom" title="Green Left Bottom" href="#" coords="268,1421,97" shape="circle">
        <area target="" alt="Green Middle Bottom" title="Green Middle Bottom" href="#" coords="520,1409,91" shape="circle">
        <area target="" alt="Green Right Bottom" title="Green Right Bottom" href="#" coords="767,1417,92" shape="circle">
        <area target="" alt="Sign Out" title="Sign Out" href="#" coords="788,1614,76" shape="circle">
        <area target="" alt="Menu" title="Menu" href="#" coords="255,1618,73" shape="circle">
    </map>
  </div>

图像出现但似乎没有任何链接。谁能看到我哪里出错？

Answer 1

我找到了你的问题。

您将固定宽度设置为img（style="width: 200px"），并且您的坐标是完整图像尺寸。

您需要在生成器上使用调整大小的图像，并避免使用CSS宽度。

图像映射不使用ERB / HTML

1 个答案: