Question

我正试图在这把吉他的照片上放置一张图像地图，这样我就能指出吉他上的重点。在我的第一次尝试中，我试图将坐标点放在吉他的敲击杆周围（一个发牢骚的棒是伸出吉他底座的棒）。我知道我做错了什么因为我无法点击whammy酒吧带我到指定的网址。有什么问题？

/* 
   Image Map Independent Project 
   Filename: styles.css

   Author:   Justus Self
   Date:     3/2/17
   HTML5 and CSS3 Illustrated Unit G, Independent Project
 */
 
/* reset styles */
html {
   font-size: 14px;
}
article, aside, body, div, footer, header, h1, h2, h3, nav, p, img {
   border: 0;
   padding: 0;
   margin: 0;
}

/* body and page container */
body {
   background-color: black;
}
.container {
   max-width: 960px;
   margin: auto;
}

/* header section */
header {
   padding: 1em 2% 0.5em;
   text-align: center;
   background-color: rgb(139,0,0);
   overflow: auto;
   color: white;
}
h1{
   font-size: 2.4em;
   line-height: 1.4em;
   font-family: "Times New Roman", Times, serif;
}

/* main content */
article div{
   padding: 4em 3%;
   width: 65%;
   position: relative;
   left: 15%;
}
article p {
	color: white;
	padding: .1em 4em 5em 0;
	text-align: center;
	left: 10%;
	font-family: Arial, Helvetica, sans-serif;
	font-size: 15px;
}
article h2 {
	padding: 1em;
	color: white;
	text-align: center;
}

/* footer section */
footer {
   font-size: 16px;
   padding: .5em;
   color: white;
   background-color: rgb(139,0,0);
   text-align: center;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <title> Guitar Anatomy </title>
      <!--
         Image Map Independent Project
         Filename: index.html
      
         Author: Justus Self  
         Date:     3/2/17
         HTML5 and CSS3 Illustrated Unit G, Independent Project 
      -->
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <script src="modernizr.custom.40753.js"></script>
      <link rel="stylesheet" href="styles.css">
   </head>
   <body>
	<div class="container">
		<header>
			<h1> The Different Parts of a Guitar </h1>
		</header>
		<article>
			<h2> Learning The Basics </h2>
			<div>
				<img src="http://i.imgur.com/kKVxRrO.png" alt="image map of a guitar" width="700" height="250" usemap="#guitar">
				<map name="guitar"> 
				<area href="http://www.hearandplay.com/main/the-purpose-of-the-whammy-bar" alt="hearandplay" 
				target="_blank" shape= poly coords="133,222,265,232,189,213,196,244">
				</map>
			</div>
		<p> This is what a standard electric/acoustic guitar looks like, click on the tags in the image to learn more about their specific parts. </p>
		</article>
		<footer>
            <p> Sarcoxie, MO 64862 &bull; (417) 353-9591</p>
         </footer>
	</div>
	</body>
</html>

Answer 1

看起来多边形坐标已关闭，您指定的宽度/高度与图像的纵横比不匹配。我的猜测是你根据图像的原始宽度/高度编写了坐标，而不是你在HTML中指定的重新调整尺寸（按比例缩小）尺寸。

调整源图像的大小以匹配您在代码中指定的宽度，然后重新建立多边形坐标。此外，shape= poly属性中还有一个空格。

＆＃13;

<img src="http://i.imgur.com/t3VMpIS.png" alt="image map of a guitar" width="700" height="284" usemap="#guitar">
<map name="guitar">
  <area href="http://www.hearandplay.com/main/the-purpose-of-the-whammy-bar" alt="hearandplay" target="_blank" shape="poly" coords="98,156,127,170,194,163,199,176,131,185,87,175">
</map>

＆＃13;

Answer 2

您的<area>（及其链接）正常运行，您的坐标位于错误的位置。

你会注意到，在你的片段中，如果你沿着吉他琴身的底部慢慢地盘旋，你的光标有时会成为一个指针。这是您的映射区域当前所在的位置。试试这些坐标可以获得更好的效果：

100,125,100,150,196,143,201,148,196,153,125,168,87,155

第一次使用图像映射

2 个答案: