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

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

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

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

img {border : none;}

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

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

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

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

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

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

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

どちらかというと、

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

簡単かと思います。

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

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

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

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

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　（ページに１つのみ）か

class（ページに幾つでも）か選び next

すると

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

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

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

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

<img src="hoge1.gif"

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

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

でできます。

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

↑はどうでしょう。

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

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