Q. |
画像ファイルの上にマウスカーソルを乗せると枠が表示させるようにするにはどうすればいいですか? |
A. |
ロールオーバーで、枠無しの画像と枠ありの画像を 差し替える方法もありますが、ただ枠だけを付けたいのであれば スタイルシートを使う方法があります。
以下、スタイルシートの基礎知識があるという前提で 説明します。
CSSファイルへの定義は、以下のようになります。
img.imglink{ border:1px solid white; } a:hover img.imglink{ border-color:red; }
ここで、imglink という文字を、HTMLファイル側 の画像の属性に class="imglink" などとして取り込むと、 その画像ファイルにimglinkで設定した内容を 反映させることが可能になります。
border:1px solid white;
としているのは、枠の太さを1ピクセル、色を白 にしているという意味です。背景が白ならば 枠は無いように見えます。
そして、 a:hover img.imglink{ border-color:red; } で、赤い枠を表示させるようにしています。
hover とは「マウスカーソルが乗ったとき」と言う意味です。
回答者 大和賢一郎 |
関連する質問
関連する動画
関連する用語
関連する解説
その他の関連情報
|
|
FAQ(よくある質問と回答)を検索する
Loading
|