会社のブログを作ろうとしています。しかし、グローバルナビ部分の、画像のロールオーバーのやり方が、いまいち分からなくて悩んでいます。


http://rakueco.sakura.ne.jp/diary/

これの、上の部分にある「事業内容」とか「会社概要」とかをロールオーバーしたいのですが、CSSで処理するには、どうすればよいのでしょうか?

ちなみに、何で画像に外枠が付いてしまうのかも分かりません(涙)
ど、どなたか、お教えください!!

回答の条件
  • 1人2回まで
  • 登録:2007/09/10 19:00:34
  • 終了:2007/09/17 19:05:04

回答(5件)

id:BlackSabbath No.1

BlackSabbath回答回数53ベストアンサー獲得回数42007/09/10 19:11:00

ポイント20pt

http://edo-freiheit.sakura.ne.jp/eblog/2006/06/css_2.html

ロールオーバーはこことか参考に。


画像の枠線はスタイルシートに

img {border : none;}

とでも入れておけばいいでしょう。

id:chichikitoku

おお!!

画像の枠線は解決しました!!

ロールオーバーの方は・・・、これは、色違いの画像を2枚で一組にするってことでしょうかね??

2007/09/10 19:32:51
id:OhYeah No.2

オーイェー回答回数81ベストアンサー獲得回数142007/09/10 21:14:06

ポイント20pt

ロールオーバーの方に関してです。

id:BlackSabbathの回答にあるリンク先の方法は、

背景画像をCSSで変更するという方法になります。


上記の方法でロールオーバーを実現しようとした場合

現状のソースに修正を加える必要があるかと思います。

また、IEだとhover擬似クラスが対応していない要素があるという問題にも対処する必要があります。


どちらかというと、

以下のように、JavaScriptで実現してしまった方が

簡単かと思います。

http://java.misty.ne.jp/rollover.html

id:chichikitoku

ほうほう。

JavaScriptとは、また難しい感じですね^^;

簡単な、ピコッと変わる方法は、こっちなのでしょうか??

2007/09/10 23:13:42
id:Q-A No.3

Q-A回答回数106ベストアンサー獲得回数162007/09/11 08:28:14

ポイント20pt

cssは本文は変えられません。今の状態だと画像が本文扱いになっています。ロールーオーバーにするには画像を背景にします。

URLを拝見しましたが、これなら画像ではなく、背景の色や枠を変えることを望んでいるのでは?と思います。そのほうが、いろいろな点(SEOやユーザビリティ)で有利です。簡単にロールオーバーを説明し、自動でいろんなパターンを作ってくれるジェネレーターを紹介します。

cssによるロールオーバーで重要なのは

a:link/*未訪問のリンク*/

a:visited/*訪問済みリンク*/

a:active/*訪問中のリンク*/

a:hover/*マウスがリンクに乗っている*/

これの順番を守ることが、ロールオーバーには大切です。リンクが前提です。リンクでないと、IEがうまくいかないです。

http://www.accessify.com/tools-and-wizards/developer-tools/list-...

ここに画像なしで自動でできるジェネレーターがあります。英語ですが簡単です。とりあえずアルファベットで作って、後から該当個所を日本語に変えればいいです。

手順は

1ページ目List-O-Maticにリンク項目数を入力し next

2ページ目にリンク文字、りんくURL等を入力し next

3ページ目にメニュデザインを

    縦配列と横並びの候補が表示される)選び

id (ページに1つのみ)か

class(ページに幾つでも)か選び next

すると

4ページ目に出来上がった見本とHTMLとcssが別々に表示される。

あとはコピーして自分の必要な所に保存。あとは、さきほどの説明と見比べてもらえば、仕組みがわかると思います。

文字はテキスト文字でいいが、背景は色でなく画像URLに変えれば画像に対応できます。

id:chichikitoku

丁寧にありがとうございます!!

えっと、実はblogのグローバルナビ部分は画像(特殊なフォント)でして、色違いの画像にしたい、ってことなのです。。。

色違いを、別々の画像として作ってしまったので、何か良い方法がないかと。。。

このジェネレータも参考になりそうです。

2007/09/11 09:53:38
id:Yota No.4

Yota回答回数453ベストアンサー獲得回数282007/09/11 08:28:29

ポイント20pt

単に画像を入れ替えることだとしたら、

<img src="hoge1.gif"

onmouseover="this.src='hoge2.gif'"

onmouseout="this.src='hoge1.gif'" />

でできます。

id:chichikitoku

たしかに!!

これが一番ラクなのかな~。。。

2007/09/11 09:54:13
id:dasainer No.5

dasainer回答回数52ベストアンサー獲得回数22007/09/13 10:46:37

ポイント20pt

http://blog.webcreativepark.net/2007/07/18-221039.html

↑はどうでしょう。


ついでなので↓などみて情報をあさってみては?

http://feed.designlinkdatabase.net/tag/CSS%e3%80%80tips.aspx

id:chichikitoku

へーー!!

こんなサイトがあるんですね。

見てみます。

2007/09/13 10:52:10

コメントはまだありません

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません