• 締切済み

オンマウスでテキスト変化

オンマウスでテキスト表示でこまっておりまして、yamabejpさんの以前のソースをみつけ実効してみましたが 下記(\'文章を変更する\')の箇所の文章にＣＳＳで太字にしたり、マージンしたりしたいのですが どのように書き換えればできますでしょうか。。 初心者ですみません。<script language="javascript"> function textChange(id,text){ document.getElementById(id).innerText=text } </script> <img src="nodata" width="100" height="100" onMouseOver="textChange('text1','文章を変更する')"><br> <span id="text1">このへんに文書</span>

みんなの回答

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.4

ごめ、ちょい修正 <a href="#" onclick="return false;"> ↓ <a href="#" onmousedown="return false;"> これで IE 以外フォーカス時の破線が表示されなくなる。（宿敵 IE） ついでに .xxx a img{ border : none; } 追加。

  • yuu_x
  • ベストアンサー率52% (106/202)
回答No.3

・innerText はIE 拡張 通常は textContent 又は innerHTML(無難) 又は nodeValue ・ 、、、口うるさいかな。 js ぢゃ無いけど参考までに。 CSS .xxx a{ color : black; text-decoration : none; cursor : default; } .xxx a .ShowByHover{ display : none; } .xxx a:hover .ShowByHover{ font-weight : bold; margin : 10px; display : inline; } .xxx a:hover .HiddenByHover{ display : none; } HTML <div class="xxx"> <a href="#" onclick="return false;"> <img src="nodata" width="100" height="100" alt=""><br> <span class="HiddenByHover">このへんに文書</span> <span class="ShowByHover">文章を変更する</span> </a> </div> アンカーの使い方間違ってるような気もする & 使う場所が限られる(a の中に書かなきゃいけない & a の下は inline 要素のみ) & href="#" が無いと IE Safari で動作しない ∴余計なものが入る　∴参考までに。 書いといてなんですが、与件の場合なら js で既出のように、クラス書き換えたほうがいいかもしれません。なんとなく CSS でいけるなーと思っただけなので。 クラス書き換えについては、className に単純に代入すると既存のクラスを全て書き換えてしまうので、汎用性を考えるなら replace などで置換したほうがよいです。

ww_puper
質問者

お礼

すごく詳しく色々と有り難うございます！私もaの中に書かなきゃならないのが少し気になってこのままでいいものか、まよっていたところなので色々と勉強になりました。。 cssでも出来るのですね。。 勉強がたりなくてすみません、

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.2

文字の変更と同時にCSSを変更するということですよね？ CSSを2種類用意しておいて（片方は変更前用・・なくてもよい、もう片方は変更後用）、textChangeの中で適用するCSSも同時に変えてしまえば良いでしょう。styleを直接変えてもいいけど、この方がわかりやすそう・・・ <html> <head> <style type="text/css"> .hoge{font-weight: bold; color:red;} </style> </head> <body> <script language="javascript"> function textChange(id,text){ document.getElementById(id).innerText=text; document.getElementById(id).className='hoge'; } </script> <img src="nodata" width="100" height="100" onMouseOver="textChange('text1','文章を変更する')"><br> <span id="text1" class="">このへんに文書</span> </body> </html> （CSSの指定にidを利用することもできますが、問題の元になりそうなので、class利用にしています。）

ww_puper
質問者

お礼

ご返事頂きまして有り難うございます。回答前にcssの指定をidにしてしまったのですが、問題の元とは..？すみません、初心者で当たり前のことかもしれないのですが。お時間が開きましたときに教えていただければ幸いです。

  • kuma8055
  • ベストアンサー率28% (27/94)
回答No.1

質問の意図を取り違えてるかもしれませんが、書換え先のタグ(<span id="text1">)に、style属性なりクラス設定して外部CSS使うなりするというのはダメなんでしょうか？ 入力文字列でスタイルを変えたいのであれば、innerHTMLでタグ付きの文字列を出力して別個のCSS適用するとか。

ww_puper
質問者

お礼

ご回答有り難うございます。 初心者でおはずかしいかぎりですが、innerHTMLでタグ付きの文字列を出力とはどのようなことなのでしょうか？ ほんとすみません、お時間があるときにでもよろしければ教えてください。

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

関連するQ&A

  • onmouseで表示させたテキストを改行したい。

    いつもお世話になっております。 下記過去ログのソースを参考にしました。 「オンマウスで別の場所に画像とテキストを表示したい」 http://okwave.jp/qa1688069.html このソース(下記に抜粋)で動かす際、'変更する文章'を、たとえば5行表示したい場合、改行時に<br />を入れると、そのままタグが表示されて、改行されません。 ためしに\nやら\rなど改行コードを何個か試してみましたが、思うような結果は得られませんでした。 いくつかの文章を改行して表示させたい場合は、どのように書けばよいでしょうか。 よろしくお願いします。 上記リンク先の回答#4さんのソースの抜き出しここから----- <script type="text/javascript"> <!-- function textChange(id,text){ var span_el = document.getElementById(id); var originalText = span_el.firstChild.nodeValue; span_el.firstChild.nodeValue=text; return originalText; } //--> </script> </head> <body> <span onMouseOver="RestoreText=textChange('text1','変更する文章')" onmouseout="textChange('text1',RestoreText)">文章変更</span> <span id="text1">このへんに文章</span> 抜き出しここまで--(brは省略しました) やりたいこと-------------------- <span onMouseOver="RestoreText=textChange('text1','変更する文章1行目<br />変更する文章2行目<br />変更する文章3行目<br />変更する文章4行目<br />変更する文章5行目<br />')" onmouseout="textChange('text1',RestoreText)">文章変更</span> <span id="text1">このへんに文章(改行されて表示)</span>

  • それぞれにオンマウス動作

    下記のタグで memberのオンマウス動作はできましたが、 live scheduleのオンマウス動作が分かりません。 （live scheduleもmemberとおなじようにそれぞれ独立してフェードインで出現させたいのです。） 色々試しても、オンマウスで同時にフェードインしたり、両方とも動かなくなったりでどうしたらいいか分からなくなりました。 教えてください。 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS"> <title></title> <style type="text/css"> <!-- p { 　 　font-size: 50px; font-family: "MS PMincho"; text-decoration:none; } --> </style> <SCRIPT LANGUAGE="JavaScript"> <!-- // itv = 50; // cnt = 0; function strFade(str) { c = str.charAt(cnt++); document.all["ID"].style.color = "#"+c+c+c+c+c+c; if(cnt < str.length) setTimeout("strFade('" + str + "')",itv); if(cnt == str.length) cnt = 0; } //--> </SCRIPT> </head> <body> <div> <p style="margin-top: 200px;"> <p><b>　　　ｍ </b></p> </div> <p style="margin-top: -20px;"> <p><span onmouseover="this.innerText='　 liｖｅ　ｓｃｈｅｄｕｌｅ'" onmouseout="this.innerText='　　 　i'"> 　　 　i </span></p> <p style="margin-top:-130px;"> <font color='#ffffff'> <SPAN id="ID"><span onmouseover="strFade('fedcba9876543210')" onmouseout="strFade('0123456789abcdef')"><p><a>　　　ｍｅｍｂｅｒ</a></p></SPAN><BR><BR></font> </BODY> </HTML>

  • JavaScript　オンマウスで画像切り替え、テキスト切り替え

    javascriptで困っています。 あるテキストに一回のオンマウスで、 idを持った箇所の画像を切り替え、 また別のidをもった箇所にテキストを表示させたいのですがうまくいきません。 今までのコードはこちらです。 script -------------- function swap(n) { var items = [ { TextA:"あああ", ImageB:"../../common/logo.gif"}, { TextA:"２２２", ImageB:"../../common/logo.gif"}, { TextA:"３３３", ImageB:"../../common/logo.gif"} ]; var o = document.getElementById("Main"); $("Txt").innerText = items[n].TextA; $("Photo").src = items[n].ImageB; } html ---------- <div id="Main"> <img src="../logo.gif" alt="" name="Photo" width="120" height="60" id="Photo"> <div id="Txt" name="Txt">最初</div> </div> <A href="#" onmouseover="swap(0)">１</A><br> <A href="#" onmouseover="swap(1)">２</A><br> <A href="#" onmouseover="swap(2)">３</A> 詳しい方、どうぞご教授よろしくお願い致します。

  • 文字列にオンマウスで違う文字列を表示させたいです。

    こんばんは。 下記スクリプトを記述して、文字列の上にマウスが乗ると 違う文字列が出るところまでは出来たのです。 <span onmouseover="this.innerText='メニュー'" onmouseout="this.innerText='MENU'" onclick="this.innerText='メニュー'">MENU</span> 上記の場合、最初は”ＭＥＮＵ”　という文字が出ていて、オンマウスで カタカナ表記になるように変ります。 ＩＥと、Slepinir　では問題なく表示＆変更が出来たのですが ファイヤーフォックスでだけ、文字が変らないのです。 どうやら、ファイヤーフォックスでは未対応のスクリプトの ようなのですが、これは、どうしようも無い事なのでしょうか…？ どなたか、上記３つのブラウザで対応可能な方法を ご存知ないでしょうか。 よろしくお願いもうしあげます。

  • オンマウスでテキストエリアにテキスト表示

    現在、「猫」という文字にカーソルを合わせると text1のテキストエリアに 「ニャンと鳴く」と表示されるスクリプトを作成しました。 記述の一部ですが下に示します。 <form name="form1"> <TEXTAREA name="text1" rows="5" cols="40"></TEXTAREA> </form> <span onmouseover="txt_dsp('text1','ニャンと鳴く');"onmouseout="txt_dsp('text1', '');">猫</span><br> 教えていただきたいのは'ニャンと鳴く'という部分を msg.txtというテキストファイルに書かれた'ニャンと鳴く' で表示したいのですが、どのような記述にしたらよろしいでしょうか？ よろしくお願い致します。

  • 3重のクォーテーション

    　　javascriptで function textChange(id,text){ document.getElementById(id).innerHTML=text; return document.getElementById(id).firstChild.nodeValue; } 　　と関数を作っておいて、 <span onClick="textChange('indication_space','★')">メールアドレス</span> 　　の★の部分に <script type="text/javascript" src="メールフォームのURL" charset="utf-8"></script> 　　という文字を入れたいのですがクォーテーションが重なっているためエラーが出ます。 ★内の「"」を「\'」とした場合、エラーは出ませんが何も表示されませんでした。 解決法をご存知の方いらっしゃいましたらぜひご教授ください。 よろしくおねがいします。

  • オンマウスで注釈を表示させたいのですが…

    テキスト、もしくは画像リンクのオンマウス時に、同ページ内のテーブルに注釈を表示させたいのですが、 <SPAN id="msg"></SPAN>を何処に入れてもテーブルの上、下に表示されてしまいます。やはり<TBODY>内に入れるのでしょうか…もしそうでしたら、どうすべきなのかお教えして頂きたいです。

    • ベストアンサー
    • HTML
  • オンマウスでの画像表示の位置指定について

    以前、ここでオンマウスをしたときだけサムネイル画像を表示する方法を教えていただき大変助かりました。 ついては、その関連ですが、現在リスト（たて３０行くらい、横１０列くらい）の各行にマウスをおくことで各行の右側にサムネイルが表示されます。（行とは下記ソースの「○○○○(04.9.18)」にあたります。） ところが右端の列は、画面ぎりぎりのためこの列だけ行の左側にサムネイルを表示させたいのです。 教えていただいたソースは <script type="text/javascript"> function over( img,area ) { var e = document.getElementById( area ); e.innerHTML = '<img src="'+img+'">'; e.style.position = "absolute"; e.style.border = "solid #c0c0c0"; return area; } function out(area) { var e = document.getElementById( area ); e.innerHTML = ''; e.style.border = "none"; } </script> （表示部分） <A href="index.htm#040918" target=_top onmouseover="area=over('test/img/IMGP4995_thumb.jpg','area002');" onmouseout="out(area);">○○○○(04.9.18)</A><span id="area002"></span> 以下idを変えて繰り返し お教えいただけるとありがたいです。 （当方javascriptの知識はありません） よろしくお願いします。

  • 『オンマウスで説明文を表示』について

    http://lll.s21.xrea.com/m/link/38.html こちらのURLのタグを参考にしてやってみたところ、背景が半透明になってしまうのです。 すぐ上やすぐ下に文字が書いてあるので、ごちゃごちゃになって見えなくなってしまいます。 色々いじってみましたが、どうも上手くいきません。 どなたか、何処をどう変更するのか教えて頂けませんか？ お願いします。 使用タグ↓ <SCRIPT language="JavaScript"> <!-- function up(text){ document.getElementById('te').innerHTML=text; set.style.posLeft =document.body.scrollLeft+window.event.clientX+10; set.style.posTop =document.body.scrollTop+window.event.clientY+10; document.all('set').style.display="block";} function kes(){document.all('set').style.display="none";} //--> </SCRIPT> <A HREF="○○.html" onmouseover="up('文章...')"; onMouseout="kes()">テストページ</A> <DIV style="display:none;position:absolute;filter:Alpha(opacity=70);" ID="set"> <TABLE BORDER=1 style="border-style:dotted" BORDERCOLOR="#333333" BGCOLOR="#E0E0E0" cellspacing=1 cellpadding=20> <TR><TD BGCOLOR="#FFE0E0"><SPAN ID="te"></SPAN></TD></TR> </TABLE> </DIV>

  • 変数をテキストボックスに入れるには?

    javascriptでゲームを作っています。 <dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv> でユーザー名が拾えます。 <script type="text/javascript"> document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span>さん。ようこそ</dlv>"); </script> これで、「高橋さん。ようこそ」と表示されます。 次に、この「高橋」をフォームに入れることを考えました。 そこで下記のように作ったのですが、フォームの中は「undefined」になってしまいます。 <script type="text/javascript"> var abk; abk =　document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv>"); document.getElementById('cla2').value = abk; </script> <input typy="text" id="cla2" value=“"> 次に下記のように作ったのですが、フォームの中は空です。 <script type="text/javascript"> var abk; abk =　document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv>"); $("#text44").val(abk); </script> <input typy="text" id="text44" value=“"> どうすれば、 document.write("<dlv class='userinfo' style='display:none;'><span class='alias'></span></dlv>"); で表示される文字をフォームの中に記載することが可能になるでしようか?

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

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

質問する