お世話になります。
Javascriptの知識はほとんどない者ですが、どうかご教授ください。
現在制作中のWebサイトでグローバルメニューのボタン類をJqueryを使ってマウスオン時にロールオーバーさせたいと考えております。非常にありふれたよくある見せ方なんですが、それでhttp://www.kyosuke.jp/yugajs/で配布されているMITライセンス(商用利用なので)のyuga.jsというファイルを使用させてもらってロールオーバーを実現させたいと思いました。手順通り実行してみたのですが、下記のようにごく普通にa要素でリンクを貼るとマウスオーバーしなくなるという現象がおきました。a要素がない場合はロールオーバーするのですが、リンクしてない状態では何の意味もないので、少々困っております。
↓マウスオーバーしない
<a href="index.html"><img src="images/button_06.gif" alt="TOPボタン" class="btn"/></a>
↓マウスオーバーする
<img src="images/button_07.gif" alt="TOPボタン" class="btn" />
javascriptのソースを開いてみたのですが、私ではまったく知識がなくて分かりかねました。
恐らくロールーバー部分であろうソースを記載しましたので、どうかご教授ください。
よろしくお願いします。
//ロールオーバー
rollover: function(options) {
var c = $.extend({
hoverSelector: '.btn, .allbtn img',
groupSelector: '.btngroup',
postfix: '_on'
}, options);
//ロールオーバーするノードの初期化
var rolloverImgs = $(c.hoverSelector).filter(isNotCurrent);
rolloverImgs.each(function(){
this.originalSrc = $(this).attr('src');
this.rolloverSrc = this.originalSrc.replace(new RegExp('('+c.postfix+')?(\.gif|\.jpg|\.png)$'), c.postfix+"$2");
this.rolloverImg = new Image;
this.rolloverImg.src = this.rolloverSrc;
});
//グループ内のimg要素を指定するセレクタ生成
var groupingImgs = $(c.groupSelector).find('img').filter(isRolloverImg);
//通常ロールオーバー
rolloverImgs.not(groupingImgs).hover(function(){
$(this).attr('src',this.rolloverSrc);
},function(){
$(this).attr('src',this.originalSrc);
});
//グループ化されたロールオーバー
$(c.groupSelector).hover(function(){
$(this).find('img').filter(isRolloverImg).each(function(){
$(this).attr('src',this.rolloverSrc);
});
},function(){
$(this).find('img').filter(isRolloverImg).each(function(){
$(this).attr('src',this.originalSrc);
});
});
//フィルタ用function
function isNotCurrent(i){
return Boolean(!this.currentSrc);
}
function isRolloverImg(i){
return Boolean(this.rolloverSrc);
}
},
No.1ベストアンサー
- 回答日時:
たぶんこの項に書いてある条件に当てはまっているのだと思いますが
その画像はロールオーバーの対象から除外されます。
この処理を行っているのがyuga.jsのココ。
$(function() {
//$.yuga.selflink(); // ココ
$.yuga.rollover();
$.yuga.externalLink();
$.yuga.thickbox();
$.yuga.scroll();
$.yuga.tab();
$.yuga.stripe();
$.yuga.css3class();
});
ロールオーバーを優先させたいなら実行しない、でいいと思います。
回答ありがとうございます!
ご指摘の通り、$.yuga.selflink();を削除したら思う通りの動きができました!本当にありがとうございます!!
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript 1日1回引けるJavaScriptおみくじについて 1 2022/12/12 22:28
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- JavaScript javascriptで変数を組み込みたい 2 2023/01/13 09:52
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript スマフォではボタンを表示させたくない 2 2023/01/20 14:26
- JavaScript jQueryで同じクラス名のものを別物として扱いたい 1 2022/06/17 14:14
- HTML・CSS CSSのホバーエフェクト 1 2023/06/19 06:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
複数画像のランダム複数表示(...
-
MFCで画像を表示させているので...
-
error LNK2019 未解決のシンボ...
-
imgボタンにfocusの当て方
-
jQueryで、画像クリック→フェー...
-
OpenCV での画素値の比較について
-
jQuery 複数のfind()
-
セクトボックスの連携の仕方。
-
以下のタグはクリックすると画...
-
画像処理 C言語 元画像の幅...
-
Javaの正規表現でimgタグのalt...
-
画像が表示でnull; this.src
-
MAX関数を使ってからLEFT JOIN...
-
javascriptテキストBOX色を元に...
-
jqueryのsortableで一部ソート...
-
removeEventListenerについて
-
Slick.jsのオプションrtlについて
-
どの<li><a> が押されたか判別...
-
クリックで色変更後に既に変更...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
JavaScriptで変更した属性の元...
-
MFCで画像を表示させているので...
-
画像が表示でnull; this.src
-
error LNK2019 未解決のシンボ...
-
Vb.net2005での画像の合成方法
-
onclickで画面が固まる・・・ら...
-
リンク先を動的に変更する
-
(javascript)HTMLで指定した...
-
【OpenCV】二値画像後、白の部...
-
jQuery 複数のfind()
-
ラズパイでno module named zbar
-
外部javascriptの重複を防ぐには
-
条件分岐でキーが入力されてい...
-
かぶらないランダム画像
-
HTMLからimgのsrcのみを正規表...
-
pythonで、tkinterとpillowの組...
-
OpenCV での画素値の比較について
-
imgボタンにfocusの当て方
-
指定したフォルダの画像を一括...
-
OpenCVでサンプルコードを使う...
おすすめ情報