オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。

解決済

質問者：bigmacstar
質問日時：2010/04/23 16:50
回答数：4件

オンマウスで画像変更、クリックでリンク先に飛ばしたいのです。

右側にメニューボタン（１～４）があり
各ボタンにオンマウスすると左側に画像を表示、
クリックすると別ページにリンクさせたいのです。
フレームは使っていません。

初心者なので具体的なタグを教えていただくと助かります。

通報する

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

質問の本文を隠す

回答 (4件)

ベストアンサー優先
最新から表示
回答順に表示

No.4ベストアンサー

回答者： ORUKA1951
回答日時：2010/04/24 00:08

続き

　　ul.imageList li a {
　　　　display:block;
　　　　width:100%;
　　　　height:100%;
　　　　font-weight:bold;
　　　　background-color: rgb(80,160,255);
　　}
　　ul.imageList li a img{
　　　　display:none;
　　　　border:none;
　　}
　　ul.imageList li a span{
　　　　line-height: 110px;
　　}
　　ul.imageList li a:visited{
　　　　background-color: rgb(40,80,255);
　　}
　　ul.imageList li a:hover,
　　ul.imageList li a:focus{
　　　　background-color: rgb(0,0,255);
　　　　color:yellow;
　　}
　　ul.imageList li a:active{
　　　　background-color: rgb(255,160,80);
　　　　color:red;
　　}
　　ul.imageList li a:hover img{
　　　　display:inline;
　　　　position:absolute;
　　　　top: 10px;
　　　　left:10px;
　　　　width:640px !important;
　　　　height:480px!important;
　　}
　　-->
　　</style>
　　<link rel="START" href="../index.html">
</head>
<body>
　　<h1>メニュー</h1>
　　<ul id="nav" class="imageList">
　　　　<li><a href="./img/1.jpg"><span>１ページへ</span><img src="./img/1.jpg" width="120" height="90" alt="写真１"></a></li>
　　　　<li><a href="./img/2.jpg"><span>２ページへ</span><img src="./img/2.jpg" width="120" height="90" alt="写真２"></a></li>
　　　　<li><a href="./img/3.jpg"><span>３ページへ</span><img src="./img/3.jpg" width="120" height="90" alt="写真3"></a></li>
　　　　<li><a href="./img/4.jpg"><span>４ページへ</span><img src="./img/4.jpg" width="120" height="90" alt="写真4"></a></li>
　　</ul>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

アドバイスありがとうございました。
わざわざソースまで書いていただいて非常に助かりました。
早速手直しを行ってみます。

通報する

お礼日時：2010/04/28 13:10

No.3

回答者： ORUKA1951
回答日時：2010/04/24 00:07

ソースです。

HTML4.01 strictで作成してあります。

下記ソースでは、このサイトの仕様上タブが無視されるので、タブは全角スペース２個に置き換えてあります。テストするときは全角スペース２個をタブにすべて置換してください。
★ソース部分をテキストエディタにコピーペーストして、sample.htmlとでもして保存する。
★画像は同じ場所にimgというフォルダーを作成し、その中に
　　640×480ピクセルで1.jpg～4.jpgの４種類の画像をで作成して保存すること
★リンク先はここでは同じ画像にしてあります。

HTML本体のリンクのリスト自体は下記の様な単純な物でSEO的にも全く問題ないでしょう。
<body>
　　<h1>メニュー</h1>
　　<ul id="nav" class="imageList">
　　　　<li><a href="./img/1.jpg"><span>１ページへ</span>
　　　　　　<img src="./img/1.jpg" width="120" height="90" alt="写真１"></a>
　　　　</li>
　　　　<li><a href="./img/2.jpg"><span>２ページへ</span>
　　　　　　<img src="./img/2.jpg" width="120" height="90" alt="写真２"></a>
　　　　</li>
　　　　<li><a href="./img/3.jpg"><span>３ページへ</span>
　　　　　　<img src="./img/3.jpg" width="120" height="90" alt="写真3"></a>
　　　　</li>
　　　　<li><a href="./img/4.jpg"><span>４ページへ</span>
　　　　　　<img src="./img/4.jpg" width="120" height="90" alt="写真4"></a>
　　　　</li>
　　</ul>
</body>

念のため
Another HTML-lint gateway ( http://openlab.ring.gr.jp/k16/htmllint/htmllint. … )
W3C CSS 検証サービス ( http://jigsaw.w3.org/css-validator/#validate_by_ … )
で検証済みです。

以下HTML全文
<!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 http-equiv="Content-Style-Type" content="text/css">
　　<link rev="MADE" href="mailto:hoge@hoge.com">
　　<style type="text/css">
<!--
　　html,body{margin:0px;padding:0px;}
　　body{background-color:black;color:white;}
　　body{ text-align:center;/* IE対策 */}
　　ul.imageList{
　　　　display:block;
　　　　position:relative;
　　　　list-style:none;/* IE対策 */
　　　　width:790px;
　　　　margin-top:10px;
　　　　margin-left:auto;
　　　　margin-right:auto;
　　　　height:500px;
　　　　color:black;
　　　　background:white url("./img/1.jpg") no-repeat 10px 10px;
　　　　padding:10px 0px 0px 0px;
　　}
　　ul.imageList li{
　　　　list-style:none;
　　　　display:block;
　　　　width: 120px;
　　　　margin-left:660px;
　　　　margin-bottom:10px;
　　　　height:112px;
　　}
続く