Q&A
※基本的な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="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
回答1件
0
ベストアンサー
img要素のsrc属性値をセットするところが旧のままになってませんか?
javascript
1attr('src', 'images/'+i+'.jpg');
このため、loadイベントが発生せず、mouseoverイベントハンドラが仕込めてないんだと思います。
投稿2021/03/20 01:09
総合スコア1323
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2021/03/20 16:09