![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
お世話になります。
スマートな外部javaでロールオーバーさせましたが、マウスポインタが矢印のままで指に変わりません。どうしたらよいのでしょうか?
【参照元】
http://blog.bluebox.in/2006/10/javascriptcsstarg …
ドリームウィーバーなどでも簡単にマウスオーバー効果をつけることが出来ますが、img要素内にスクリプトを呼び出すコードが入ってしまうのであまりスマートではありません。
この、英語のサイトで紹介されている方法だと、img要素にclass="imgover"というクラスをつければ、src属性で指定したファイルのファイル名に_oを足した名前の画像を読み込んで表示してくれるというJavaScriptです。
/*
Standards Compliant Rollover Script
Author : Daniel Nolan
http://www.bleedingego.co.uk/webdev.php
*/
function initRollovers() {
if (!document.getElementById) return
var aPreLoad = new Array();
var sTempSrc;
var aImages = document.getElementsByTagName('img');
for (var i = 0; i < aImages.length; i++) {
if (aImages[i].className == 'imgover') {
var src = aImages[i].getAttribute('src');
var ftype = src.substring(src.lastIndexOf('.'), src.length);
var hsrc = src.replace(ftype, '_o'+ftype);
aImages[i].setAttribute('hsrc', hsrc);
aPreLoad[i] = new Image();
aPreLoad[i].src = hsrc;
aImages[i].onmouseover = function() {
sTempSrc = this.getAttribute('src');
this.setAttribute('src', this.getAttribute('hsrc'));
}
aImages[i].onmouseout = function() {
if (!sTempSrc) sTempSrc = this.getAttribute('src').replace('_o'+ftype, ftype);
this.setAttribute('src', sTempSrc);
}
}
}
}
window.onload = initRollovers;
No.1ベストアンサー
- 回答日時:
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- PHP 共通の処理をまとめる方法がわからないのでアドバイスお願いします。 1 2022/12/19 20:20
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
連番画像「次へ」「前へ」で、...
-
window.openで値の渡し方を教え...
-
PreLoadとImageオブジェクト
-
JS switch文について
-
MAX関数を使ってからLEFT JOIN...
-
【iOS及びAndroid】リンク画像...
-
JSPでの画像ファイル表示
-
javascriptテキストBOX色を元に...
-
中心を軸にくるくる回るjQuery ...
-
MFCで画像を表示させているので...
-
大量のチェックボックス状態取...
-
リンク先がそれぞれ別の画像の...
-
htmlとcssに関する質問です
-
【javascript で動的に a タグ...
-
jQueryで同じクラス名のものを...
-
ボタンをクリックした時に、キ...
-
javascriptで複数の画像をラン...
-
透過pngの透明部分以外をクリッ...
-
クリックで色変更後に既に変更...
-
表示・非表示のスクリプトで、...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
this.src等のthisについて
-
jQueryでサーバー上のファイル...
-
imgのsrcに値を設定するには
-
画像の座標位置取得
-
イベントハンドラを完全に外部...
-
連番画像「次へ」「前へ」で、...
-
画像の下に説明文をつけて切り...
-
JS switch文について
-
一定時間で画像とリンク先を変...
-
これはどんなJavaScriptなので...
-
JavaScriptでリクエストを飛ば...
-
スマートな外部javaでロールオ...
-
画像と文字を同時に切り替えたい
-
JavaScriptでシンプルなスライ...
-
javascript 時計24時間表示
-
Javaにて画像を残像が残りつつ...
-
FirefoxでonMouseOver/Outの動...
-
divの背景画像を、徐々に表示さ...
-
商品回転画像の作成方法
おすすめ情報