![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?e8efa67)
以下サイトを参考にonmouse属性を使ったロールオーバーの方法を使ってみましたが
うまくいきません。
http://html-coding.co.jp/knowhow/tips/000302/
現在制作中のHPは↓
http://arisanmark2015.web.fc2.com/
トップ画像をオンマウスで変更するにはどのように入力すればいいでしょうか?
No.2ベストアンサー
- 回答日時:
手順1. <head> の中にスクリプトを入れる
<script>(function(){
function makeAction(flag){
var action=flag?function(t,d){if(!d.srcOrg)d.srcOrg=t.src;t.src=d.srcRollover;}:function(t,d){if(d.srcOrg)t.src=d.srcOrg;};
return function(ev){var t=ev.target;if(t.tagName=='IMG' && t.dataset && t.dataset.srcRollover)action(t,t.dataset);};
}
window.addEventListener('mouseover', makeAction(true), false);
window.addEventListener('mouseout', makeAction(false), false);
})()</script>
手順2. 変化させたい画像のすべてに、変化後の画像を指定した data-src-rollover 属性を加える
例: <img src="変化前の画像URL" data-src-rollover="変化後の画像URL">
例: <img src="images/2a_R.jpg" data-src-rollover="images/rollover.jpg" width="980" height="700" border="0">
--
余談ではありますが
ご提示のページは、ブラウザによっては文字化けします。
せめて <head> の中に <meta charset="Shift_JIS"> を入れましょう
No.3
- 回答日時:
それはjavascriptということ・・
【JavaScript】に関する質問一覧([技術者向] コンピューター) | 教えて!goo( https://oshiete.goo.ne.jp/articles/qa/254/ )
で聞いたほうがよいです。
★javascriptは、セキュリティの問題もあり、javascriptを停止しているユーザーもとても多い。私も基本止めています。
CSSで可能なことは、極力CSSで対処すべきです。
CSSを使用すると、複数の画像を置いておいて、マウスオーバーなり、時間なりで変更できますし、印刷時はそのまま印刷するなど好きにできるし、そもそも簡単だし
![](http://oshiete.xgoo.jp/images/v2/common/profile/M/noimageicon_setting_15.png?e8efa67)
No.1
- 回答日時:
>CSSを使わずにマウスオーバーで画像を変化させる方法は?
あなたがやっているのはCSSではなくて、JavaScriptです。
CSSで行うには、
http://html-coding.co.jp/knowhow/tips/000275/です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS リンクバナーのHTMLタグ。画像を変えたり、設置位置を変えるとバナー貼付け側はどう見える? 2 2023/02/01 12:01
- HTML・CSS WEBサイトの構築。表示データとWEBデザインを分離する考え方を専門用語・業界用語では何と言うか? 8 2022/09/27 09:16
- HTML・CSS 画像が分割されて切り替わる、ループアニメーションが作りたい 7 2023/05/27 17:12
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- Windows 10 壁紙フォルダが表示されない 1 2022/11/16 21:58
- PDF パワポ及びPDFのデータ量について 3 2023/07/20 10:24
- HTML・CSS VSコードでHTMLに(リンク)ファイル名をクリックしてもファイルが開かれない 1 2023/02/12 07:52
- その他(ブログ) シーサーブログのタイトル文字位置とブログ説明文字位置の変更方法 2 2022/09/22 20:55
- iPhone(アイフォーン) iPhoneの機種変更するときのデータの引き継ぎについて 3 2022/07/06 18:29
- Wi-Fi・無線LAN 家のWi-Fiを無断使用されていないか、確認したくて色々調べています。 https://www.bu 5 2022/07/10 18:56
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
VB.netで線を引きたい
-
スライドショーの上にロゴマー...
-
IE11にてonclickの動作不良
-
ボタンを押したままにする。
-
背景が透明なリンクボタンで、...
-
thickboxでcloseボタン右上配置...
-
カーソルを合わせると文字が出...
-
CSSを使わずにマウスオーバーで...
-
タイトルバーに画像を入れるHTM...
-
HTMLにて画像を押したときにボ...
-
html css
-
画像クリックでクリップボード...
-
areaタグのマウスオーバー時に枠線
-
画像のリンクタグで、オンマウ...
-
画質を落とさず切り取って透過...
-
PDFの保存ボタンが表示されません
-
画像とその下にあるテキストの...
-
アイコンの背景を透過させたい
-
htmlかcssで背景の白い枠をなく...
-
背景画像の上に透過GIF背景...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
ボタンを押したままにする。
-
カーソルを合わせると文字が出...
-
複数のボタンで1つのエリアに...
-
タイトルバーに画像を入れるHTM...
-
バナーの貼り方とバナーにリン...
-
クリックしても、リンクに飛ば...
-
IMGタグでTIFF画像を表示
-
pngやjsの後ろの英数字の意味は...
-
スライドショーの上にロゴマー...
-
背景が透明なリンクボタンで、...
-
HTMLにQRコードを挿入する方法
-
画像クリックでクリップボード...
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
フォルダ内の画像をウェブでラ...
-
拡張子無しで画像を表示したいです
-
アルバムをめくるように、画像...
-
崩れたレイアウトが更新すると...
-
datepickerを使ってカレンダー...
-
期間ごとに画像表示を切り替え...
おすすめ情報