• 締切済み

以下ＨＴＭＬからｊｓへのを読みこみがどうしてもできません。

【以下はhtml内の２つの読み込み方でｊｓへ飛ばしてあります。】 <ul id="item1"> <li><a href="javaScript:ShouSai()" onmouseover="Ohen(1)" onmouseout="Nhen(1)"><img src="img/eigyou/Item_mnBT/normalType/item_market_MN.gif" alt="マーケティングリサーチ" width="137" height="26" border="0" id="1mn" /></a></li> </ul> <ul> <li id="item3"><a href="#" onclick="ShouSai('img/eigyou/catalog_big.jpg')">アイテム３ 　　　　　　　　　　<ul> <li>商品パンフレット</li> <li>会社案内</li> <li>求人用パンフレット</li> </ul> </a></li> </ul> ----------------------------------------------------- 【以下js内でalertも確認しましたが、読み込んでないです。】 //alert('kakunin'); function ShouSai(gazou) { var x=window.open('','subWin','width=500,height=300,left=200,top=80',); x.focus(); x.document.write('<body leftmargin="0" topmargin="0"><img src='+'img/eigyou/catalog_big.jpg'+'><p>テスト中。</p><form><input type="button" value="閉じる" onclick="window.close()"></form></body>'); } --------------------------------------------------- >>普通に <a href="#" onclick="="ShouSai('img/eigyou/catalog_big.jpg')">test</a>と余計なタグ抜き確認してみてもやはりjs読み込まないです。ちなみにバリデートしたら、<a>内で<ul>は使用できないと出たのですが、ソース内全てを直す必要はなく、これはこの主旨の原因にはならないですよね？これはほっといたまま作りあげてもＳＥＯ対策には良くないって程度ですよね？ 質問が増えてしまいましたが、どうか主旨の質問の方だけでも、アドバイスいただけると幸いです。宜しくお願いします。

みんなの回答

  • fujillin
  • ベストアンサー率61% (1594/2576)
回答No.1

＞jsを読み込んでないです の意味がよくわかりませんが、ｊｓファイルをloadしていないということでしょうか？ 外部ファイルのスクリプトであれば、 　<script type="text/javascript" src="test.js"> などのようにして、最初に読み込んでおく必要があります。 （通常はheadタグ内に記載） スクリプトが実行されないという意味であれば、テストしてみたところ実行できます。 ただし、スクリプト内の最初のwindow.openの部分の「,」が余分で、構文エラーになっていますので、修正する必要があります。 　('','subWin','width=500,height=300,left=200,top=80',) 　　　　　　　　　　　　　　　↓ 　('','subWin','width=500,height=300,left=200,top=80')

WebRunva
質問者

お礼

