Q&A
クリッカブルマップの画の上（各キャビネットの引き出し）をマウスホーバーした際に
マウスの位置と表示される引き出しの中身の画像の位置が重なる（特に④）と画像が一瞬しか表示
されない不具合が発生しました。
表示される画像の位置は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; }
よろしくお願いします。
回答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つ目のセレクターに一致します。
投稿2021/02/08 08:25
総合スコア36960
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/02/08 11:36