- 締切済み
大きな画像の上にメニューを画像ボタンで配置
http://www.amupurin.com/ の下の方にある『ようこそ アムプリンの冒険へ』の箇所のように 大きな画像の上に 小さな画像ボタンが配置されています。 コレはどのようにすれば実現できるのでしょうか? バックグランド画像(大きな画像)を指定し、 <table>や<div>で<button>は配置するのでしょうか? 大変申し訳ありませんが 簡単な例でソースの記述 をお示しいただけますと助かります。 日本地図の画像(大きな画像)に各都道府県が各都道府県の名産の画像で クリックできるようなページをつくりたいのです。
- みんなの回答 （2）
- 専門家の回答
みんなの回答
- ORUKA1951
- ベストアンサー率45% (5062/11036)
はは、上でしたね。 なら、スタイルシートは・・ div.nav{ ＿width:480px;/* 画像の横サイズ */ ＿margin:0 auto; /* 中央へ */ } div.nav ol,div.nav ol li{ ＿display:block;list-style:none; /* リストをブロックに */ ＿margin:0 2px; /* 隣との隙間 */ ＿float:left; /* フロート */ } div.nav hr{ ＿border:none; ＿height:360px; ＿clear:left; ＿background:url(./images/sample04.jpg) no-repeat; /* 背景画像 */} } 左におきたければ div.nav{ ＿width:640px; ＿margin:0 auto; /* 中央へ */ ＿background:url(./images/sample04.jpg) no-repeat right; /* 背景画像 */ ＿min-height:360px; } div.nav ol{width:160px;} div.nav ol,div.nav ol li{ ＿display:block;list-style:none; /* リストをブロックに */ ＿margin:2px 0; /* 隣との隙間 */ } div.nav hr{ ＿visibility:hidden; } 図の上に並べたければ div.nav{ ＿width:480px; ＿margin:0 auto; /* 中央へ */ ＿background:url(./images/sample04.jpg) no-repeat right; /* 背景画像 */ ＿height:360px; } div.nav ol{width:160px;} div.nav ol,div.nav ol li{ ＿display:block;list-style:none; /* リストをブロックに */ ＿position:relative; } div.nav ol li a{ ＿position:absolute; ＿display:block; ＿width:80px;height:60px; } div.nav ol li a[href="./hokkaidou"]{left:240px;top:10px;} div.nav ol li a[href="./aomori"]{left:220px;top:80px;} div.nav ol li a[href="./iwate"]{left:250px;top:150px;} div.nav hr{ ＿visibility:hidden; } 要は、HTMLさえきちんと文書構造でマークアップされていれば、好きなようになると言うことです。
- ORUKA1951
- ベストアンサー率45% (5062/11036)
そのサイトのソースをザっと見ましたが、まったく参考にしてはならないものなのでした。 ★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) でチェック HTMLは、次のようなものになります。あくまで、ナビゲーションリンクでしたら、 <div class="nav"> <ul> <li><a href="./hokkaidou"><img src="./images/hokkaidou.gif" width="" height="" alt="北海道"></a></li> <li><a href="./aomori"><img src="./images/aomori.gif" width="" height="" alt="青森県"></a></li> <li><a href="./iwate"><img src="./images/iwate.gif" width="" height="" alt="岩手県"></a></li> </ul> </div> とかでしょう。本来は画像をここに書かないほうが良いのでしょうが、ここでは初心者向けにしておきます。 スタイルシートでデザインしていきます。 すべてのサンプルです。 ★Another HTML-lint gateway( http://openlab.ring.gr.jp/k16/htmllint/htmllint.html ) ★The W3C Markup Validation Service( http://validator.w3.org/#validate_by_input ) でチェック済み ※＿はタブの代わりです。タブに戻してください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ja"> <head> ＿<meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> ＿<title>サンプル</title> ＿<meta name="author" content="ORUKA1951"> ＿<meta http-equiv="Content-Style-Type" content="text/css"> ＿<link rev="made" href="mailto:oruka1951@hoge.com" title="send a mail" > ＿<link rel="START" href="../index.html"> ＿<style type="text/css"> <!-- div.nav{ ＿width:480px;/* 画像の横サイズ */ ＿margin:0 auto; /* 中央へ */ ＿background:url(./images/sample04.jpg) no-repeat; /* 背景画像 */ ＿padding-top:360px; /* 画像の高さ */ } div.nav ol,div.nav ol li{ ＿display:block;list-style:none; /* リストをブロックに */ ＿margin:0 2px; /* 隣との隙間 */ ＿float:left; /* フロート */ } div.nav hr{ ＿visibility:hidden;/* フロート解除 */ ＿clear:left;/* 見えなくする */ } --> ＿</style> </head> <body> ＿＿<div class="nav"> ＿＿＿<ol> ＿＿＿＿<li><a href="./hokkaidou"><img src="./images/hokkaidou.gif" width="80" height="60" alt="北海道"></a></li> ＿＿＿＿<li><a href="./aomori"><img src="./images/aomori.gif" width="80" height="60" alt="青森県"></a></li> ＿＿＿＿<li><a href="./iwate"><img src="./images/iwate.gif" width="80" height="60" alt="岩手県"></a></li> ＿＿＿</ol> ＿＿＿<hr> ＿＿</div> </body> </html>
お礼
早速のご回答頂きありがとうございました。ソースも示して頂き 非常に勉強になります。