2007年2月宿題「画像の置き換え」+α

2月15日、講師からさらに簡単に整理された模範解答を頂けました。
cssが重複される結果、誤表示になるのではと思い、新頁を書きました。

aとimgにクラス属性をつけることで、hoverでの拡大表示が出来るのですね! photoの頁で使えそうでうれしいです。しっかり覚えて使わせていただきます。
さらに良いものをと試行されていく講師の姿勢に学んでいます。

以下は模範解答に添えられたコメントです。

「a class="large" href="test.jpg"・・」 としたのは、万一クリックしてもおかしなページに飛ぶのを 避けるため。それとCSSを利用しないブラウザのためです。

本当は実に簡単なことが、IE6のおかげで随分と悩みました(苦笑) ただ私に限らず、Webデザインをする人にはこの程度の試行錯誤は 当たり前と言ってもいいでしょう。

2月21日、講師から「宿題の顛末」とのタイトルでメールが届きました。

前回よりさらに使ってみたくなるように簡略化されているようです。この一枚!という写真が写せたら すぐに使いますねー(笑)

まず最初の答えはこうでした。
[CSS]
a:hover img   { width: 800px; height: 532px; }
[HTML]
a href="./"
img src="XXX.jpg" width="200" height="134" alt="test4" title="画"
/a

今回辿りついた答えはこうです。
[CSS]
a:hover    { border: none; }
a:hover img  { width: 800px; height: 532px; }
[HTML]
a href="XXX.jpg" title="enlarge image"
img src="XXX.jpg" width="200" height="134" alt="拡" title="画"
/a

これでIE6でもマウスが画像の上に来ると拡大表示されます。
a:hover     { border: none; }
この一行をCSSに追加すればいいとはビックリの答えでした(笑)

a:hover で表示する画像は初期表示と原寸の中間くらいのサイズ。
クリックすると原寸の画像が表示される。そんな使い方もいいかも 知れませんね。

今までの答えを元に、皆さんのアイデアを生かして使ってください。
正真正銘の最後の答えです。

黒柴犬「クゥ」の拡大画像

2007年2月宿題「画像の置き換え」の頁に戻る

HPS-INDEXに戻る INDEXに戻る

Copyright© 2005-2007 MA.W, cf.HTML-lint!