スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

写真の部分を拡大詳細説明するのための試作

 マウスが写真の上にくると、枠が現れ、その枠にマウスが乗ると、その部分が拡大表示される。マウスが拡大写真から外れると、またもとの写真だけが表示されるという詳細説明の仕組みを、CSSのVisibility属性をhidden、visibleと切り替えて表示します。今回は枠は一つだけですが、複数の枠を表示することもできます。

 ウインドウズのIEだけで表示可能ならば、画像にトランジションを設定するのも雰囲気が出ると思いますが、今回はソースの可読性を複雑にするのでやめます。



<
<
<


以下ソースです
<center style="font-size:0px;line-height:16px;">
<div style="div style="position:relative; width:550px; height:365px;">
<<img src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723662734bd6c4c1a9e3f_import.jpg"
style="position:absolute;top:0px;left:0px;"
onmouseover="waku.style.visibility='visible';"onmouseout="waku.style.visibility='hidden';">
<<img id="waku" src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723662794bd6c4c73240e_import.png"
style="visibility:hidden;position:absolute;top:200px;left:240px;" onmouseover="kakudai.style.visibility='visible';">
<<img id="kakudai"
src="http://blog-imgs-43.fc2.com/d/o/n/dongwcat/12723662854bd6c4cd8cb05_import.jpg"
style="visibility:hidden;position:absolute;top:-20px;left:20px;"
onmouseout="kakudai.style.visibility='hidden';"></div></center>

コメントの投稿

非公開コメント

FC2カウンター
プロフィール

dongwcat

Author:dongwcat
FC2ブログへようこそ!

最新記事
最新コメント
最新トラックバック
カテゴリ
検索フォーム
RSSリンクの表示
リンク
ブロとも申請フォーム

この人とブロともになる

QRコード
QRコード
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。