メニュー

サイト構成
背景画像を元にサイトを構成

CSS
DIVタグで枠を作成
DIVタグで見出しに枠を作成
画像に文字を表示
マウスフォーカスで背景画像変更
tableタグでボタンを作成

トップ
E-Mail
xml

ASP.Netのお勉強
VB.Netのお勉強
phpのお勉強
Excel マクロ・VBAのお勉強
ASP.Netで掲示板を作成しよう
AJAXのお勉強
Javaのお勉強
連想書籍検索
世界の観光地検索
路線図
総合サイトCocoaLiz
マウスフォーカスで背景画像変更(CSS)@Webデザインのお勉強

よくメニューなどで、マウスフォーカス時に、
背景画像が変化されますね。

以下では、Divタグ内のリンクに対して、
マウスフォーカス時に、背景画像を変更しています。

divタグに、「clss=class="hoverDiv">」とする。
head内に、CSSを記述する。

「div.hoverDiv a」:リンクの初期設定
「div.hoverDiv a:hover」:マウスフォーカス時の設定


<html>
<head>
<style type=text/css>

div.hoverDiv a{
    display:block;
    width:171px;
    height:62px;
    background-repeat:no-repeat;
    background-image:url("./img002.jpg");
}

div.hoverDiv a:hover{
    background-image:url("./img003.jpg");
}

</style>
</head>
<body>
<div class="hoverDiv">
    <a href="#></a>
</div>

</body>
</html>




Copyright (C) 2008 Webデザインのお勉強. All Rights Reserved.