株式会社アイネックスはソフトウェアの開発、ホームページの作成ツール企業です。
横浜、東京に拠点を置き、検証システム／金融・証券のシステム等の構築、開発を行い、
ホームページの作成ツール支援と多岐にわたるソリューションを提供します。
03-09) 1. マウスオーバーでｷｬｯﾁとなる画像を表示させる
アンカー画像にマウスオーバーすると、追加のデザイン画像を表示する
p.photo a:hover のプロパティで表示する画像( background-image:
)を指定し、
表示する画像の領域(p.photo a)の画像の下部(padding-bottom:40px;)を広げる。
| ｃｓｓの書き方 |
/*------------------------------------------------------- 03-09 マウスオーバーで画像表示 -------------------------------------------------------- */ .#info_421{ float: left; width: 300px; margin: 20px; border: 3px solid #000000; /* 全体の枠指定 */ } /* infoMediaBox */ .ibox_421{ width: 240px; } .ibox_421 p.photo{ float: left; width: 90px; } .ibox_421 p.photo a{ display: block; padding-bottom:40px; /* サイズを広げる */ } .ibox_421 p.photo a:hover{ background-image: url("catch01.gif"); /* 表示画面 */ background-repeat: no-repeat; background-position: right bottom; } |
|---|---|
| HTMLの使用例 |
<div class="ibox_421"> <p class="photo"><a href="#"> <img src="photo01.jpg" alt="場をつくる・表紙" /></a></p> <h4><a href="#"><img src="title01.gif" alt="" /></a></h4> <p class="explain">INEX創業者 初の著書が発売！<br /></p> </div> |
INEX創業者・ねもとまこと初の著書が発売！
場をつくるという仕事を選んだ男の物語。場をつくることの魅力と、創業までの道のりを紹介しています。
03-09) 2. マウスオーバーでｷｬｯﾁとなる画像を表示させる
| ｃｓｓの書き方 |
.ibox_422{ width: 240px; } .ibox_422 p.photo{ float: left; width: 90px; } .ibox_422 p.photo a{ display: block; padding-bottom: 40px; /* サイズを広げる */ background-image: url("catch01.gif"); /* 表示画面 */ background-repeat: no-repeat; background-position: left bottom; } .ibox_422 p.photo a:hover{ background-image: url("catch01.gif"); /* 表示画面 */ background-repeat: no-repeat; background-position: right bottom; } |
|---|---|
| XHTMLの使用例 |
<div class="ibox_422"> <p class="photo"><a href="#"> <img src="photo01.jpg" alt="場をつくる・表紙" /></a></p> <h4><a href="#"><img src="title01.gif" alt="" /></a></h4> <p class="explain">INEX創業者 初の著書が発売！<br /></p> </div> |
INEX創業者・ねもとまこと初の著書が発売！
場をつくるという仕事を選んだ男の物語。場をつくることの魅力と、創業までの道のりを紹介しています。
03-09) 3. マウスオーバーでｷｬｯﾁとなる画像を表示させる
INEX創業者・ねもとまこと初の著書が発売！
場をつくるという仕事を選んだ男の物語。場をつくることの魅力と、創業までの道のりを紹介しています。