画像にオンマウスで説明文の色を変えたい

前へ 次へ
このQ&Aのポイント
  • 画像にポインタを乗せると、同ページ内のその画像の説明文の文字色が変わる効果を実現したい。
  • 既に組んでいるロールオーバー効果にプラスして、画像にオンマウスで説明文の文字色を変える効果を実装したい。
  • ご教授いただける方がいらっしゃいましたら、お願いいたします。
回答を見る
  • ベストアンサー

画像にオンマウスで、説明文の色を変えたい

画像にポインタを乗せると、同ページ内のその画像の説明文（テキスト）のところの文字色が変わるようにしたいんです。 画像にはすでに、下記のようなロールオーバー効果も組んでしまってるので、プラスして上記の効果をやりたいのですが…。 わかる方いらしたらご教授お願いします。 ↓画像のところに組んでいるロールオーバー効果 <A href="#" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'gazou.jpg');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'gazou1.jpg');"><IMG src="gazou.jpg" title="gazou" width="106" height="149" border="0" name="_HPB_ROLLOVER1"></A>

質問者が選んだベストアンサー

  • ベストアンサー
  • BLUEPIXY
  • ベストアンサー率50% (3003/5914)
回答No.1

<span id="gazou_txt">画像の説明文</span> とかなってたら onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'gazou.jpg');document.getElementById('gazou_txt').style.color='#000000';" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'gazou1.jpg');document.getElementById('gazou_txt').style.color='#FF0000';" とかすればいいです。

makiron193
質問者

お礼

