人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

●質問者: chichikitoku
●カテゴリ:インターネット ウェブ制作
✍キーワード:いまいち グローバル ロールオーバー 会社 画像
○ 状態 :終了
└ 回答数 : 5/5件

▽最新の回答へ

1 ● BlackSabbath
●20ポイント

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

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


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

img {border : none;}

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

◎質問者からの返答

おお!!

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

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


2 ● オーイェー
●20ポイント

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

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

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


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

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

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


どちらかというと、

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

簡単かと思います。

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

◎質問者からの返答

ほうほう。

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

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


3 ● Q-A
●20ポイント

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に変えれば画像に対応できます。

◎質問者からの返答

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

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

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

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


4 ● Yota
●20ポイント

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

<img src="hoge1.gif"

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

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

でできます。

◎質問者からの返答

たしかに!!

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


5 ● dasainer
●20ポイント

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

↑はどうでしょう。


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

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

◎質問者からの返答

へーー!!

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

見てみます。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