fujillinさま>> ありがとうございました。まずはさっそくスクリプト内の構文エラーを 直してみました。 fujillinさまの言うとおり、ｊｓファイルをloadしていないということです。 もう一度イチから作りなおしてみて、問題があったら、再質問させて頂きたいと思います。ありがとうございました。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 同HTML内で複数のjQueryを設置したいです

    買ってきたjQueryの本を元に複数のjQueryを使用し、 タブメニュータイプのものと自動スライドショータイプのを 同じHTML内に入れたいのですが両方ともうまくいきません。 いろいろ自分なりに調べたのですが、わからないです。 うまくいく方法をどうか教えてもらえないでしょうか？ 宜しくお願いします。 <!doctype html> <html> <head> <meta charset="utf-8"> <title>細かなCSS設定なしに、画像をロールオーバーさせる</title> <link rel="stylesheet" href="css/base.css" type="text/css" media="all" /> <script src="js/jquery.rollover.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript" charset="UTF-8"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script src="js/jquery.easing.1.3.js" type="text/javascript"></script> <script src="js/jquery.slideviewer.1.2.js" type="text/javascript"></script> <script type="text/javascript"> jquery(function() { jquery('div#gallery').slideView({ easeFunc: 'easeInOutBack',//少しバックするアニメーション easeTime: 1200,//アニメーションの時間 toolTip: true,//ツールチップの表示 ttOpacity: 0.5//ツールチップの透明度 }); }); </script> </head> <body> <div id="wrap"> <div id="gnav"> <ul> <li><a href="#"><img src="images/btn_01.jpg" alt="トップページ"></a></li> <li><a href="#"><img src="images/btn_02.jpg" alt="会社概要"></a></li> <li><a href="#"><img src="images/btn_03.jpg" alt="制作実績"></a></li> <li><a href="#"><img src="images/btn_04.jpg" alt="お問い合わせ"></a></li> <li><a href="#"><img src="images/btn_05.jpg" alt="お問い合わせ"></a></li> </ul> </div> <!-- END #gnav --> <div id="wrap"> <h1><img src="images/douga/logo.jpg" alt="PHOTO GALLERY" width="439" height="81" /></h1> <div id="gallery" class="svw"> <ul> <li><img src="images/douga/img_01.jpg" alt="PHOTO GALLERY 01" width="655" height="430" /></li> <li><img src="images/douga/img_02.jpg" alt="PHOTO GALLERY 02" width="655" height="430" /></li> <li><img src="images/douga/img_03.jpg" alt="PHOTO GALLERY 03" width="655" height="430" /></li> <li><img src="images/douga/img_04.jpg" alt="PHOTO GALLERY 04" width="655" height="430" /></li> <li><img src="images/douga/img_05.jpg" alt="PHOTO GALLERY 05" width="655" height="430" /></li> <li><img src="images/douga/img_06.jpg" alt="PHOTO GALLERY 06" width="655" height="430" /></li> <li><img src="images/douga/img_07.jpg" alt="PHOTO GALLERY 07" width="655" height="430" /></li> </ul> </div> </div><!-- END wrap --> <img src="images/arimura_ocean3.jpg" class="ocean"> <img src="images/arimura_ocean3.jpg"> <p class="pagetop"><a href="#"><img src="images/btn_pagetop.jpg" alt="上へ戻る" class="rollover"></a></p> </div> <!-- END #wrap --> </body> </html>

  • jCarouselLiteループ時の属性値取得

    jCarouselLiteプラグインにてカルーセルパネルをカスタマイズしています。 IE9/Safari5/FireFox12でテストしています。 jquery-1.7.2.min.js jcarousellite_1.0.1.js 独自スクリプトでクリックされたときの<a>のhref属性値を取得できるかアラート表示させて確認してみると <ul></ul>に囲まれた分５つの１ループ目はそれぞれ取得できるのですが、２ループ目以降の<a>のhref属性が取得できません。 現在、無限ループするように設定し、それはできています。 =======独自スクリプト========== $(function() { $("#carousel .anyClass a").click(function(){ 　　alert($(this).attr("href"))；//←２周目のhref属性が取得できない }); }); ============================ =======htmlソース=========== <div id="carousel"> <div class="anyClass"> <ul> <li><a href="img/photo1.jpg"><img src="img/photo1_thum.jpg" alt="" class="01" /></a></li> <li><a href="img/photo2.jpg"><img src="img/photo2_thum.jpg" alt="" class="02" /></a></li> <li><a href="img/photo3.jpg"><img src="img/photo3_thum.jpg" alt="" class="03"/></a></li> <li><a href="img/photo4.jpg"><img src="img/photo4_thum.jpg" alt="" class="04"/></a></li> <li><a href="img/photo5.jpg"><img src="img/photo5_thum.jpg" alt="" class="05"/></a></li> </ul> </div> </div> ============================ お手数ですがご教授ください。お願いします。

  • 【Jquery】before()でソースを挿入

    Jquery初心者です。　 before()で指定したdivの直前にソースを挿入したいのですが、構文エラーでうまくいきません。 単純なソース（たとえば<p>hello</p>など）はうまく入るのですが、 img等「""」が入るタグがうまく挿入できません。 リストやアンカー、イメージなどを挿入するつもりなのですが、 before()を使う以外で何か方法はありますか？ 書いたソースは <div id="exam">その他の商品はこちら</div> <script type="text/javascript" src="/js/jquery/.js"></script> <script type="text/javascript"> $(function(){ $("div#exam").before("<ul><li><img src="title.gif" alt="おすすめアイテム" /></li><li><a href="/item.html?id=000"><img src="01.gif" alt="アイテムA" /></a></li><li><a href="/item.html?id=001"><img src="02.gif" alt="アイテムB" /></a></li><li><a href="/item.html?id=002"><img src="03.gif" alt="アイテムC" /></a></li></ul>"); return false; }); </script>

  • 画像にリンクを張ったら、レイアウトが崩れました。

    ホームページを制作しているのですが、リストにして並べた画像にリンクを張ったら、レイアウトが崩れてしまいました。 まず、リンクを張らずにやってみました。 HTML部分 <ul id="main_center"> <li id="1"><img src="http://***.jpg" /></li> <li id="2"><img src="http://***.jpg" /></li> <li id="3"><img src="http://***.jpg" /></li> </ul> CSS部分 #main_center #1,#2,#3 { display: block; width: 220px; height: 20px; list-style-type: none; margin-bottom: 10px; } タグは以上の通りでやったところ、問題なく画像が綺麗に並んだのですが、 <ul id="main_center"> <li id="1"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="2"><a href="http://***/"><img src="http://***.jpg" /></a></li> <li id="3"><a href="http://***/"><img src="http://***.jpg" /></a></li> </ul> といった感じで、画像にリンクさせたところ上下に余分なスペースが出来てしまいました。 リンクを張っただけで、レイアウトが崩れてしまうということはあるのでしょうか。 または、なにかタグが間違っているのでしょうか。 どなたかアドバイスをお願いいたします。

    • ベストアンサー
    • HTML
  • ジャバスクリプトでクリックして画像を切り替えていま

    画像は一つのスライドセットに5枚ほど用意してあり、 今回、あらたにもう一セット同じページに追加したところ、相互のく動作がうまくいきません。 コードをジャバスクリプトの部分だけコピーしてみます。どこかに誤りがあったら是非ご教授ください。 <div id="nav2"> <ul class="imagelist"> <li><a class="current" href="#image1">1</a></li> <li><a href="#image2">2</a></li> <li><a href="#image3">3</a></li> <li><a href="#image4">4</a></li> <li><a href="#image5">5</a></li> <li><a href="#image6">6</a></li> </ul> </div> <div id="nav3"> <ul class="imagelist"> <li><a class="current" href="#image7">1</a></li> <li><a href="#image8">2</a></li> <li><a href="#image9">3</a></li> <li><a href="#image10">4</a></li> <li><a href="#image11">5</a></li> </ul> </div> ： ： ： <div id="slideshow"> <img id="image1" src="/livingimg/002.jpg"alt="Image 1" /> <img id="image2" src="/livingimg/031.jpg" alt="Image 2" /> <img id="image3" src="/livingimg/6039.jpg" alt="Image 3" /> <img id="image4" src="/livingimg/6336.jpg" alt="Image 4" /> <img id="image5" src="/livingimg/5563.jpg" alt="Image 5" /> <img id="image6" src="/livingimg/5860.jpg" alt="Image 6" /> </div> <div id="slideshow"> <img id="image7" src="/interiorimg/035akari.jpg"alt="Image 7" /> <img id="image8" src="/interiorimg/034.jpg" alt="Image 8" /> <img id="image9" src="/interiorimg/5923akari.jpg" alt="Image 9" /> <img id="image10" src="/interiorimg/akari190.jpg" alt="Image 10" /> <img id="image11" src="/interiorimg/5866akari.jpg" alt="Image 11" /> </div> こんな具合です。またhead部分に <style type="text/css"> <!-- #slideshow img{ display: none; } --> </style> と書いてあります。これで回答いただくことに必要な情報は十分でしょうか もちろん一つのセットの場合は正常に動作しています。 宜しくお願いします。 補足 ちなみに url は http://brownpaper.biz/interior.htm です。

  • CSSで画像を均等に横並びに配置するには？

    テーブルを使わずに、CSSで画像を自由に配置する方法がわからず困っています。 下記のようなイメージで配置したいです。6列。行は可変。 ■…画像 画像の数に応じて、はみだした画像は自動的に下に改行される感じです。 ■　■　■　■　■　■ ■　■　■　■　■ HMTLソースは以下のとおりです。 <ul> <li><a href="*"><img src="img/01.jpg" /></a></li> <li><a href="*"><img src="img/02.jpg" /></a></li> <li><a href="*"><img src="img/03.jpg" /></a></li> <li><a href="*"><img src="img/04.jpg" /></a></li> <li><a href="*"><img src="img/05.jpg" /></a></li> <li><a href="*"><img src="img/06.jpg" /></a></li> <li><a href="*"><img src="img/07.jpg" /></a></li> <li><a href="*"><img src="img/08.jpg" /></a></li> <li><a href="*"><img src="img/09.jpg" /></a></li> <li><a href="*"><img src="img/10.jpg" /></a></li> <li><a href="*"><img src="img/11.jpg" /></a></li> </ul> どのようにCSSを定義すればスマートでしょうか？ よろしくお願いします。

  • mootoolsを使ったドロップダウンメニューを同じページ内に複数使用したい

    javascript初心者です・・。 下記のURLからmootools 一式をDLしてドロップダウンのメニューを 設置しました。 http://www.css-lecture.com/log/javascript/043.html ↑ 1つ目のメニューは問題なく設置できました。 今回私がやりたい事は、同じページ内の違う場所に ドロップダウンメニューをもうひとつ設置したいのですが・・ どこを修正すれば良いかわからず困っています。 今現在の状況としては、 ・上記サイトでDLしたmooltools一式を、コピーして 　単純に2セット用意してみました。 ・htmlを見ると、classではなくIDで組まれていたので、 　2セット目のjs、cssを1セット目とは違うID名に変更してみました。 と、これだけで動くような簡単なものでは無かったのですね・・。 納期も迫り、大変困っています。。 どなたか助言をいただけたらと大変助かります。。 現在制作中のプルダウンの部分のhtml載せておきます。 <div id="menu-container"> <ul id="drop_down_menu"> <li id="btn01"><a href="#"><img src="../common/img/gnavi01_off.jpg" alt="トップ" width="116" height="56" /></a></li> <li class="menu" id="btn02"><a href="#">カテゴリ1</a> <ul class="links"> <li><a href="#">コンテンツ01</a></li> <li><a href="#">コンテンツ02</a></li> <li><a href="#">コンテンツ03</a></li> </ul> </li> <li class="menu" id="btn03"><a href="#">カテゴリ2</a> <ul class="links"> <li><a href="#">コンテンツ04</a></li> <li><a href="#">コンテンツ05</a></li> <li><a href="#">コンテンツ06</a></li> </ul> </li> <li class="menu" id="btn04"><a href="#">カテゴリ3</a> <ul class="links"> <li><a href="#">コンテンツ07</a></li> </ul> </li> <li id="btn05"><a href="#">カテゴリ4</a></li> </ul> </div> ↑これが1つ目のプルダウンメニューの箇所で、 同じように2つ目のメニューもid名を変えて組みました。 mootoolsのjsは、 header内に外部jsとして1つ目、2つ目のプルダウンメニュー分のjsを 順番に読み込ませています。 （先に読み込ませた方のプルダウンメニューが決まって動作しません）

  • Javascriptでプルダウンメニューを作りましたが関数化できません

    <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> function foldmenu(i){ var i; for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } $(function(i){ $('#c'+i).click(function(){ for(j=1;j<=5;j++){ if(i==j) $('#sc'+j).toggle('normal'); else $('#sc'+j).hide(); } }); }); } </script> <div id="c1" onClick="foldmenu('1')">1</div> <ul id="sc1"> <li><a href="#">入力画面1-1</a></li> <li><a href="#">入力画面1-1</a></li> </ul> <div id="c2" onClick="foldmenu('2')">2</div> <ul id="sc2"> <li><a href="#">入力画面2-1</a></li> <li><a href="#">入力画面2-2</a></li> </ul> <div id="c3" onClick="foldmenu('3')">3</div> <ul id="sc3"> <li><a href="#">入力画面3-1</a></li> <li><a href="#">入力画面3-2</a></li> </ul> <div id="c4" onClick="foldmenu('4')">4</div> <ul id="sc4"> <li><a href="#">入力画面4-1</a></li> <li><a href="#">入力画面4-2</a></li> </ul> <div id="c5" onClick="foldmenu('5')">5</div> <ul id="sc5"> <li><a href="#">入力画面5-1</a></li> <li><a href="#">入力画面5-2</a></li> </ul> と関数化しましたがうまく動きません。 初期状態では1の部分が開く。 それ以降はクリックした部分が開き開いていた部分は閉じるという感じにしたいです。 縦長のプルダウンメニューです。 たてに1から5が並んでいて、1をクリックすると１と2の間に1の子カテゴリーが表示されます。 困っています。教えてください。

  • cookie.jsを使ってクッキーを利用する方法。

    cookie.jsを使ってクッキーを利用する方法。 現在ジャバスクリプトにて、複数の画像、リンク、位置データがonClickで変わるように設定しています。 違うページに行き戻ると、置き換えられた画像のデータがなくなってしまいます。 cookie.jsを使えばいいと思い、その設定方法をいろいろと調べてみましたがわかりませんでした。 こういう場合は、ジャバスクリプトをどのように記入すれば良いのでしょうか。 よろしくお願いいたします。 <body> <a href="http://www.a01"> <img name="AAA" id="AAA" src="images/a01.jpg" style="position: absolute; top: 310px; left: 220px; z-index: 45;" border="0" /></a> <a href="http://www.b01"> <img name="BBB" id="BBB" src="images/b01.jpg" style="position: absolute; top: 227px; left: 363px; z-index: 120;" border="0" /></a> <a href="http://www.c01"> <img name="CCC" id="CCC" src="images/c01.jpg" style="position: absolute; top: 418px; left: 425px; z-index: 120;" border="0" /></a> <form> <input value="" title="clear" style="background: transparent url(images/clear.gif) no-repeat;" onclick="document.AAA.src='images/spacer.gif';document.links[0].href='#';" type="button" /> <div class="AAA"> <a href="#" class="prev_AAA">戻る</a> <a href="#" class="next_AAA">進む</a> <ul> <li> <input value="" title="" style="background: transparent url(images/a01.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer; " onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a01.jpg';document.links[0].href='http://www.a01'" type="button" /> </li> <li> <input value="" title="" style="background: transparent url(images/a02.gif) no-repeat 0pt 0pt; width: 64px; height: 64px; cursor: pointer; " onclick="document.AAA.style.top= '310px';document.AAA.style.left='220px';document.AAA.src='images/a02.jpg';document.links[0].href='http://www.a02'" type="button" /> </li> </ul></div> ……………… </form></body>

  • ＨＴＭＬ、ＣＳＳ

    ＦＣ２（無料サーバー）でホームページを作っているのですが、ＦＣ２の広告（Ｐｏｗｅｒｅｄ　ｂｙ…という下に一行だけ出るもの）が私のホームページに表示されなくて困っています。テンプレートを借りて作成したページで、テンプレートのカスタマイズはしていません。広告が表示されないと規約違反になってしまうので、表示させたいのです。何が原因でしょうか？ <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html; charset=Shift_JIS"> <meta http-equiv="content-style-type" content="text/css"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <link rel="stylesheet" href="st.css" type="text/css"> <title>タイトル</title> </head> <body id="TOP"> <!-- ページ全体　 --> <div id="page"> <!-- ヘッダー --> <div id="head"> <h1><a href="index.html">Your Sitename</a></h1> </div> <!-- メニュー --> <div id="menu"> <ul> <li><a href="sample.html">SAMPLE</a> <li><a href="link.html">LINK</a> <li class="on"><a href="text_menu.html">TEXT</a> <li><a href="index.html">INDEX</a> </ul> </div> <!-- コンテンツ --> <div id="contents"> <h2>MENU</h2> <div class="text"> <h3>SHORT STORY</h3> <ul class="sub01"> <li><a href="text.html">STORY01</a> </ul> </div> <div class="text"> <h3>LONG STORY</h3> <h4>TITLE01</h4> <ul class="sub02"> <li><a href="text.html">1</a> <li><a href="text.html">2</a> </ul> </div> <div class="text"> <h4>ILLUST01</h4> <ul class="sub02"> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> <li><a href="img.html"><img src="img/banner01.gif" width="31" height="31" alt="画像名"></a> </ul> </div> <div class="pagetop"><a href="#TOP">▲Top</a></div> </div> <!-- フッター --> <div id="foot"> <ul> <li> </ul> </div> </div> </body> </html>

    • ベストアンサー
    • HTML

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する