• 締切済み

オンマウスで解る方法教えて!

htmlでテキスト文章を画像としてリンクファイルでアップしています。 この場合で、マウスを乗せると乗せたことが解るようにしたいのですが、画像の場合はどのような方法があるのでしょうか? 画像の入れ替えは望んでいません。例えば、画像全体の色が変るとか、画像枠が表示される等を望んでいます。 cssではなしにhtmlで書きたいと思っています。 検索してもヒットしません。詳しい方居られましたら宜しくお願いします。

みんなの回答

  • Ogre7077
  • ベストアンサー率65% (170/258)
回答No.1

案1. マウスが乗ったら枠を青くする <img src=テキスト文章の画像.png style="border:medium solid transparent" onmouseout="this.style.borderColor='transparent'" onmouseover="this.style.borderColor='blue'"> 案2. マウスが乗ったら色を薄くする <img src=テキスト文章の画像.png onmouseout="this.style.opacity=1" onmouseover="this.style.opacity=0.5">

kfjbgut
質問者

お礼

cssで希望どおりにしました。

kfjbgut
質問者

補足

駄目ですね 変化しないです。やはり、cssでないと無理なんですかね? 画像はgifです。

関連するQ&A

  • CSSを使ってオンマウス時の画像を変更したい。

    よろしくお願いします。 ブラウザーの影響が少ないcssを使って、次のことがしたいのですが教えてもらえますでしょうか。 リンクの張ってある画像をオンマウスにしたときに、画像の周りに枠をつけるか色を変えて選択していることがわかるようにしたいのです。 よろしくお願いします。

    • ベストアンサー
    • CSS
  • 特定のオンマウス画像にだけ枠をつけるには?

    いつもお世話になっております 今回もどうぞよろしくお願いします ◆◆要点◆◆ 特定のリンク画像だけにカーソルが重なったときに、リンク画像の周りに枠が表示されるようにするにはどうしたらいいですか? ◆◆現状◆◆ CSSスタイルの:hover img タグでいろいろいじっているのですが、どうしても全てのリンク画像に枠が表示されてしまいます。個別に設定する方法がわかりません どうぞよろしくお願いします

    • ベストアンサー
    • HTML
  • オンマウスで特定の画像だけ1ピクセル下げたい

    オンマウス時にボタンを押したような効果を出すためリンク画像を1ピクセル下げたいのですが cssで指定の際 a:hover { position: relative; top: 1pt; } 等としてしまうと、リンクが設定されている文字も画像も全てオンマウス時に動いてしまいます。 自分でもしばらく調べてみたのですが、検索の語がイマイチなのか欲しい情報にヒットしませんでした。 特定のの画像だけ、または文字列だけを動かす指定の書き方がありましたら 教えていただけるとありがたいです。

    • ベストアンサー
    • HTML
  • オンマウスで画像変更(CSS)

    リンク画像にカーソルを乗せると画像が変わる、というものをやりたいのです。 シンプルに記述できる分JavaScriptよりもCSSの方がいいのかなと思ったのですが、 CSSだとimgタグではなくbackgroundを入れ替える形になり、 そうするとaタグでテキストを使い、そのテキストを隠さなければいけません。 display:none;やtext-indent:-9999px;は使いたくないのですが、 他の方法はありますか? また、こういうオンマウスで画像変更ってJavaScriptとCSSどちらが主流なのでしょうか? よろしくお願いします。

    • 締切済み
    • CSS
  • リンク画像をホバーアニメーションで暗くする方法

    html、css、js等でリンクの設定された画像を、マウスオーバーでゆっくりと暗くなりテキストが表示される方法はありませんでしょうか。 ・マウスオーバーでゆっくり画像が暗くなり、テキストが表示される ・画像を押すとリンク先へ移動する ・マウスを画像から離すと元に戻る もし上記のものが難しければ、ゆっくりと別の画像に入れ替わる方法はありませんでしょうか。 どなたかご教授お願い致します。

    • ベストアンサー
    • HTML
  • formのsubmitボタンを画像にして、オンマウスで画像を切り替えた

    formのsubmitボタンを画像にして、オンマウスで画像を切り替えたい。 HTMLとCSSでHP制作しています。 formのsubmitボタンを自作のボタン画像に変えて、ボタンにマウスを乗せると 画像の色を変えるという事をやりたいと思っています。 例えば赤ボタンをオンマウスで青ボタンにするという感じです。 ネット検索してボタンを画像に変える事は出来ました。 ですが、オンマウスで画像を切り替えるやりかたがよくわかりません。 javascriptを使ったものを見かけたように思うのでこちらで質問してみました。 CSSで普通のリンクボタンの画像切り替えは出来るのですが、 formではそういうわけにはいかないのでしょうか? javascriptがよくわかならいのですが、そんな私にも出来るでしょうか? どこか参考サイトがありましたら、紹介して頂けるとありがたいです。 アドバイスよろしくお願い致します。

  • テキストにオンマウスで指定箇所に画像を表示

    画像またはテキストリンクにオンマウスすると指定の場所にそれぞれのリンクで 指定の画像を表示するようにしたいのですが、色々調べてみたもののよくわかりませんでした。 リンク1にオンマウスして画像が出て、そのリンク1からマウスを放しても 別所に表示された画像はそのままで、次のリンク2にオンマウスすると 次の画像と入れ替わる、というようにしたいのですが・・・説明が下手ですみません^^; このようにしたい場合、どのようにしたらいいでしょうか。

  • オンマウスで文字そのものを変える方法を教えてください。

    初めて挑戦したHPがほぼできあがりました。 メニューが英文でわかりにくいかもしれませんので、テキストにマウスを乗せると日本語に変わる、あるいは英語の隣に日本語が出現するように、手を入れたいと思います。  文字の装飾や画像を使う方法は検索できましたが、文字→文字がなかなか見つかりません。 よろしくお願いします。

  • オンマウスで流れる文字

    「リンクがはってある文字列があり、マウスのポインタを  リンクの上にもっていく(onmouseover、a:hover状態)と文字列が左に流れる」 という仕掛けをしたいのですが、方法がわかりません。 携帯でいうところの(au限定)「<div style="white-space:nowrap">オンマウスで文字が流れます</div>(参考サイト…http://htmlcssdesign.no-mania.com/Entry/3/)」状態をPCサイトで表現したいです。 ブラウザが限定されも良いので何か方法はないでしょうか? たとえば、 「<marquee onmouseout=this.stop() onmouseover=this.start()>~</marquee>」を指定しておいて、ページ読み込み時に全Marqueeをストップさせるとか考えたのですが、 恥ずかしながらJavaScriptがあまり詳しくなく、かなり検索してますが 「全Marqueeをストップさせる」方法自体がどうしてもわかりません。 第一「Marquee」ですと、枠の一番右から始まってしまい 「すでに文字列が表示されていて、  マウスを上にもっていくとそのまま左に動き出す」 という形になりません。 「動いてる文字列を止める」というのは沢山見つかるのですが、 「止まっている文字列を動かす」が全くみつかりません。 《html》 <div id="box"> <ul> <li><a href="#">長ーーい文章。長い文章。長い文章。長い文章の終了。</a></li> <li><a href="#">長ーーい文章2。長い文章。長い文章。長い文章の終了。</a></li> <li><a href="#">長ーーい文章3。長い文章。長い文章。長い文章の終了。</a></li> <li><a href="#">長ーーい文章4。長い文章。長い文章。長い文章の終了。</a></li> <li><a href="#">長ーーい文章5。長い文章。長い文章。長い文章の終了。</a></li> </ul> </div> 《CSS》 *{marign:0; padding:0;} div#box{ width:200px; overflow:hidden; } div#box li{ white-space:nowrap } === 上記でいうと、リンクのはられてる文字列「長ーーい…長い文章の終了。」の上に マウスをもっていくとすこしずつ左に流れ始めるイメージです。 何卒よろしくお願い致します。

  • 教えて下さい!リンクボタンの画像をオンマウスで変える方法

    今HPを縦フレームで左ページにメニュー、右ページにtarget指定でページが切り替わるようにしています。 左ページのメニューはgif画像のボタンなのですが、画像に触れると画像が変化し、画像からマウスを放すと元の画像に戻るようにしたいのです。 1.マウスで画像1に触れると画像2に変化(マウスを放すと画像2は1にもどる) 2.クリックした時に一瞬画像2がへこみ、離すと画像2に戻る。 3.当然同時に右ページも変わる。 4.右のページがくりっくしたメニュー画像のリンク先の間は画像2のまま変化しない。 5.そのほかのメニュー画像をクリックすると画像2は画像1にもどる。 というのはどうすればいいのでしょうか? リンクボタンをへこませる方法はどこかで見たのですが、 それを今のhtmlのどこに書けばいいのかもわかりません。 ちなみに、外部のcssがあります。テンプレートを加工しているので。 宜しくお願いします!

    • ベストアンサー
    • HTML