![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
マウスカーソルを重ねると画像が変化する効果を以下のコードで行っています。
$(function(){
$('span img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('-', 'x'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('x', '-'));
}
});
});
BODY部分は、
<SPAN><IMG src="画像-.jpg"></SPAN>
画像-.jpg と 画像x.jpg 2枚の画像ファイルを用意しています。
上記のコードだとファイル名に“-”と“x”を付けた2枚が必要で、
マウスオーバー前、変化前の画像ファイル名にわざわざ“-”を付けておかないといけません。
教えていただきたいのは、
マウスオーバー前、変化前の画像ファイル名に“-”を付けない 画像.jpg のまま
(BODY部分は、<SPAN><IMG src="画像.jpg"></SPAN>)で、
マウスオーバー時は、“x”を付けてある 画像x.jpg を表示し、
カーソルが去ったら 画像.jpg に戻る、コードです。
簡単に云えば、マウスオーバー時、 ファイル名に“x”を付加し、
カーソルが離れたら、 ファイル名を元に戻す(付加した“x”を削除する?)、
ということになるでしょうか。
実は、以前、ホームページビルダーで作ったページが多数あって、
そちらは変化後の画像にだけ“x”を付けて区別するだけで画像変化ができていますが、
ソースも長く、重いです。
今後、jQueryを使って軽くなるよう、修正して行きたいと思っていますが、
上記のコードだと、画像ファイル名に“-”を付ける作業が増えてしまい、
結果、タイプミスなども増えると思うので、できれば避けたいのです。
よろしくお願いします。
No.1ベストアンサー
- 回答日時:
拡張子が.jpgで統一されているのなら、
以下のように変換すればいいのではないでしょうか。
$(function(){
$('span img').hover(function(){
$(this).attr('src', $(this).attr('src').replace('.jpg', 'x.jpg'));
}, function(){
if (!$(this).hasClass('currentPage')) {
$(this).attr('src', $(this).attr('src').replace('x.jpg', '.jpg'));
}
});
});
おお!
拡張子ごとreplaceの対象にすればOKってことですね!
コードの中では記述された拡張子も文字列の一部みたいなものだから、replaceの対象になるってことかぁ…。
拡張子は統一されています(jpg←→gifは無し)ので、早速試したら、上手く行きました!
ありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- Perl 画像が表示でnull; this.src 1 2022/04/19 11:31
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リンク先がそれぞれ別の画像の...
-
中心を軸にくるくる回るjQuery ...
-
画像がプルプルふるえるんです。
-
右クリック禁止スクリプト挿入法
-
画像でチェックボックスを表示...
-
2種類できますか?
-
javascriptで毎月替わる画像
-
textareaに画像を表示したい
-
ロールオーバーで切り替えられ...
-
バナー広告のように表示させた...
-
ボタンをクリックした時に、キ...
-
画像の重なりの順序を代える方...
-
新規ウインドウ+submit
-
アクセス毎に画像が変わる
-
代替文字が表示されなくなった...
-
JavaScriptでの画像切替について。
-
bxsliderにて読み込み後に内容...
-
MAX関数を使ってからLEFT JOIN...
-
【iOS及びAndroid】リンク画像...
-
連番画像「次へ」「前へ」で、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
textareaに画像を表示したい
-
Javascriptで指定した日付と時...
-
javascriptで毎月替わる画像
-
画像をフォルダに入れれば表示...
-
画像の重なりの順序を代える方...
-
スワップイメージが上手く動作...
-
JavaScriptとチェックボックス...
-
透過pngの透明部分以外をクリッ...
-
Gifアニメ、最後のコマに行った...
-
bxsliderにて読み込み後に内容...
-
Javascript で共通の処理をどこ...
-
各フォルダから1枚ずつ画像をラ...
-
1枚の画像をクリックして複数の...
-
画像を切り替えランダム表示
-
画像削除機能を付けたい
-
マウス追従スクリプトについて
-
画像ランダム表示、しかしダブ...
-
1枚の画像をクリックすると複数...
-
<table>、もしくは<iframe>内で...
-
jQuery FlexSliderのカルーセ...
おすすめ情報