質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

2491閲覧

フォルダの階層構造を変更すると、javascriptとjqueryが作動しない

taka-chiyo

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/03/19 16:35

※基本的なhtmlやcssは学習済みで、javascriptはこれから学習するところです。

初めまして。
現在ホームページを作成しておりますが、作成中のメニュー画面は、ネットで拾ったjavascriptとjqueryを使用したものをコピペで使っております。
そのメニュー画面が公開されていたサイトでは、ファイルの保存について

イメージ説明

という形体にするようにと示されていたので、フォルダを作って同じように保管していました。
その理由については、コードに記載されている相対パスの関係でかな、と思っていました。

しかし、すべてのファイルを一つのフォルダだけに入れて保存しようと思い、htmlに記載されている相対パスについて

〇css
旧)link rel="stylesheet" type="text/css" href="**css/**c'zdiary.css"
新)link rel="stylesheet" type="text/css" href="c'zdiary.css"

〇js系 
旧)<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript" src="**js**/slide.js"></script> <script type="text/javascript" src="**js**/jquery.bgpos.js"></script>

新)<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>

<script type="text/javascript" src="slide.js"></script> <script type="text/javascript" src="jquery.bgpos.js"></script>

と変更し、さらにCSSに記載されている、画像の挿入部分についても
旧)
.bg1{background-image: url(../images/1.jpg);}
.bg2{background-image: url(../images/2.jpg);}
.bg3{background-image: url(../images/3.jpg);}
新)
.bg1{background-image: url(1.jpg);}
.bg2{background-image: url(2.jpg);}
.bg3{background-image: url(3.jpg);}

と変更しました。
これについて、今までそれぞれのフォルダ内に入っていたものを、すべて同じフォルダ内に横並びで入れたことから、相対パスを変更する必要があると考え、../やフォルダ名を消去しました。

しかし、cssは適用されるものの、javascriptなどは反応しないのです。
フォルダを元に戻して相対パスももとに戻すと、また正常に戻るので、階層構造の問題なのはわかるのですが、一体何をどうすればいいのか分かる方、ご教示お願いします。

html

1<html lang="ja"> 2<head> 3<meta charset="utf-8" /> 4<title>チッチHP</title> 5<link rel="stylesheet" type="text/css" href="c'sdiary.css" > 6</head> 7 8<body> 9<h1><p id="title"> C's <span class="diary">Diary</span></p></h1> 10<p id="subtitle">#</p> 11<div id="container"> 12 <div id="menuWrapper" class="menuWrapper bg1"> 13 <ul class="menu" id="menu"> 14 <li class="bg1" style="background-position:0 0;"> <a id="bg1" href="#">LIFE</a> 15 <ul class="sub1" style="background-position:0 0;"><br><br> 16 <li><a href="../life.html">1</a></li> 17 <li><a href="../reference.html">2</a></li> 18 <!-- <li><a href="#">空白</a></li> --> 19 </ul> 20 </li> 21 <li class="bg1" style="background-position:-266px 0px;"> 22 <a id="bg2" href="#">HOBBY</a> 23 <ul class="sub2" style="background-position:-266px 0;"><br><br> 24 <li><a href="../hobby.html"><span id="pgm">1.プログラミング</span></a></li> 25 <li><a href="../cinema.html">2.</a></li> 26 <!-- <li><a href="#">空白</a></li> --> 27 </ul> 28 </li> 29 <li class="last bg1" style="background-position:-532px 0px;"> <a id="bg3" href="#">WORK</a> 30 <ul class="sub3" style="background-position:-266px 0;"><br><br><br> 31 <li><a href="#"><span id="work">仕事</span></a></li> 32 <!-- <li><a href="#">Submenu 2</a></li> 33 <li><a href="#">Submenu 3</a></li> --> 34 </ul> 35 </li> 36 </ul> 37 </div> 38</div> 39<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> 40<script type="text/javascript" src="slide.js"></script> 41<script type="text/javascript" src="jquery.bgpos.js"></script> 42</body> 43</html> 44

javascript

