大きな画像の上にメニューを画像ボタンで配置

締切済

質問者：seci
質問日時：2011/11/03 08:30
回答数：2件

http://www.amupurin.com/

の下の方にある『ようこそ　アムプリンの冒険へ』の箇所のように
大きな画像の上に
小さな画像ボタンが配置されています。

コレはどのようにすれば実現できるのでしょうか?

バックグランド画像(大きな画像)を指定し、
<table>や<div>で<button>は配置するのでしょうか?

大変申し訳ありませんが　簡単な例でソースの記述
をお示しいただけますと助かります。

日本地図の画像(大きな画像)に各都道府県が各都道府県の名産の画像で
クリックできるようなページをつくりたいのです。

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (2件)

最新から表示
回答順に表示

No.2

回答者： ORUKA1951
回答日時：2011/11/03 12:31

はは、上でしたね。

なら、スタイルシートは・・
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さえきちんと文書構造でマークアップされていれば、好きなようになると言うことです。

- 0
- 件

通報する

この回答へのお礼

早速のご回答頂きありがとうございました。ソースも示して頂き
非常に勉強になります。

通報する

お礼日時：2011/11/04 05:30

No.1

回答者： ORUKA1951
回答日時：2011/11/03 10:21

そのサイトのソースをザっと見ましたが、まったく参考にしてはならないものなのでした。

★Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
　でチェック

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. … )
★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">

＿</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>