![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
HP作成の初級者です。
宜しくお願いいたします。
ブラウザ上で、ユーザーがフォントサイズを変更できるjavascriptを導入してみました。
[小][中][大]というテキストが現れ、それらを押すことでブラウザのフォントを拡大縮小できます。
設置、動作とも成功していて、大変快適です。
さて、ここからですが、
私のダウンロードしたデフォルト状態の
[小][中][大]
を、画像(ボタン画像)に変更したいのです。
すでにボタン画像は用意しました。通常、マウスオーバー、アクティブ時、計9種用意しています。
問題は、設置方法です。
これが通常の画像挿入であれば分かるのですが、
この場合の、
javascriptと連動した場合の画像設置や、ロールオーバー指定が分かりません。
お詳しい方、できればHTMLで、お教えください。
宜しくお願いいたします。
-----今スクリプト内はこんな感じです。全文ではないですが、この辺と思われる部分を抜粋しました。---------
~~
~~…
document.writeln([
'<p id="' + id + '">文字:
<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする(84%)">[小]</a>
<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す(100%)">[中]</a>
<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする(120%)">[大]</a>
</p>',
].join("\n"));
Event.observe($(id + '-small' ), 'click', this.onClickSmall.bind(this));
Event.observe($(id + '-medium'), 'click', this.onClickMedium.bind(this));
Event.observe($(id + '-large' ), 'click', this.onClickLarge.bind(this));
},
onClickSmall: function(e) { this.change('84%' ); },
onClickMedium: function(e) { this.change('100%'); },
onClickLarge: function(e) { this.change('120%'); }
…~~
~~
-------------------------------------------------------------------------------------------------------
いろいろ、分からない点が多いので、未熟な質問で
見当違いをしているかも知れませんが、
どうぞ宜しくお願いいたします。
No.1ベストアンサー
- 回答日時:
<a href="javascript: void(0);" id="' + id + '-small" title="文字を小さくする(84%)">[小]</a>
<a href="javascript: void(0);" id="' + id + '-medium" title="文字を標準に戻す(100%)">[中]</a>
<a href="javascript: void(0);" id="' + id + '-large" title="文字を大きくする(120%)">[大]</a>
上の部分を少し見やすくすると
<a href="">[小]</a>
<a href="">[中]</a>
<a href="">[大]</a>
こんな風にボタンになるので、
<a href=""><img src="#" alt="小"></a>
<a href=""><img src="#" alt="中"></a>
<a href=""><img src="#" alt="大"></a>
中にimgタグを入れてやるだけです。
No.2
- 回答日時:
画像を普通に使うならmetametamuさんの言われた方法でいいと思います。
オールーオーバーにする場合は、いろいろありますが簡単な書き方だと
<img src='通常表示される画像' onmouseover="this.src='マウスが画像の上に乗ったとき使用する画像'" onmouseout="this.src='マウスが画像から外れたとき使用する画像(通常と同じ)'" />
これでいけると思います。
ご回答有難うございました!
onmouseoverやonmouseoutの記述があるのですね。
普段ソフトに頼っているので、大変参考になりました。
有難うございます。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- HTML・CSS ボタンをクリックした時に、入力フォームのすぐ下部に、「入力欄が空白です」というテキストメッセージが表 1 2022/04/27 16:25
- JavaScript フォームが空欄の時にフォームの外をクリックすると、エラーが出るコードを調べています。 1 2023/06/25 11:51
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- HTML・CSS 下にスクロールしても、追従するボタンのコードを書いたのですが、ボタンの中の画像が半分しか表示されない 1 2022/04/16 21:31
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
クリッカブルMAP領域が分かる様...
-
バナーの貼り方とバナーにリン...
-
<A href= と<IMG srcの使い分け
-
画像のリンクタグで、オンマウ...
-
<area></area> 部分にボーダー...
-
ボタンを押したままにする。
-
期間ごとに画像表示を切り替え...
-
IMGタグでTIFF画像を表示
-
html css
-
pngやjsの後ろの英数字の意味は...
-
PDFの保存ボタンが表示されません
-
ページごとに背景画像を変更し...
-
一番解像度の高い画像を “Googl...
-
アイコンの背景を透過させたい
-
<hr>の縦バージョンはありますか?
-
透過背景画像のビットマップ形...
-
背景を透過加工したPNG画像を色...
-
PNGで保存しても透過できない。。
-
フォトショップデータからキレ...
-
画像の上にテキスト配置で、拡...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
カーソルを合わせると文字が出...
-
複数のボタンで1つのエリアに...
-
タイトルバーに画像を入れるHTM...
-
バナーの貼り方とバナーにリン...
-
クリックしても、リンクに飛ば...
-
IMGタグでTIFF画像を表示
-
pngやjsの後ろの英数字の意味は...
-
スライドショーの上にロゴマー...
-
背景が透明なリンクボタンで、...
-
HTMLにQRコードを挿入する方法
-
画像クリックでクリップボード...
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
フォルダ内の画像をウェブでラ...
-
拡張子無しで画像を表示したいです
-
アルバムをめくるように、画像...
-
崩れたレイアウトが更新すると...
-
datepickerを使ってカレンダー...
-
期間ごとに画像表示を切り替え...
おすすめ情報