Dreamweaverコミュのロールオーバー機能

初歩的な質問で申し訳ないのですがよろしくお願いいたします。

Dreamweaverについているビヘイビアで以下の項目が可能なのでしょうか。

「画像に画像右のようにマウスオンした時に矢印が出るようにできるかどうか」

ただし

■左メニューの画像のようにメニューをCSSで背景としている
■リンクは#navi a{position:absolute}で指定している

という問題があり、「元イメージ」「ロールオーバー後のイメージ」に1つ1つのボタンを入れることができませんし、それぞれリンクのみで分けているので機能が使えないのです。

もし方法があるなら誰か助けてください！

よろしくお願いします。

コメント(7)

最初
全て
最新の40件

[1] mixiユーザー 01月30日 03:59

テスト作成中のページで申し訳ないんですがこんな感じで...
http://depeche.sakura.ne.jp/test_site/about.html
横並びのナビゲーションですが、私は元々書籍で紹介されていた縦並びのナビゲーションをCSSでロールオーバー効果を持たせるソースを参考にしましたので、縦並びもちょっとアレンジすれば可能です。

通常のナビゲーションの背景画像
http://depeche.sakura.ne.jp/test_site/images/navi1.gif

オンマウス状態のナビゲーションの背景画像
http://depeche.sakura.ne.jp/test_site/images/navi2.gif

CSS
http://depeche.sakura.ne.jp/test_site/css/other.css

ただ、これは各項目の縦幅横幅が同じになる様に画像を作らないと出来ないです。
ご提示の画像は一番上の項目と一番下の項目が余白をとっている分、縦が大きくなっていますね。
これを変えないといけないですが、ナビゲーション部分が入るボックスの余白をコントロールすれば可能かと思います。

参考にしたのは
http://www.amazon.co.jp/exec/obidos/ASIN/4798107166/qid=1138561110/sr=1-1/ref=sr_1_2_1/249-1086165-2460338
こちらの書籍です。

[2] mixiユーザー 01月30日 04:08

あ、すいません、めっちゃDreamweaverのビヘイビアでっていうの関係ない回答してしまいました...。
フルCSSでロールオーバー効果出してます...。
しかも自分、Dreamwerver持ってるのに手打ちしてます...すいません...。

[3] mixiユーザー 01月30日 11:45

CSSをビヘイビアで制御することはデフォルトの機能では持ち合わせていないので地道にCSSでやるしかないのではないしょうか？

>■左メニューの画像のようにメニューをCSSで背景としている

a:hoverという要素はご存じでしょうか？

[4] mixiユーザー 01月30日 21:25

＞姫様
どうも、ご丁寧にありがとうございます！！
->これは各項目の縦幅横幅が同じになる様に画像を作らないと出来ないです。

「初めての方」と「お問合わせ」部分を、「CSSとは」などと同じ縦幅にするいうことですよね。

>あきら様
そうですね！参考書などを見ましてもロールオーバーはa:hoverを使用しているので確実な方法かと思います。

姫様もおっしゃっている通り

>ナビゲーション部分が入るボックスの余白をコントロールすれば可能かと思います。

この部分で悩んでいますが、とりあえずやらなくては進まないので実行してみようと思います！

[5] mixiユーザー 01月30日 21:30

え～と、ご紹介した方法を実行するには画像の上下を切らないといけないのはご理解頂けたと思いますが、ご提示の画像は背景が白ですし、カットした部分をボックスの余白（paddingでもmarginでもいいですが）をとれば画像と同じ様に出来るのではないかと。

[6] mixiユーザー 01月31日 00:48

>姫様
何とかできました！
#navi ulの部分で絶対配置指定してしまいました。
そのためfirefoxとIEでズレが生じてしまい、苦戦しましたが･･。

子孫セレクタで"IE以外に適用"という形で回避できたのでよかったです。

さて、小さなことなのですがまた問題が＞＜。

マウスオンするとマウスオーバーの方の画像が少しだけ右に
寄ってしまうのはなぜでしょう。。

まったく同じ大きさで同じ感覚のはずなのですが、少しだけ動いてしまいます。

[7] mixiユーザー 01月31日 01:07

今どうなっているのか、そのページのURLとCSSのURLを提示して頂いた方がいいのではないかと。
若しくはソースを。

自分もまだまだ勉強中なので、前後の関係がどう影響しているか、解析しきれないかもしれませんが（汗
その時はもっと詳しい方が指摘して下さると思います。

ログインすると、みんなのコメントがもっと見れるよ