思ってたとおりのものが出来ました！ありがとうございます！

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • ロールオーバー効果にならない。

    ロールオーバー効果にならない。 宜しくお願いします。 ホームページビルダー10にてホームページを作成中です。 リンクメニューのボタンでロールオーバー効果を使おうと定番手順(参考書の記載通り)に やっているのですが、うまくいきません。 同手順でこのページはできて、このページはできない！？って感じです。 HTMLで確認してもよく分かりません(ほど素人ですが・・・)。 ご教授宜しくお願いします。 ちなみに・・・ ＜ならないパターン＞ <td height="37"><a href="http://ブログID.fc2.com/" id="_HPB_ROLLOVER8" onmouseout="HpbImgSwap('_HPB_ROLLOVER8', 'xxxx.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER8', 'xxxx.gif');" target="_blank"><img src="xxxx.gif" width="190" height="37" border="0" name="_HPB_ROLLOVER8" /></a><a href="#"> </a></td> ＜なるパターン＞ <DIV style="top : 183px;left : 498px; position : absolute; z-index : 3; " id="Layer3"><A href="home.html" id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'xxxx.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'xxxx.gif');"><IMG src="xxxx" width="172" height="139" border="0" name="_HPB_ROLLOVER1"></A></DIV> どちらとも 挿入→画像効果→ロールオーバー効果の手順にて作成しました。 宜しくお願いします。

  • ロールオーバーとOnclickで

    A href="javascript:;"target="_top" onclick="MM_nbGroup('down','group1','～.gif','detail','～.jpg',1)" id="_HPB_ROLLOVER1" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', '～.gif'); HpbImgSwap('_HPB_ROLLOVER2', '～.jpg');" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', '～.gif'); HpbImgSwap('_HPB_ROLLOVER2', '～.jpg');"><IMG src="～.gif" width="51" height="50" border="0" name="_HPB_ROLLOVER1"></A> 上のようにホームページビルダーを使って、ロールオーバーでサムネイルと大きな画像が切り替わるようにしています。 しかしサムネイルをクリックしたら、他のサムネイルをクリックするまで大きい画像が固定される方法がイマイチわかりません。 分かる方いらっしゃいましたら教えて下さい。 あまり詳しくなくて旨く説明できずにすみません。 http://irving.jp/rwr/discography.html　のような 感じにしたいんです。

  • ロールオーバー効果でエラーが出ます。

    ホームページビルダーの９を使用してます。 マウスロールオーバー効果の設定をしたところ、エラーが出てしまいます。 「オブジェクトを指定してください」というエラーでマウスを乗せると2回もそのエラーが出てきます。 ソフトの指示通りに設定してるのに何故エラーが出るのかわかりません。 ちなみにソース表示は、下記です。 <A onmouseout="HpbImgSwap('_HPB_ROLLOVER1','menu1.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','menu1-2.gif');" href="×××.html" id="_HPB_ROLLOVER1"><IMG src="menu1.gif" width="79" height="54" border="0" alt="×××" name="_HPB_ROLLOVER1"></A> 何がいけないのでしょうか？ このソースの前に何か記述すべきなのでしょうか？

  • 記述の仕方を教えて下さい。

    以下のHTMLをdocument.writeを使って記述しているのですが、エラーになって動きません。 多分”と’の使い方が原因だと思います。 記述の仕方を教えて下さい。 <A id="_HPB_ROLLOVER1" onmouseout="HpbImgSwap('_HPB_ROLLOVER1','hina_n_image.gif');" onmouseover="HpbImgSwap('_HPB_ROLLOVER1','hina_m_image.gif');"><IMG src="hina_n_image.gif" width="364" height="203" border="0" name="_HPB_ROLLOVER1"></A>

  • ロールオーバーで…

    ホームページビルダーでページを作っています。 横に2マスある表を1つ作り、横幅を100%に指定、右のセルを幅50%に指定しました。 左側には40x40のサムネイルを100個ほど置いています。全部見るにはスクロールする必要があります。 右側のセルに右側のサムネイルをクリックしたときにプレビューを表示するようにしたいのですがうまく出来ません。 まず、ロールオーバーで右側セルにプレビューを表示することは出来ました(ビルダーの機能で出来ました)。 ---------------------------------------------- <A href="#" id="_HPB_ROLLOVER1" onmouseover="HpbImgSwap('_HPB_ROLLOVER1', 'pict/auto-mes/00/mes00-01-s.jpg'); HpbImgSwap('_HPB_ROLLOVER2', 'pict/auto-mes/00/mes00-01.jpg');" onmouseout="HpbImgSwap('_HPB_ROLLOVER1', 'pict/auto-mes/00/mes00-01-s.jpg'); HpbImgSwap('_HPB_ROLLOVER2', 'pict/blank.gif');"><IMG src="pict/auto-mes/00/mes00-01-s.jpg" width="40" height="40" border="0" name="_HPB_ROLLOVER1"></A> -------------------------------------------------- しかし、右側セル中央に表示指定にしているため一番上・下のものをロールオーバーさせると絵の全部が見えません。 写真のサイズは決まっておらず、まちまちです(縦長横長がランダムにある)。 そこで、ロールオーバーではなくクリックで右セルに表示させる方法とセル中央ではなく画面中央に表示させる方法があれば教えてください。 もしくは、ほかに何か良い方法がないでしょうか? よろしくお願いします。

    • ベストアンサー
    • HTML
  • 1つの画像オンマウスで3つの画像を切り替えたい！

    現在、下記のような感じで一つの画像オンマウスでその画像を含む3つの画像が切り替わるようにしています。 ---------------------------------- <a href="#" onMouseOver="11111.src='a.gif';22222.src='b.gif';33333.src='c.gif'" onMouseOut="11111.src='a_01.gif';22222.src='b_01.gif';33333.src='c_03.gif'"><img src="aaaaaa.gif" alt="" width="94" height="32" border="0" name="11111" /></a> <img src="b_01.gif" alt="" width="572" height="50" name="22222" /> <img src="c_01.gif" alt="" width="96" height="32" border="0" name="33333" /> ---------------------------------- IE6だと、きちんと表示されるのですが、 Firefoxだと表示がおかしくなります。 改善方法はありませんでしょうか？ 助けてください！

  • ロールオーバーを立てに並べると隙間があいてします

    ホームページのロールオーバーイメージを 立てに並べたところ　どうしてもIEでロゴとロゴの間に 隙間が開いてしまいます。 これを詰める方法はないでしょうか？ ファイヤーフォックスだと問題なく表示されます。 プログラムは以下のとおりです。 <a href="#" onMouseOver="document.mn0.src='navi_hove9.jpg'"onMouseOut="document.mn0.src='navi8.jpg'"><img src="navi7.jpg" name="mn0" width="203" height="48" border="0" /></a> <a href="#" onMouseOver="document.mn1.src='navi6'"onMouseOut="document.mn1.src='navi/nav4.jpg'"><img　src="navi5.jpg"name="mn1"width="203" height="48"border="0" /></a> <a href="#"onMouseOver="document.mn2.src='navi3'" onMouseOut="document.mn2.src='navi2.jpg'"> <img src="navi1" name="mn2" width="203" height="48" border="0" /> </a> よろしくお願いします。

  • 複数画像にクリッカブルマップ

    当方、HTML・CSSは少しだけ分かりますが、javascriptの知識がありません。 添付の画像のように、 ひとつのHTML内に複数の画像を置き、それぞれの中に複数のクリッカブルマップ（ロールオーバーも可能） を設置したいのですがうまく動きません。。 ■javascript　（動かず） if(navigator.appVersion.charAt(0) >=3){ var rolimg = new Array(); for( i = 0 ; i < 10 ; i++ ){ rolimg[i] = new Image(); } rolimg[0].src= "img/0.jpg" rolimg[1].src= "img/1.jpg" rolimg[2].src= "img/2.jpg" rolimg[3].src= "img/3.jpg" rolimg[4].src= "img/4.jpg" rolimg[5].src= "img/5.jpg" } function paintRol(dim,cnt){ if(navigator.appVersion.charAt(0) >= 3 ){ document.images[dim].src=rolimg[cnt].src; } } ■HTML <!--ひとつめの画像--> <img src="img/0.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',1)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',2)" onMouseOut="paintRol('rollover',0)" /> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',3)" onMouseOut="paintRol('rollover',0)" /> </map> <!--ふたつめの画像--> <img src="img/4.jpg" usemap="#map" name="rollover" /> map name="map" id="map"> <area shape="poly" coords="***,***,***,***,***,***,***,***,***,***,***,***" href="#" onMouseOver="paintRol('rollover',5)" onMouseOut="paintRol('rollover',0)" /> </map> ------ よろしくお願いします。

  • それぞれの画像をオンマウスのときに違う画像にしたい

    下記【１】の通り、画像のランダムリンクはできたのですが それぞれの画像をオンマウスしたときに 違う画像を表示するにはどうすればよいでしょうか？ JavaScriptを使わずに、一枚の画像だけを変える場合は↓のようにやっておりました <a href="http://～" target="_blank" ><img src="img[0] " height="" width="" border="0" onmouseover="this.src='img[0] の色違い画像など';" onmouseout="this.src='img[0] と同じ、もしくは違う画像';"></a> ※例えばimg[0]をオンマウスしたときにimg[2]にしたいのではなく、 それぞれ個別に用意した画像(通常時、オンマウス時、離した後の画像３枚)にしたいのですが。 【１】 // ランダムに画像を表示する jmp = new Array(); img = new Array(); // ジャンプ先のアドレス(数字は画像と対応) jmp[0] = "http://～"; jmp[1] = "http://～"; jmp[2] = "http://～"; jmp[3] = "http://～"; jmp[4] = "http://～"; // 画像のアドレス(数字はジャンプ先のアドレスと対応) img[0] = "img/img1.jpg"; img[1] = "img/img2.jpg"; img[2] = "img/img3.jpg"; img[3] = "img/img4.jpg"; img[4] = "img/img5.jpg"; n = Math.floor(Math.random()*jmp.length); document.write("<a href='"+jmp[n]+"' target='_blank'>"); document.write("<img src='"+img[n]+"' border='0'>"); document.write("</a>");

  • htmlファイルによって正常にロールオーバーするページとしないページがあるのですが、どこが間違っているのでしょう？

    お世話になります。 すべてのページに共通のボタンを設置してロールオーバーさせたいのですが、なぜかhtmlファイルによってきちんとロールオーバーするページとしないページがあります。初心者なので知らない内にソースをいじってしまったのかもしれませんが、このソースのどこが間違っているか教えていただけないでしょうか？初心者なものでホントに分からないです。ホントに困っています、どうかよろしくお願いします。ちなみにDreamweaverMXを使用しています。 ■正常に働くhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a> ■正常に働かないhtml <body onLoad="MM_preloadImages('images/home02.jpg','images/news02.jpg','images/company02.jpg')"> 中略 <a href="index.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image1','','images/home02.jpg',1)"><img src="images/home01.jpg" alt="home" name="Image1" width="134" height="53" border="0"></a> <a href="news.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image2','','images/news02.jpg',1)"><img src="images/news01.jpg" alt="新着情報" name="Image2" width="134" height="53" border="0"></a> <a href="company.html" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('Image3','','images/company02.jpg',1)"><img src="images/company01.jpg" alt="会社概要" name="Image3" width="133" height="53" border="0"></a>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する