よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたい

質問

よろしくお願いいたします。cssを使ってロールオーバーを横並びにしたいと考えております。そこで以下のような記述をしたいと考えているのですがうまく行かず、また原因もわからずに困っておます。どなた様かご指導のほどよろしくお願いいたします。
まず以下の記述をしました。

［html］

<div id="menu">
<ul>
<li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li>
<li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li>
<li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li>
<li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li>
<li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li>
<li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li>
<li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li>
</ul></div>

［css］

#menu ul{
list-style-type:none;
}

#menu ul li{
display:inline;
}

http://desktop10.web.fc2.com/test.html

上記URLにアップしています。よろしければ見てみてください。

画像も、横並びにならず、マウスを合わせたときの画像も変化しません。また、ブラウザ上の左下に
ページでエラーが発生しました。と出てしまいます。
お手数では御座いますがどなた様かご教示をお願いできませんでしょうか？

わたしとしては、以下のような感じにしたいと考えております。

http://desktop10.web.fc2.com/test1.html

なお、一応記載させて頂きますが画像の中に「ホームページ製作」や「SNS」等と・・・ありますが、私は
現在cssの学習をしており、特別パソコン関係の商売をしているわけでもありません。ただ、今後の自分のために色々と出来ればよいと考えているところであります。

初心者では御座いますが、どなた様かご指導のほどよろしくお願いいたします。

回答No.3

zeff · ベストアンサー

ロールオーバーについて
前回解答させていただいた者ですが、
クォーテーションの閉じ方に不備があります。

おそらく半角のために見づらかったと思うので、
クォーテーションだけ全角にして書きますと、

onmouseover=”this.src=’img/11.gif’”
onmouseout=”this.src=’img/1.gif’”

onmouseoutは合ってますがonmouseoverのほうが足りていません。
画像URLを閉じているシングルクォーテーションのすぐ後ろに
ロールオーバーのを囲うダブルクォーテーションがあります。

onmouseover=”○○”
this.src=’□□’
○○の中にthis.src=’□□’を入れます。
onmouseover=”this.src=’□□’”

ダブルクォーテーションの中で囲う時は
シングルクォーテーションを使う決まりがあります。
逆でも構いません。

また、
liをinlineにするかfloatにするかは
自信はあまりないのですが、
自分はinlineで上手くいったのでそう回答しました。
floatの方が上手くいくのならばこだわりはありません。

それから、
他の回答者さんがおっしゃっているとおり、
<a>タグ内のリンクに関しては違反、と思います。
http://******-****.com/tq/****.htm
↑これのことです。

お礼

zeff様。この度はありがとう御座いました。
参考になりました

補足

zeff様。ご回答ありがとう御座いました。深く御礼申し上げます。今回ダブルクォーターが抜けていた件早速修正させて頂きましたが、残念ながら何も変わりませんでした。

<div id="menu">
<ul>
<li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif'" onmouseout="this.src='img/1.gif'" /></a></li>
<li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif'" onmouseout="this.src='img/3.gif'" /></a></li>
<li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif'" onmouseout="this.src='img/4.gif'" /></a></li>
<li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif'" onmouseout="this.src='img/6.gif'" /></a></li>
<li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif'" onmouseout="this.src='img/7.gif'" /></a></li>
<li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif'" onmouseout="this.src='img/8.gif'" /></a></li>
<li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif'" onmouseout="this.src='img/5.gif'" /></a></li>
</ul></div>

上記のように変更もしたのですが、横にきちんと並んでくれません。
またブラウザで見てもやはりページでエラーが発生と出てきてしまいます。

再度お願いできませんでしょうか？

回答No.2

tenderfeel

素材を無断使用しているならば別の素材に変更すべきですし、
ページソースに残っているaタグは可及的速やかに消した方がいいです。
勉強中なら「人が作った素材は許可無く使用する事が出来ない」ということはまず頭に入れておくべきでしょう。

>画像も、横並びにならず、マウスを合わせたときの画像も変化しません
画像を横並びにする→ CSS
マウスを合わせたときの画像も変化→JavaScript

ブロック要素を横に回り込ませるのは通常floatを使います。

#menu ul li{
float:left;
}

マウスオーバーでimgタグの画像を変更する場合はJavaScriptが必要ですが、
リンク先のページには見当たりませんでした。
エラーが出ているのはそのJavaScriptが吐いているものだと思います。
ソースがなかったのでこちらに関しては回答ができません。

回答No.1

yambejp

とりあえず、いまのソースはonmouseoverのダブルクォーテーションが
閉じていませんが、それは単なる転記ミスですか？

補足

yambejp様。この度はご回答くださいまして真にありがとう御座います。

＞いまのソースはonmouseoverのダブルクォーテーションが
＞閉じていませんが、それは単なる転記ミスですか？

すいません。今回のcsの記述はやはり、OkWave様のような掲示板というのでしょうか？
そちらで作成して頂けたもので、よくわからないのです。このような補足になってしまい申し分け御座いません。

htmlには以下のように記述できたのですが、その後のcssの記述がわからずに困っております。

<div id="menu">
<ul>
<li id="menu1"><a href="a/index.html" title="HOME" ><img src="img/1.gif" alt="HOME" onmouseover="this.src='img/11.gif' onmouseout="this.src='img/1.gif'" /></a></li>
<li id="menu2"><a href="b/index.html" title="ホームページ製作"><img src="img/3.gif" alt="HOME" onmouseover="this.src='img/33.gif' onmouseout="this.src='img/3.gif'" /></a></li>
<li id="menu3"><a href="c/index.html" title="ネットショツプ製作"><img src="img/4.gif" alt="HOME" onmouseover="this.src='img/44.gif' onmouseout="this.src='img/4.gif'" /></a></li>
<li id="menu4"><a href="d/index.html" title="SNSサイト製作"><img src="img/6.gif" alt="HOME" onmouseover="this.src='img/66.gif' onmouseout="this.src='img/6.gif'" /></a></li>
<li id="menu5"><a href="e/index.html" title="SEOプロモーション"><img src="img/7.gif" alt="HOME" onmouseover="this.src='img/77.gif' onmouseout="this.src='img/7.gif'" /></a></li>
<li id="menu6"><a href="f/index.html" title="出版・印刷・その他"><img src="img/8.gif" alt="HOME" onmouseover="this.src='img/88.gif' onmouseout="this.src='img/8.gif'" /></a></li>
<li id="menu7"><a href="g/index.html" title="お問合せ・御注文"><img src="img/5.gif" alt="HOME" onmouseover="this.src='img/55.gif' onmouseout="this.src='img/5.gif'" /></a></li>
</ul></div>

わたしとしては、以下のような感じにしたいと考えております。

http://desktop10.web.fc2.com/test1.html

現在は以下のような状態です。

http://desktop10.web.fc2.com/test.html

お手数では御座いますが再度のご指導いただけませんでしょうか？