春の上州路の頁へ
ディズニーシーの頁へ
伊奈町ばら園の頁へ
最初にUPしたHTML
「クリッカブルマップ」意味ををサイトで調べてUPしましたが、意図を取り違えていたようです(*_*;
一見すると「image map」のように見える、という意味で
「イメージマップ」と表現したのですが「イメージマップもどき」と
言ったほうが良かったのかも。
「image map」の area要素を a要素に置き換えたらどうなるのかな？
そういう出題だったのです。
振出しに戻っての思考のはじまりとなりました。
5月31日
思考錯誤中!
3箇所を位置指定させること、テキストを非表示にさせないと...難関です?
6月2日
試行錯誤は続いています(*_*;
HTMLをそのままで、位置をマークアップすることができないでいます。
6月3日
試行錯誤を続けて2週間です。
hover 時に border, text が表示されるようになりました。
6月20日
6月26日の勉強会で、講師から解答と解説を受けました。
(1) .photo-nav, .photo-nav a, .photo-nav:hover, 分けての css を考える。
(2) visibility: hidden; と opacity: 1; で結果的に似た効果になる!。
(3) position: relative; position: absolute; を置く場所。
などなど...考えが及ばないことが沢山なことがありました。
講師から添削していただいた解答です。
6月28日
Imagemap を作ってみよう！
イメージマップはクリッカブルマップと呼ばれることもありますが、画像を読めない人にとっては有難迷惑な書式です。
画像を読み込まない設定にしてあればリンク先にジャンプすることすら不可能になります。
そこでCSSだけでイメージマップと同様の効果を考えてください
5月12日 出題