- ベストアンサー
テキストスタイル連動の方法とは？
- HTMLページで、MAPのリンクにマウスをあわせるとテキストのスタイルが変更する方法を教えてください。
- 自作したスクリプトではうまく反映されないので修正方法を教えてください。
- また、テキスト以外の要素にも同様のスタイル変更をかけるアイデアがあれば教えてください。
- powpow
- お礼率93% (14/15)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
原因は値をコーテーションで囲っていないためエラーになっているから。 style.fontSize = 20pt; ↓ style.fontSize = '20pt'; //又は = "20pt"; スタイルを変えるときは、直接値を変更するのではなく、クラスを変更した方がスマートかも。 複数の場所に同じような処理を入れるなら関数を引数付きで呼び出すといいかと。 <style type='text/css'> #s1 {color: #000000; font-size:14pt;}/*colorの値を「"」で囲むのは間違い。*/ .OnMouse {color:#ff0000;font-size:20pt;} </style> <script type="text/javascript"> // ↑language属性は非推奨・typeの指定が要ります。 function setChange(targetId){ document.getElementById(targetId).className = 'OnMouse'; } function setReturn(targetId){ document.getElementById(targetId).className = ''; } </script> <map name="X"> <area shape=circle coords="x,y,z" onmouseover="setChange('s1')" onmouseout="setReturn('s1')" href="http://www.yyy.com/"> <area shape=circle coords="x2,y2,z2" onmouseover="setChange('s2')" onmouseout="setReturn('s2')" href="http://www.yyy.com/"> </map> <span id="s1">aaa</span> <span id="s2">bbb</span>
お礼
おお、ちゃんと反映しました！こんな単純なミスだったとは…oTL。他の記述ミスを含めご指摘頂き、ありがとうございました！ 教えて頂いたクラスで変更する方が、確かにすっきりしますね(^-^)。こちらで作ってみようと思います。 ご回答ありがとうございました。