電子書籍の厳選無料作品が豊富！

つらい・・・

CSSを使わずにマウスオーバーで画像を変化させる方法は？

解決済

  • 質問者：arisanmark2014
  • 質問日時：
  • 回答数：3件

以下サイトを参考にonmouse属性を使ったロールオーバーの方法を使ってみましたが
うまくいきません。

http://html-coding.co.jp/knowhow/tips/000302/



現在制作中のHPは↓
http://arisanmark2015.web.fc2.com/

トップ画像をオンマウスで変更するにはどのように入力すればいいでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

A 回答 (3件)

No.2ベストアンサー

  • 回答者： Ogre7077
  • 回答日時：

手順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"> を入れましょう
    • good
    • 0
    • 件
通報する
この回答へのお礼

ありがとう

ご回答ありがとうございました。

通報する
お礼日時：2016/09/21 15:09

No.3

  • 回答者： ORUKA1951
  • 回答日時：

それはjavascriptということ・・


【JavaScript】に関する質問一覧([技術者向] コンピューター) | 教えて！goo( https://oshiete.goo.ne.jp/articles/qa/254/ )
で聞いたほうがよいです。
★javascriptは、セキュリティの問題もあり、javascriptを停止しているユーザーもとても多い。私も基本止めています。
　CSSで可能なことは、極力CSSで対処すべきです。

CSSを使用すると、複数の画像を置いておいて、マウスオーバーなり、時間なりで変更できますし、印刷時はそのまま印刷するなど好きにできるし、そもそも簡単だし
    • good
    • 0
    • 件
通報する

No.1

  • 回答者： pikopa
  • 回答日時：

>CSSを使わずにマウスオーバーで画像を変化させる方法は？



あなたがやっているのはCSSではなくて、JavaScriptです。

CSSで行うには、
http://html-coding.co.jp/knowhow/tips/000275/です。
    • good
    • 0
    • 件
通報する

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう！

Q質問する（無料）

関連するカテゴリからQ&Aを探す

ページトップページトップ

Q質問する（無料）

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング

おすすめ情報