teratail
回答率
85.36%
teratail header banner
teratail header banner
質問するログイン新規登録

『🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中！

＼teratail特別グッズやAmazonギフトカード最大2,000円分が当たる！／

詳細はこちら
トップHTTPに関する質問
HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

790閲覧

表示される画像の位置をマウスホーバーの場所によって変えたい

zendaman999
zendaman999

総合スコア12

HTTP

HTTP(Hypertext Transfer Protocol)とはweb上でHTML等のコンテンツを交換するために使われるアプリケーション層の通信プロトコルです。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2021/02/06 05:48

0

0

イメージ説明
クリッカブルマップの画の上（各キャビネットの引き出し）をマウスホーバーした際に
マウスの位置と表示される引き出しの中身の画像の位置が重なる（特に④）と画像が一瞬しか表示
されない不具合が発生しました。

表示される画像の位置はCSSファイルの

【CSS】
map img{
top: 0;
bottom: 0;
left: 0;
right: 0;

で上下左右に動かせるのは確認しました、ここで動かすと全部が動いてしまいます。
そこで、①～④をホーバー時には表示される画像を右寄りに⑤⑥は左寄りにとその都度変えたいと
思っています。

試したのは

【HTML】

<area shape="rect" coords="121,322,170,361" href="ichiran.xlsx" alt="" />
<img src="img/a-1-1.jpg" alt=""class="pic">

【CSS】

map img .pic{
  top: 0;
  bottom: 0;
  left: 700px;
  right: 0;

⇒変わらず

DIV要素を作り、textaline:left ;
⇒下画が左に寄ってしまいました。

お手上げです。


【HTML全体】
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>setsubihikae_A</title>
rel="stylesheet">
    <script src="https://kit.fontawesome.com/63ce3b6b7b.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="base.css">

  </head>
  <!--本体-->
  <body>

    <!--トップラッパー-->
    <div class="top-wrapper">
        <div class="container">
          <img src="img/setsubihikae_A.jpg" usemap="#ImageMap" alt="" />
          <map name="ImageMap">
      <!-- ここから１ -->
            <area shape="rect" coords="121,322,170,361" href="ichiran.xlsx" alt="" />
          　<img class="pic" src="img/a-1-1.jpg" alt="">

          　<area shape="rect" coords="176,320,229,362" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-2.jpg" alt="">
          　
          　<area shape="rect" coords="119,361,171,398" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-3.jpg" alt="">

          　<area shape="rect" coords="178,360,228,398" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-4.jpg" alt="">

          　<area shape="rect" coords="119,399,170,437" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-5.jpg" alt="">

            <area shape="rect" coords="178,401,229,436" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-6.jpg" alt="">

            <area shape="rect" coords="119,443,170,481" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-7.jpg" alt="">

            <area shape="rect" coords="177,444,227,481" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-8.jpg" alt="">

            <area shape="rect" coords="119,482,170,519" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-9.jpg" alt="">

            <area shape="rect" coords="176,482,229,519" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-10.jpg" alt="">

            <area shape="rect" coords="120,520,171,560" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-11.jpg" alt="">

            <area shape="rect" coords="176,522,229,558" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-1-12.jpg" alt="">
      <!-- ここから２ -->
            <area shape="rect" coords="238,413,290,479" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-2-1.jpg" alt="">

            <area shape="rect" coords="297,412,350,479" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-2-2.jpg" alt="">

            <area shape="rect" coords="238,481,289,544" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-2-3.jpg" alt="">

            <area shape="rect" coords="298,480,349,543" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-2-4.jpg" alt="">
      <!-- ここから３ -->
            <area shape="rect" coords="361,378,543,465" href="ichiran.xlsx" alt="" />
            <img class="pic3" src="img/a-3-1.jpg" alt="">

            <area shape="rect" coords="359,467,542,555" href="ichiran.xlsx" alt="" />
            <img class="pic" src="img/a-3-2.jpg" alt="">
      <!-- ここから４ -->
            <area shape="rect" coords="547,442,569,458" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-1.jpg" alt="">

            <area shape="rect" coords="569,443,591,458" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-2.jpg" alt="">

            <area shape="rect" coords="593,443,615,459" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-3.jpg" alt="">

            <area shape="rect" coords="615,443,637,458" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-4.jpg" alt="">

            <area shape="rect" coords="548,460,568,475" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-5.jpg" alt="">

            <area shape="rect" coords="570,460,591,475" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-6.jpg" alt="">

            <area shape="rect" coords="592,460,615,476" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-7.jpg" alt="">

            <area shape="rect" coords="615,460,637,477" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-8.jpg" alt="">

            <area shape="rect" coords="546,478,568,494" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-9.jpg" alt="">

            <area shape="rect" coords="571,478,591,495" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a--10.jpg" alt="">

            <area shape="rect" coords="591,478,615,495" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-11.jpg" alt="">

            <area shape="rect" coords="616,477,638,493" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-12.jpg" alt="">

            <area shape="rect" coords="547,495,567,511" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-13.jpg" alt="">

            <area shape="rect" coords="570,496,591,511" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-14.jpg" alt="">

            <area shape="rect" coords="593,495,615,512" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-15.jpg" alt="">

            <area shape="rect" coords="615,495,637,510" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-16.jpg" alt="">

            <area shape="rect" coords="547,512,569,527" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-17.jpg" alt="">

            <area shape="rect" coords="571,512,590,528" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-18.jpg" alt="">

            <area shape="rect" coords="591,511,614,527" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-19.jpg" alt="">

            <area shape="rect" coords="616,512,637,527" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-20.jpg" alt="">

            <area shape="rect" coords="548,530,568,546" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-21.jpg" alt="">

            <area shape="rect" coords="570,529,591,545" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-22.jpg" alt="">

            <area shape="rect" coords="592,530,614,545" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-23.jpg" alt="">

            <area shape="rect" coords="615,530,638,547" href="ichiran.xlsx" alt="" />
            <img class="pic4" src="img/a-4-24.jpg" alt="">
        <!-- ここから５ -->
            <area shape="poly" coords="1057,537,1057,190,1130,183,1130,585,1134,575" href="ichiran.xlsx" alt="" />
            <img class="pic5" src="img/a-5-1.jpg" alt="">

            <area shape="poly" coords="1291,249,1476,223,1475,500,1293,461,1295,456" href="ichiran.xlsx" alt="" />
            <img class="pic5" src="img/a-6-1.jpg" alt="">

            <area shape="poly" coords="1293,465,1293,665,1365,706,1469,706,1472,502,1382,484,1382,484" href="ichiran.xlsx" alt="" />
            <img class="pic5" src="img/a-6-2.jpg" alt="">

            <area shape="rect" coords="1345,708,1496,849" href="index.html" alt="" />
            <img src="index.html" alt="">

            <area shape="rect" coords="24,710,172,848" href="index.html" alt="" />
            <img src="index.html" alt="">
          </map>
        </div>
    </div>
  </body>
</html>

【CSS全体】
* {
  box-sizing:border-box;
}
a {
  text-decoration: none;
}
body {
  margin:0;
}
.top-wrapper {
  padding: 50px 0 50px 100px;
  background-image: url(img/background_image.png);
  color: white;
  background-size: cover;
  text-align: center;
}
.container {
  padding: 0 15px;
  width: 100%;
  margin: 0 auto;

}
map img{
  visibility:hidden;
  position:absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  opacity: 0;
  transition: all 0.5s ;
  box-shadow: 8px 8px 8px #666666;

}

area:hover+img{
  visibility: visible;
  opacity: 1;
}

.top_page{
  padding: 0 15px;
  margin: 0 auto;

}

よろしくお願いします。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1件

0

ベストアンサー

こんにちは。

Markdown で書く時には、

html
1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="utf-8">
5    <meta name="viewport" content="width=device-width, initial-scale=1.0">
6    <title>setsubihikae_A</title>
7rel="stylesheet">
8    <script src="https://kit.fontawesome.com/63ce3b6b7b.js" crossorigin="anonymous"></script>
9    <link rel="stylesheet" href="base.css">
10
11  </head>
12  <!--本体-->
13  <body>
14
15    <!--トップラッパー-->
16    <div class="top-wrapper">
17        <div class="container">
18          <img src="img/setsubihikae_A.jpg" usemap="#ImageMap" alt="" />
19          <map name="ImageMap">
20      <!-- ここから１ -->
21            <area shape="rect" coords="121,322,170,361" href="ichiran.xlsx" alt="" />
22          　<img class="pic" src="img/a-1-1.jpg" alt="">
23
24          　<area shape="rect" coords="176,320,229,362" href="ichiran.xlsx" alt="" />
25            <img class="pic" src="img/a-1-2.jpg" alt="">
26          　
27          　<area shape="rect" coords="119,361,171,398" href="ichiran.xlsx" alt="" />
28            <img class="pic" src="img/a-1-3.jpg" alt="">
29
30          　<area shape="rect" coords="178,360,228,398" href="ichiran.xlsx" alt="" />
31            <img class="pic" src="img/a-1-4.jpg" alt="">
32
33          　<area shape="rect" coords="119,399,170,437" href="ichiran.xlsx" alt="" />
34            <img class="pic" src="img/a-1-5.jpg" alt="">
35
36            <area shape="rect" coords="178,401,229,436" href="ichiran.xlsx" alt="" />
37            <img class="pic" src="img/a-1-6.jpg" alt="">
38
39            <area shape="rect" coords="119,443,170,481" href="ichiran.xlsx" alt="" />
40            <img class="pic" src="img/a-1-7.jpg" alt="">
41
42            <area shape="rect" coords="177,444,227,481" href="ichiran.xlsx" alt="" />
43            <img class="pic" src="img/a-1-8.jpg" alt="">
44
45            <area shape="rect" coords="119,482,170,519" href="ichiran.xlsx" alt="" />
46            <img class="pic" src="img/a-1-9.jpg" alt="">
47
48            <area shape="rect" coords="176,482,229,519" href="ichiran.xlsx" alt="" />
49            <img class="pic" src="img/a-1-10.jpg" alt="">
50
51            <area shape="rect" coords="120,520,171,560" href="ichiran.xlsx" alt="" />
52            <img class="pic" src="img/a-1-11.jpg" alt="">
53
54            <area shape="rect" coords="176,522,229,558" href="ichiran.xlsx" alt="" />
55            <img class="pic" src="img/a-1-12.jpg" alt="">
56      <!-- ここから２ -->
57            <area shape="rect" coords="238,413,290,479" href="ichiran.xlsx" alt="" />
58            <img class="pic" src="img/a-2-1.jpg" alt="">
59
60            <area shape="rect" coords="297,412,350,479" href="ichiran.xlsx" alt="" />
61            <img class="pic" src="img/a-2-2.jpg" alt="">
62
63            <area shape="rect" coords="238,481,289,544" href="ichiran.xlsx" alt="" />
64            <img class="pic" src="img/a-2-3.jpg" alt="">
65
66            <area shape="rect" coords="298,480,349,543" href="ichiran.xlsx" alt="" />
67            <img class="pic" src="img/a-2-4.jpg" alt="">
68      <!-- ここから３ -->
69            <area shape="rect" coords="361,378,543,465" href="ichiran.xlsx" alt="" />
70            <img class="pic3" src="img/a-3-1.jpg" alt="">
71
72            <area shape="rect" coords="359,467,542,555" href="ichiran.xlsx" alt="" />
73            <img class="pic" src="img/a-3-2.jpg" alt="">
74      <!-- ここから４ -->
75            <area shape="rect" coords="547,442,569,458" href="ichiran.xlsx" alt="" />
76            <img class="pic4" src="img/a-4-1.jpg" alt="">
77
78            <area shape="rect" coords="569,443,591,458" href="ichiran.xlsx" alt="" />
79            <img class="pic4" src="img/a-4-2.jpg" alt="">
80
81            <area shape="rect" coords="593,443,615,459" href="ichiran.xlsx" alt="" />
82            <img class="pic4" src="img/a-4-3.jpg" alt="">
83
84            <area shape="rect" coords="615,443,637,458" href="ichiran.xlsx" alt="" />
85            <img class="pic4" src="img/a-4-4.jpg" alt="">
86
87            <area shape="rect" coords="548,460,568,475" href="ichiran.xlsx" alt="" />
88            <img class="pic4" src="img/a-4-5.jpg" alt="">
89
90            <area shape="rect" coords="570,460,591,475" href="ichiran.xlsx" alt="" />
91            <img class="pic4" src="img/a-4-6.jpg" alt="">
92
93            <area shape="rect" coords="592,460,615,476" href="ichiran.xlsx" alt="" />
94            <img class="pic4" src="img/a-4-7.jpg" alt="">
95
96            <area shape="rect" coords="615,460,637,477" href="ichiran.xlsx" alt="" />
97            <img class="pic4" src="img/a-4-8.jpg" alt="">
98
99            <area shape="rect" coords="546,478,568,494" href="ichiran.xlsx" alt="" />
100            <img class="pic4" src="img/a-4-9.jpg" alt="">
101
102            <area shape="rect" coords="571,478,591,495" href="ichiran.xlsx" alt="" />
103            <img class="pic4" src="img/a--10.jpg" alt="">
104
105            <area shape="rect" coords="591,478,615,495" href="ichiran.xlsx" alt="" />
106            <img class="pic4" src="img/a-4-11.jpg" alt="">
107
108            <area shape="rect" coords="616,477,638,493" href="ichiran.xlsx" alt="" />
109            <img class="pic4" src="img/a-4-12.jpg" alt="">
110
111            <area shape="rect" coords="547,495,567,511" href="ichiran.xlsx" alt="" />
112            <img class="pic4" src="img/a-4-13.jpg" alt="">
113
114            <area shape="rect" coords="570,496,591,511" href="ichiran.xlsx" alt="" />
115            <img class="pic4" src="img/a-4-14.jpg" alt="">
116
117            <area shape="rect" coords="593,495,615,512" href="ichiran.xlsx" alt="" />
118            <img class="pic4" src="img/a-4-15.jpg" alt="">
119
120            <area shape="rect" coords="615,495,637,510" href="ichiran.xlsx" alt="" />
121            <img class="pic4" src="img/a-4-16.jpg" alt="">
122
123            <area shape="rect" coords="547,512,569,527" href="ichiran.xlsx" alt="" />
124            <img class="pic4" src="img/a-4-17.jpg" alt="">
125
126            <area shape="rect" coords="571,512,590,528" href="ichiran.xlsx" alt="" />
127            <img class="pic4" src="img/a-4-18.jpg" alt="">
128
129            <area shape="rect" coords="591,511,614,527" href="ichiran.xlsx" alt="" />
130            <img class="pic4" src="img/a-4-19.jpg" alt="">
131
132            <area shape="rect" coords="616,512,637,527" href="ichiran.xlsx" alt="" />
133            <img class="pic4" src="img/a-4-20.jpg" alt="">
134
135            <area shape="rect" coords="548,530,568,546" href="ichiran.xlsx" alt="" />
136            <img class="pic4" src="img/a-4-21.jpg" alt="">
137
138            <area shape="rect" coords="570,529,591,545" href="ichiran.xlsx" alt="" />
139            <img class="pic4" src="img/a-4-22.jpg" alt="">
140
141            <area shape="rect" coords="592,530,614,545" href="ichiran.xlsx" alt="" />
142            <img class="pic4" src="img/a-4-23.jpg" alt="">
143
144            <area shape="rect" coords="615,530,638,547" href="ichiran.xlsx" alt="" />
145            <img class="pic4" src="img/a-4-24.jpg" alt="">
146        <!-- ここから５ -->
147            <area shape="poly" coords="1057,537,1057,190,1130,183,1130,585,1134,575" href="ichiran.xlsx" alt="" />
148            <img class="pic5" src="img/a-5-1.jpg" alt="">
149
150            <area shape="poly" coords="1291,249,1476,223,1475,500,1293,461,1295,456" href="ichiran.xlsx" alt="" />
151            <img class="pic5" src="img/a-6-1.jpg" alt="">
152
153            <area shape="poly" coords="1293,465,1293,665,1365,706,1469,706,1472,502,1382,484,1382,484" href="ichiran.xlsx" alt="" />
154            <img class="pic5" src="img/a-6-2.jpg" alt="">
155
156            <area shape="rect" coords="1345,708,1496,849" href="index.html" alt="" />
157            <img src="index.html" alt="">
158
159            <area shape="rect" coords="24,710,172,848" href="index.html" alt="" />
160            <img src="index.html" alt="">
161          </map>
162        </div>
163    </div>
164  </body>
165</html>
css
1* {
2  box-sizing:border-box;
3}
4a {
5  text-decoration: none;
6}
7body {
8  margin:0;
9}
10.top-wrapper {
11  padding: 50px 0 50px 100px;
12  background-image: url(img/background_image.png);
13  color: white;
14  background-size: cover;
15  text-align: center;
16}
17.container {
18  padding: 0 15px;
19  width: 100%;
20  margin: 0 auto;
21
22}
23map img{
24  visibility:hidden;
25  position:absolute;
26  top: 0;
27  bottom: 0;
28  left: 0;
29  right: 0;
30  margin: auto;
31  opacity: 0;
32  transition: all 0.5s ;
33  box-shadow: 8px 8px 8px #666666;
34
35}
36
37area:hover+img{
38  visibility: visible;
39  opacity: 1;
40}
41
42.top_page{
43  padding: 0 15px;
44  margin: 0 auto;
45
46}

のように分けて書く方が読みやすいので、ご協力をお願いします。
また、teratail ではコードハイライトにコピーボタンがあるので、【HTML全体】などの文法エラーになるコメントも、ペースト後にこちらで編集しなくてはならないので回答の手間が増えます。併せてご協力ください。

解決方法ですが、以下をお試しください。

css
1    map img .pic {
2/*         ^このスペースがいらない */

子孫結合子 — 通常は単一の空白文字 ( ) で表される — は2つの CSS セレクターを結合し、1つ目のセレクターに一致する要素が祖先 (親、親の親、親の親の親、など) となっている2つ目のセレクターに一致します。

子孫結合子 - CSS: カスケーディングスタイルシート | MDN

投稿2021/02/08 08:25

Lhankor_Mhy
Lhankor_Mhy

総合スコア36946

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

zendaman999
zendaman999

2021/02/08 11:36

Lhankor_Mhy様回答ありがとうございます この方法はちょっと調べてみます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

質問の解決につながる回答をしましょう。 サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。 また、読む側のことを考えた、分かりやすい文章を心がけましょう。

15分調べてもわからないことは
teratailで質問しよう！

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問

トップHTTPに関する質問

表示される画像の位置をマウスホーバーの場所によって変えたい