以下サイトを参考に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を使用すると、複数の画像を置いておいて、マウスオーバーなり、時間なりで変更できますし、印刷時はそのまま印刷するなど好きにできるし、そもそも簡単だし
No.1
- 回答日時:
>CSSを使わずにマウスオーバーで画像を変化させる方法は?
あなたがやっているのはCSSではなくて、JavaScriptです。
CSSで行うには、
http://html-coding.co.jp/knowhow/tips/000275/です。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
関連するカテゴリからQ&Aを探す
おすすめ情報
- ・漫画をレンタルでお得に読める!
- ・人生のプチ美学を教えてください!!
- ・10秒目をつむったら…
- ・あなたの習慣について教えてください!!
- ・牛、豚、鶏、どれか一つ食べられなくなるとしたら?
- ・【大喜利】【投稿~9/18】 おとぎ話『桃太郎』の知られざるエピソード
- ・街中で見かけて「グッときた人」の思い出
- ・「一気に最後まで読んだ」本、教えて下さい!
- ・幼稚園時代「何組」でしたか?
- ・激凹みから立ち直る方法
- ・1つだけ過去を変えられるとしたら?
- ・【あるあるbot連動企画】あるあるbotに投稿したけど採用されなかったあるある募集
- ・【あるあるbot連動企画】フォロワー20万人のアカウントであなたのあるあるを披露してみませんか?
- ・映画のエンドロール観る派?観ない派?
- ・海外旅行から帰ってきたら、まず何を食べる?
- ・誕生日にもらった意外なもの
- ・天使と悪魔選手権
- ・ちょっと先の未来クイズ第2問
- ・【大喜利】【投稿~9/7】 ロボットの住む世界で流行ってる罰ゲームとは?
- ・推しミネラルウォーターはありますか?
- ・都道府県穴埋めゲーム
- ・この人頭いいなと思ったエピソード
- ・準・究極の選択
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
直リンバナーを表示すると、紫...
-
HTMLファイルの一部の画像だけ...
-
予約語の表示について
-
Movable Type で フレームのよ...
-
フォルダ内の画像をウェブでラ...
-
CSSなどでHTML全体の表示を拡大...
-
IEでのalt属性ポップアップ表示...
-
▲▲マウスオンで画像を変更につ...
-
背景が透明なリンクボタンで、...
-
alt属性を付けるとは?
-
画像クリックで別の画像
-
windowsは画像にマウスオンで画...
-
「DecareステートメントにPtrSa...
-
タイトルバーに画像を入れるHTM...
-
PDFの保存ボタンが表示されません
-
透過背景画像のビットマップ形...
-
<hr>の縦バージョンはありますか?
-
htmlかcssで背景の白い枠をなく...
-
lightbox2で画像を天地左右中央...
-
ロゴマークだけを抜き取って貼...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
IMGタグでTIFF画像を表示
-
ボタンを押したままにする。
-
pngやjsの後ろの英数字の意味は...
-
タイトルバーに画像を入れるHTM...
-
背景が透明なリンクボタンで、...
-
画像クリックでクリップボード...
-
拡張子無しで画像を表示したいです
-
クリックしても、リンクに飛ば...
-
バナーの貼り方とバナーにリン...
-
HTMLにQRコードを挿入する方法
-
form以外でのpostってできますか?
-
クリッカブルMAP領域が分かる様...
-
期間ごとに画像表示を切り替え...
-
スライドショーの上にロゴマー...
-
アルバムをめくるように、画像...
-
複数のボタンで1つのエリアに...
-
HTML上の画像を結合する方法が...
-
「DecareステートメントにPtrSa...
-
<A href= と<IMG srcの使い分け
-
CSSを使わずにマウスオーバーで...
おすすめ情報