1$(function() { 2 /* position of the <li> that is currently shown */ 3 var current = 0; 4 5var loaded = 0; 6for(var i = 1; i <4; ++i) 7$('<img />').load(function(){ 8++loaded; 9if(loaded == 3){ 10$('#bg1,#bg2,#bg3').mouseover(function(e){ 11 12 var $this = $(this); 13 /* if we hover the current one, then don't do anything */ 14 if($this.parent().index() == current) 15 return; 16 17 /* item is bg1 or bg2 or bg3, depending where we are hovering */ 18 var item = e.target.id; 19 20 /* 21 this is the sub menu overlay. Let's hide the current one 22 if we hover the first <li> or if we come from the last one, 23 then the overlay should move left -> right, 24 otherwise right->left 25 */ 26 if(item == 'bg1' || current == 2) 27 $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(-266px 0)"},300,function(){ 28 $(this).find('li').hide(); 29 }); 30 else 31 $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(266px 0)"},300,function(){ 32 $(this).find('li').hide(); 33 }); 34 35 if(item == 'bg1' || current == 2){ 36 /* if we hover the first <li> or if we come from the last one, then the images should move left -> right */ 37 $('#menu > li').animate({backgroundPosition:"(-800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item); 38 move(1,item); 39 } 40 else{ 41 /* if we hover the first <li> or if we come from the last one, then the images should move right -> left */ 42 $('#menu > li').animate({backgroundPosition:"(800px 0)"},0).removeClass('bg1 bg2 bg3').addClass(item); 43 move(0,item); 44 } 45 46 /* 47 We want that if we go from the first one to the last one (without hovering the middle one), 48 or from the last one to the first one, the middle menu's overlay should also slide, either 49 from left to right or right to left. 50 */ 51 if(current == 2 && item == 'bg1'){ 52 $('#menu .sub'+parseInt(current)).stop().animate({backgroundPosition:"(-266px 0)"},300); 53 } 54 if(current == 0 && item == 'bg3'){ 55 $('#menu .sub'+parseInt(current+2)).stop().animate({backgroundPosition:"(266px 0)"},300); 56 } 57 58 59 /* change the current element */ 60 current = $this.parent().index(); 61 62 /* let's make the overlay of the current one appear */ 63 64 $('#menu .sub'+parseInt(current+1)).stop().animate({backgroundPosition:"(0 0)"},300,function(){ 65 $(this).find('li').fadeIn(); 66 }); 67}); 68} 69}).attr('src', 'images/'+i+'.jpg'); 70 71 /* 72 dir:1 - move left->right 73 dir:0 - move right->left 74 */ 75 function move(dir,item){ 76 if(dir){ 77 $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},200); 78 $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300); 79 $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},400,function(){ 80 $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item); 81 }); 82 } 83 else{ 84 $('#bg1').parent().stop().animate({backgroundPosition:"(0 0)"},400,function(){ 85 $('#menuWrapper').removeClass('bg1 bg2 bg3').addClass(item); 86 }); 87 $('#bg2').parent().stop().animate({backgroundPosition:"(-266px 0)"},300); 88 $('#bg3').parent().stop().animate({backgroundPosition:"(-532px 0)"},200); 89 } 90 } 91}); 92

jquery

1/** 2 * @author Alexander Farkas 3 * v. 1.21 4 */ 5 6 7(function($) { 8 if(!document.defaultView || !document.defaultView.getComputedStyle){ // IE6-IE8 9 var oldCurCSS = jQuery.curCSS; 10 jQuery.curCSS = function(elem, name, force){ 11 if(name === 'background-position'){ 12 name = 'backgroundPosition'; 13 } 14 if(name !== 'backgroundPosition' || !elem.currentStyle || elem.currentStyle[ name ]){ 15 return oldCurCSS.apply(this, arguments); 16 } 17 var style = elem.style; 18 if ( !force && style && style[ name ] ){ 19 return style[ name ]; 20 } 21 return oldCurCSS(elem, 'backgroundPositionX', force) +' '+ oldCurCSS(elem, 'backgroundPositionY', force); 22 }; 23 } 24 25 var oldAnim = $.fn.animate; 26 $.fn.animate = function(prop){ 27 if('background-position' in prop){ 28 prop.backgroundPosition = prop['background-position']; 29 delete prop['background-position']; 30 } 31 if('backgroundPosition' in prop){ 32 prop.backgroundPosition = '('+ prop.backgroundPosition; 33 } 34 return oldAnim.apply(this, arguments); 35 }; 36 37 function toArray(strg){ 38 strg = strg.replace(/left|top/g,'0px'); 39 strg = strg.replace(/right|bottom/g,'100%'); 40 strg = strg.replace(/([0-9.]+)(\s|)|$)/g,"$1px$2"); 41 var res = strg.match(/(-?[0-9.]+)(px|\%|em|pt)\s(-?[0-9.]+)(px|\%|em|pt)/); 42 return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]]; 43 } 44 45 $.fx.step. backgroundPosition = function(fx) { 46 if (!fx.bgPosReady) { 47 var start = $.curCSS(fx.elem,'backgroundPosition'); 48 49 if(!start){//FF2 no inline-style fallback 50 start = '0px 0px'; 51 } 52 53 start = toArray(start); 54 55 fx.start = [start[0],start[2]]; 56 57 var end = toArray(fx.options.curAnim.backgroundPosition); 58 fx.end = [end[0],end[2]]; 59 60 fx.unit = [end[1],end[3]]; 61 fx.bgPosReady = true; 62 } 63 //return; 64 var nowPosX = []; 65 nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; 66 nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; 67 fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1]; 68 69 }; 70})(jQuery); 71

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

img要素のsrc属性値をセットするところが旧のままになってませんか?

javascript

1attr('src', 'images/'+i+'.jpg');

このため、loadイベントが発生せず、mouseoverイベントハンドラが仕込めてないんだと思います。

投稿2021/03/20 01:09

gpsoft

総合スコア1323

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

taka-chiyo

2021/03/20 16:09

gpsoft様 ご指摘のとおり変更したら動きました。 ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問