- 締切済み
naviのa:hover画像を固定する方法
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- lefty17
- ベストアンサー率21% (46/214)
hover はマウスオーバーしているときのもので、ページ遷移した後は、hover されていないのは当たり前です。 URLパラメータなどからどのページを選択しているかを判断して、画像を取り替える、という分岐が必要かと思います
関連するQ&A
- a:hoverではない画像切り替え
http://www.domainking.jp/support/ このページの真ん中あたりに オレンジ色の｛よくあるご質問｝｛お知らせ・メンテナンス情報｝ボタンがありまして このボタンにカーソルをあてると画像がかわります。 HTMLをみてもCSSをみても普通のa:hoverではない画像切り替えのようなので 仕組みが全くわかりません この仕組みややり方を教えてください。
- ベストアンサー
- CSS
- 【DreamweaverCS5】ナビの画像について
Dreamweaverを利用してHPのヘッダやフッタ、ナビ（メニュー）を テンプレート化しようと思うのですが、 選択されているhtmlによって、該当するナビだけ違う画像を表示したいと思っています。 （http://www.okwave.co.jp/index.html のヘッダメニューのように） その場合は、ナビ部分をテンプレートに含めてしまうのは無理なのでしょうか。 例） index.html、company.html、qa.htmlとあった場合、 index.htmlのときのナビ画像は image1 image2 image3 company.htmlのときのナビ画像は、imageor1 image2 image3 qa.htmlのときのナビ画像は、image1 imageor2 image3 のような感じです。 思いついたのが、 メインのCSSと、ナビ用の画像を指定するCSSを分けて、 各htmlごとに、それぞれのナビ用のCSSを指定するやり方です。 一応これでナビもテンプレート部分に収めることができたのですが、 もう少し賢いやり方や方法があるのではないかと思っています。 メニューの中で、表示中のものだけ画像が違うのは 非常に良くあるパターンなので、何か賢いやり方があるのではないかと 思っています。 分かる方ご教授お願いします。
- ベストアンサー
- HTML
- 画像のある部分にロールオーバーをつける方法
質問タイトルの通り、画像のある部分にロールオーバーをつけ、さらにその部分にリンクを貼りたいのですが、ロールオーバーがうまくできません。 リンクを貼るだけならソフトにあるイメージマップ作成機能を使ったり、HTMLで作成すればできるのですが、イメージマップを作成した部分にロールオーバーをつける方法がわかりません。 ソフトはFireworks8、Dreamweaver8を使用しています。 ロールオーバーをつける方法がわかる方、ご教授ください。
- 締切済み
- HTML
- 画像をずらしてhoverしたいのですがIE7では×
一枚の画像をずらしてロールオーバーさせてナビをつくったのですが、ＩＥ7以外の全ブラウザではうまくいきますが、唯一IE7だけはうまくいきません。 5つのナビボタンのうち、左3つがポイントしても矢印と画像が変わりません。 ですが、それはトップページのナビだけの話で、他のページは普通にロールオーバーします。 ナビの部分はDreamweaverのテンプレートで編集不可能領域に含まれてますので、全ページのコードは同一です。 以下、コードです。 <!--HTML--> <body> <div id="container"> <div id="hedder"> <div id="toprogo"><a href="index.html"><img src="○○"/></a></div> <div id="main_image"><img src="○○"/></div> <div id="navi"> <div id="top"><a href="index.html"/></a></div> <div id="kodawari"><a href="particular.html" /></a></div> <div id="catalog"><a href="goods-catalog.html" /></a></div> <div id="from_producer"><a href="index.html" /></a></div> <div id="contact"><a href="mailto:" /></a></div> </div> </div> </div> </body> <!--ここからcss--> body { font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; color: #473906; background-color: #fafde1 ; } img { border: none; } a { color: #473906; text-decoration: none; } a:hover { color: #ff0000; } #container { width: 950px; margin: auto; } #hedder { widht: 950px; height: 380px; } #top_logo {margin-top: 10px; } #main_image { width: 950px; height: 300px; margin-top: 10px; } #navi { margin-top: 20px; /margin-top: 0 ; } #top a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; } #top a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px -50px; display: block; float: left; } #kodawari a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px 0px; display: block; float: left; } #kodawari a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px -50px; display: block; float: left; } #catalog a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px 0px; display: block; float: left; } #catalog a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px -50px; display: block; float: left; } #from_producer a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px 0px; display: block; float: left; } #from_producer a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px -50px; display: block; float: left; } #contact a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px 0px; display: block; float: left; } #contact a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px -50px; display: block; float: left; } つめて見にくくなっていますが、お願いいたします。
- ベストアンサー
- CSS
- 散らばった画像が右から左へ動くホームページの作り方
私はHTMLを少し勉強しまして、Dreamweaverでweb製作をしたことがある程度の初心者です。 JQueryも本を読みながら、何とか少し使いました。 JavaScriptとHTML5は勉強しておりません。 この度小さなお菓子やさんを開くことになり、そのホームページを作るのですが、 トップページを次のようなものにしたいと思っております。 1.大小様々な円形の画像が、水玉模様のように散らばっている。 2.その画像は右から左にゆっくりと、ずっと動いている。左に消えた画像はまた右から出てくる。 3.画像にカーソルを置くと画像の動きが止まり、その画像（お菓子）の 説明が表れる。（表れ方はまだ考えておりません。） お手本になるようなサイトやJQueryプラグインのサンプルが見つからず、 何かヒントやサイトをご存知でしたら教えていただけないでしょうか。 スマートフォンへの対応は後にしまして、まずはPC・タブレット用の ページを作りたいと思っております。 よろしくお願いいたします。
- 締切済み
- HTML
- jQueryで画像を重ねる
javascript初心者です。 複数の画像を少しずらして重ねて表示させ、下層の画像をクリックするとその画像が一番上に来るようにしたいのですが、そのようなことはjQueryでできるでしょうか？（画像でなくても何でもいいのですが・・・） 選択したものを一番上に表示させれればOKで、移動できる必要はありません。 お詳しい方が居られましたらご教授願います。
- ベストアンサー
- JavaScript
- Dreamweaverテンプレート内のナビ画像を、ページに合わせて変更
グローバルナビを画像（img src）で作成し、Dreamweaverでナビをテンプレート化しています。以下のような構造です。 <ul id="Navi"> <li><a href="link1.html"><img src="link1.gif" /></a></li> <li><a href="link2.html"><img src="link2.gif" /></a></li> <li><a href="link3.html"><img src="link3.gif" /></a></li> <li><a href="link4.html"><img src="link4.gif" /></a></li> <li><a href="link5.html"><img src="link5.gif" /></a></li> </ul> 疑問なのですが、上記のナビゲーションをdwtでテンプレ化すると、各HTMLファイルではナビ部分はロックがかかって編集できなくなりますが、その状態で、 「ナビ内の、今いる階層に対応したボタンの色を変える（＝別の画像にする）」 方法は何かありますでしょうか？ （例：会社概要のページにいる時はナビ内の「会社概要」ボタンの色を変える） コーディングのTips、.jsライブラリ、どんな解決策も大歓迎です。 ユーザビリティの確保＋作業の効率化のため、是非解決したい問題ですので、宜しくお願い致します。
- 締切済み
- CSS
- jQueryを使ったロールオーバーについて
初めまして。Webサイト作成の初心者です。 JQueryを使って、フェードエフェクト効果のあるロールオーバーを作成したいと思っております。 例えば次のサイトでは、若干フェードエフェクト効果のあるロールオーバーとなっておりますが、ソースを見るとbody内にはオフマウス用の画像だけが記されております。 http://mizuame.sakura.ne.jp/jquery.tgImageRollover/demo/script2.html オンマウス用の画像への切り替えはCSSで行っているのでしょうか？ ちなみに、グローバルメニューなどでは、オフマウス用とオンマウス用の画像を一つにし、CSSで座標を調整することで、ロールオーバーをすることが多いと思いますが、この方法だとJQueryを使ってロールオーバーにフェードエフェクト効果を付けることはできないのでしょうか？ それとも、やはりロールオーバーにフェードエフェクト効果を付けるには、オフマウス用の画像とオンマウス用の画像を、それぞれ用意し、オフマウス用の画像はHTMLに記述し、オンマウス用の画像はCSSに記述するのでしょうか？ どのような回答でもお受けしたい所存で御座いますので、どうか宜しくお願い致します！！
- ベストアンサー
- JavaScript
- jQueryを使ったブロック外の画像変化
いくつか候補としてパターンをあげたいのですが知識不足で具体案が浮かばないので質問参りました。 参照や情報程度でもかまいませんのでよろしくお願いします。 町名の一覧（テキスト）と、地図画像の２つブロックがある状態で、町名をポイントすると地図の該当箇所の色が変わる（hover用画像を作るでも四角い領域で色を乗せるでもよい）、という仕組みを作りたいのですが、以下質問です。 １，jQueryでロールオーバーさせるのが一番簡単だと聞きましたが「jquery ロールオーバー」で調べてはみましたが希望する情報がありませんでした。調べる方向が間違ってるのでしょうか（こういう検索をしろ、みたいなのでかまいません） ２ javaScript以外で上記仕組みを行うことは可能でしょうか。 ※対応する画像は１つではなく、ページによって複数枚の場合もあります。（テキスト１～５まで画像Aの中に変化する箇所があり、テキスト６～８が画像B、など）
- ベストアンサー
- JavaScript
- CSSでの画像メニューの設定について
現在CSSの勉強中です。 外部CSSで画像を使用してリンクメニューを作ったのですが、 やり方があっているか確認をお願いしたいのですが。 off時の画像（白）、ページのin時の画像（赤）、hover（青）の画像を用意しています。 CSS部分▼ .navi01 a{ width:102px; height:43px; background-image:url(common/img/navi_top_off.gif); background-repeat:no-repeat; } .navi01_on a{ width:102px; height:43px; background-image:url(common/img/navi_top_on.gif); background-repeat:no-repeat; } .navi01 a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } .navi01_on a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } HTML部分▼ <li class="navi01_on"><a href="index.html" title="トップページ"><span class="none">トップページ</span></a></li> <li class="navi02"><a href="work.html" title="仕事内容"><span class="none">仕事内容</span></a></li> CSSの講座のページなどを見ると、設定がもうすこし少なくても うまく動いていたりして、無駄な部分があるのではと思っています。 今の私の知識ではどこが悪いのか分からないので、 教えて頂けると幸いです。 （もし良い講座のページ、本がありましたら教えて頂ければと思います。） 宜しくお願い致します。
- ベストアンサー
- CSS
