ホームページ作成 - ブロック要素を回り込ませる - WEBサイト作成 フリー素材コード の1uphp.com スタイルシート,htmlやFirefox,Operaなどのブラウザの表示結果まで。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <meta http-equiv="Content-Style-Type" content="text/css"> <style type="text/css"> <!-- .sample0,.sample1,.sample3 { width:100px; border:solid 3px #0000ff; background-color:#3366cc; color:#ffffff; text-align:cent
ホームページ作成 - ロールオーバー ～全てのボタンを１枚の画像にして移動させる～ - WEBサイト作成 フリー素材コード の1uphp.com スタイルシート,htmlやFirefox,Operaなどのブラウザの表示結果まで。
ロールオーバー 全てのボタンを１枚画像にして移動する マウスが上に来た時に、別々の画像では無く、全てのボタンを１枚の画像にして、表示位置を移動させてロールオーバー効果を出す方法です。 ↑この１枚の画像と、対応する項目部分とで、それぞれ表示位置を指定して表示させ、マウスが上に来た場合に下の対応する部分の画像を表示させる事になります。 １枚の画像なので、別々の画像で行う場合とは違い表示しない画像で先に読み込む必要がありません。 ここでは、javaを使用しない方法になります。 リスト（<ul>～</ul>）で作成したメニューの各項目のリンクの背景に画像の対応する上の部分を表示し、マウスが上に来た時に背景画像を対応する場所まで移動させて下半分を表示する方法です。 よって、画像の作りも上半分に最初に表示する画像、下半分に後の画像、という様に作りましょう。 半分の画像の高さと幅が下記の様に作成されてま
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
