my-- の回答履歴

全161件中21～40件表示
  • createElementによるタグ追加作成

    ボタンが押された時にPタグの中に、H1タグを挿入されるhtmlを作成しました。 ですが、ボタンを押しても addH関数に処理が流れないみたいなのです。 なぜなのでしょうか・・・。 環境は、Win7・IE9です。 よろしくお願いします。 ===以下ソース=== <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8"> <meta http-equiv="Content-Script-Type" content="text/javascript"> <title>タグの追加</title> <script type="text/javascript"> <!-- function addH(){ alert("test"); /*（1）Pタグの要素ノードオブジェクト*/ var info = document.getElementById('info'); alert(info): /*（2）新たにH1タグの要素ノードを作成する*/ var h1Node = document.createElement('h1'); /*（3）新たにテキストノードを作成する*/ var textNode = document.createTextNode('こんにちは'); /*（4）作成したテキストノードをH1タグ要素の子要素として追加する*/ h1Node.appendChild(textNode); /*（1）Pタグに、完成したH1タグを追加する*/ info.appendChild(h1Node); } --> </script> </head> <body> <p id="info"></p> <input type="button" value="H1タグ追加" onClick="addH()"> </body> </html> ===ソースここまで===

  • ゲーム「さめがめ」の駒の初期配置について

    JavaScriptでCanvasを利用して「さめがめ」を作ろうと思うのですが、仕様を決める段階で、いきなり疑問にぶつかりました。駒の初期配置をどうするかという問題です。 さめがめには既存のものが数多く存在しているのですが、一般的にさめがめの初期配置には必ず解が存在するべきなのでしょうか。つまり全部の駒を消す手順が必ず存在するべきなのでしょうか。それとも、どんなに頑張っても全部の駒を消すことができないような配置になっている場合もあって良いものなのでしょうか。例えば「上海」なら解が無いなんていうことは許されないと思います。 いずれにせよ、できれば解が存在するような初期配置を実現したいものです。 そのような初期配置を作る方法を考えてみたのですが、意外に難しいようです。いろいろなサイトを調べてみましたが、このことについて書かれているものは見つけられませんでした。 もしも解を持つ初期配置の作り方が確立されているのであれば、その方法を採用したいと思います。できればJavaScript、Java、Cのいずれかのソースコードで参考になるものがあればうれしいのですが、ロジックの大まかな流れだけでも分かればなんとかなると思います。

  • Nivo Sliderのエフェクトについて

    書き込みさせていただきます。 Nivo Sliderで画像のスライドを作成したいのですが エフェクトはそれぞれの画像に設定できないのでしょうか？ また、画像が4枚ありますが、最後の画像のみ 表示を長めに設定できませんか。 よろしくお願い致します。

  • Nivo Sliderのエフェクトについて

    書き込みさせていただきます。 Nivo Sliderで画像のスライドを作成したいのですが エフェクトはそれぞれの画像に設定できないのでしょうか？ また、画像が4枚ありますが、最後の画像のみ 表示を長めに設定できませんか。 よろしくお願い致します。

  • google feed apiを使い分けたい

    google ajax feed apiですが、下記コードを書いて "rss_url"部分を引数にして同一ページ内でURLの違うものを複数 使用したいのですが、やり方がわかりません。 理想は<div id = "feed"></div>の id = ""の部分を変更してURLごとに使い分けたいのですが、 どうすればいいでしょうか？ google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("rss_url"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); } }); } google.setOnLoadCallback(initialize); このコードだと<div id = "feed"></div>を記述すればうまく実行されます。 試しに google.load("feeds", "1"); function initialize(rss_url, id) { var feed = new google.feeds.Feed(rss_url); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById(id); } }); } google.setOnLoadCallback(initialize); var test = new MyRssReader("rss_url", "test1"); として <div id = "test1"></div>としてみましがたうまくいきませんでした。

  • google feed apiを使い分けたい

    google ajax feed apiですが、下記コードを書いて "rss_url"部分を引数にして同一ページ内でURLの違うものを複数 使用したいのですが、やり方がわかりません。 理想は<div id = "feed"></div>の id = ""の部分を変更してURLごとに使い分けたいのですが、 どうすればいいでしょうか？ google.load("feeds", "1"); function initialize() { var feed = new google.feeds.Feed("rss_url"); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById("feed"); } }); } google.setOnLoadCallback(initialize); このコードだと<div id = "feed"></div>を記述すればうまく実行されます。 試しに google.load("feeds", "1"); function initialize(rss_url, id) { var feed = new google.feeds.Feed(rss_url); feed.setNumEntries(5); feed.load(function(result) { if (!result.error) { var container = document.getElementById(id); } }); } google.setOnLoadCallback(initialize); var test = new MyRssReader("rss_url", "test1"); として <div id = "test1"></div>としてみましがたうまくいきませんでした。

  • Google Map （外部から情報ウィンドウ開く

    Google Maps API v3　において「地図外のHTMLから地図内の情報ウィンドウを開く」ということをやろうとしているのですが、どうにもうまくいきません。 下記コードにおいて、地図外にある「あいうえお商店」や「かきくけこ不動産」をクリックした際、地図内に情報ウィンドウが開くようにするためにはどのようにすればよいでしょうか。 すでに丸3日間悩んでおり、私の力ではどうにもならないと判断したため、皆さまのお力をお借りすることにしました。大変恐れ入りますが、貧弱な知識の私にどうか知恵を与えてやって下さい。どうぞよろしくお願い致します。 深みにはまって抜け出せないコードは以下の通りです。 ---------------------------------------------------------------- <!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=utf-8"/> <title>test</title> <meta http-equiv="Content-Script-Type" content="text/javascript"> <script type="text/javascript" src="//maps.googleapis.com/maps/api/js?sensor=false"></script> <script type="text/javascript"> var currentInfoWindow = null; //最後に開いた情報ウィンドウを記憶 function initialize() { var latlng = new google.maps.LatLng(35.67105, 139.743624); var opts = { zoom: 13, center: latlng, mapTypeId: google.maps.MapTypeId.ROADMAP }; var map = new google.maps.Map(document.getElementById("map_canvas"), opts); // ***************１件目のデータ*************** var m_latlng1 = new google.maps.LatLng(35.675224, 139.737914); var marker1 = new google.maps.Marker({position: m_latlng1,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=1|3CFFF8|000000',title: '港区赤坂3-3-3' }); var contentString1= '</p>あいうえお商店</p></div>'; var infowindow1 = new google.maps.InfoWindow({content: contentString1 }); // ***************１件目のデータ*************** // ***************２件目のデータ*************** var m_latlng2 = new google.maps.LatLng(35.670772, 139.733875); var marker2 = new google.maps.Marker({position: m_latlng2,map: map,icon: 'http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=2|3CFFF8|000000',title: '港区赤坂5-5-5' }); var contentString2= '</p>かきくけこ不動産</p></div>'; var infowindow2 = new google.maps.InfoWindow({content: contentString2 }); // ***************２件目のデータ*************** google.maps.event.addListener(marker1 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow1.open(map,marker1); currentInfoWindow = infowindow1; }); google.maps.event.addListener(marker2 , 'click', function() { if (currentInfoWindow) { currentInfoWindow.close(); } infowindow2.open(map,marker2); currentInfoWindow = infowindow2; }); } function myclick(idx) { google.maps.event.trigger(marker[idx],'click'); } </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 700px; height: 500px"></div> 1　<a href="javascript:myclick(0)">あいうえお商店</a></p> 2　<a href="javascript:myclick(1)">かきくけこ不動産</a></p> </body> </html> ---------------------------------------------------------------- 大変恐れ入りますが、どうぞよろしくお願い致します。

  • RSSリーダー日時テレコ

    開設したサイトに下記のサイトを参考にして別サイトのRSSフィードを取得＆表示させています。 http://neta-times.net/entries/953/ こちらのサイトにもお世話になり少しずつ改良しました。 日付順に昇順で表示させているのですが、年をまたいで2011年のフィードと2012年のフィードが下記のようにテレコになってしまいました。 2011/12/15 2012/1/5 2012/1/4 ソースは <script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAAgYbHtK3iN8_bzOiM-ozq0BTX_koMG-j7dTONG-a0MlukASCt8RQpx0fmfui6hPPS_oIx7hon-9_HCA"></script> <script type="text/javascript"> <!--// google.load("feeds", "1"); var entryArray = new Array(); var entryNum = 0; function initialize() { feedAdd("RSSのURL", 1,'ブログタイトル'); } function feedAdd(rssUrl, boolNum,title) { var feed = new google.feeds.Feed(rssUrl); feed.setNumEntries(5);//サイト1つあたりの取得するフィード数 feed.load(function(result) { if (!result.error) { for (var i = 0; i < result.feed.entries.length; i++) { entryArray[entryNum] = result.feed.entries[i]; var date = new Date(result.feed.entries[i].publishedDate); entryArray[entryNum].sortDate = ( date.getFullYear()*1000000 ) + ( (date.getMonth() + 1)*3600*32 ) + ( date.getDate()*3600 ) + ( date.getHours()*60 ) + date.getMinutes(); entryArray[entryNum].blogName = result.feed.title; entryArray[entryNum].blogName = title; entryNum+=1; } } if(boolNum==1){ feedOutput("feed", 100);//フィードの出力 } }); } function feedOutput(feedId, listNum){ var useFeed = ""; var useDate = ""; var container = document.getElementById(feedId); var refDate = new Date(); refDate = new Date(+refDate - (7*24*60*60*1000 + refDate%86400000 - refDate.getTimezoneOffset()*60000)); var newImage = '<img src="./img/new.gif" alt="new">'; entryArray = asort(entryArray, "sortDate"); if(listNum==100){//出力するリスト数 listNum = entryNum; } for (var i = 0; i < listNum; i++) { var entry = entryArray[i]; var date = new Date(entry.publishedDate); var y = date.getFullYear(); if (y < 10) {y = "0" + y;} var m = date.getMonth() + 1; if (m < 10) {m = "0" + m;} var d = date.getDate(); if (d < 10) {d = "0" + d;} useDate = y + "年" + m + "月" + d + "日"; youbi = date.getDay(); day = new Array("日","月","火","水","木","金","土"); useFeed += '<div style="float:left;width:115px;">'; useFeed += (date>refDate)?newImage:""; //←new画像の表示を追加 useFeed += "&nbsp;"+ y + "/" + m + "/" + d + "(" + day[youbi] + ")"; useFeed += '</div><div style="float: left;width:400px;height:18px;overflow:hidden;"><a href="' + entry.link + '" target="_blank" title="' + entry.title + '【' + entry.blogName + '】">' + entry.title + '／' + entry.blogName +'</a></div>'; } container.innerHTML = '<div>' + useFeed + '</div>'; } function asort(myArray, key){ return myArray.sort ( function (b1, b2) { return b1[key] > b2[key] ? -1 : 1; } ); } google.setOnLoadCallback(initialize); //--> </script><font size="2" face="Times new Roman"><div style="height:110px; width:600px; overflow:auto;" id="feed">Loading...</div> どのようにすればこのテレコが修正できるでしょうか？ ご存知の方いらっしゃいましたらご教示ください。 よろしくお願いします。

  • 画像が拡大の前へ、次へのリンク

    現在、画像クリックで拡大する下記のjQueryを設置してりるのですが、 http://chocolat.insipi.de/demo.html demoサイトでは、画像をaタグで順番に設置していますが これを下記のようにliタグに変更すると画像が拡大表示された時に 前の画像と次の画像へのリンク画像が消えてしまいます。 <ul id="exemple1" title="Gouttes"> <li> <a href="series/gouttes/1.jpg" title="Rose"> <img src="series/gouttes/mini/1.jpg"> </a></li> <li> <a href="series/gouttes/2.jpg" title="Noir"> <img src="series/gouttes/mini/2.jpg"> </a></li> <li> <a href="series/gouttes/3.jpg" title="Orange"> <img src="series/gouttes/mini/3.jpg"> </a></li> </ul> HTMLのBODY内には、以下のようにスクリプトを設置しています。 liタグでも前へ次へのリンクが表示されるようにするには、スクリプトのどの箇所を修正すればうまく動くかおわかりの方がおられましたらご教授頂けないでしょうか。 <script type="text/javascript" charset="utf-8"> $(document).ready(function(){ $(function() { $('#exemple1li').Chocolat({ }); }); }); </script> ■chocolat.js (function($) { images = new Array(); $.fn.Chocolat = function(settings) { settings = $.extend({ modeText: false, linksContainer: 'portfolio', // must be an <ul> ID , # overlayOpacity: 0.8, overlayCouleur: '#fff', vitesseApparitionOverlay: 500, vitesseApparitionImage: 500, vitesseDisparitionImage: 500, vache: true, //active(true) ou non(false) la fermeture lorsque l'on clique sur le fond. separateur1: ' | ', //separe le titre la serie de la position de l'image au sein de la s駻ie ... separateur2: '/', //s駱are l'image actuelle sur le nombre d'image total dans la s駻ie... gaucheImg: 'img/gauche.gif', //chemin vers l'image pour aller vers la gauche droiteImg: 'img/droite.gif', //chemin vers l'image pour aller vers la droite fermerImg: 'img/close.png', //chemin vers l'image pour fermer chocolat imageActuelle: 0, //ici devient l'image de d駱art... serie: 0, nomSerie: 0, derniereImage: 0 },settings); this.each(function(index){ settings.serie = images.length; settings.nomSerie = $(this).attr('title'); images[settings.serie] = new Array(); if($(this).get(0).tagName == 'A'){e = $(this);}// si l'appel est fait sur les liens else{e = $(this).children();}// sinon (sur une div) e.each(function(index) { images[settings.serie][index] = new Array(); images[settings.serie][index]['adresse'] = $(this).attr('href'); images[settings.serie][index]['legende'] = $(this).attr('title'); if(!settings.modeText){ $(this).unbind('click').bind('click', {id: settings.serie, nom : settings.nomSerie, i : index}, _initialise); } }) if(settings.modeText){ if($('#'+settings.linksContainer).size() == 0){ $(this).before('<ul id="'+settings.linksContainer+'"></ul>'); } $('#'+settings.linksContainer).append('<li><a href="#" id="Choco_numserie_'+settings.serie+'" class="Choco_link">'+settings.nomSerie+'</a></li>'); $(this).remove(); return $('#Choco_numserie_'+settings.serie).unbind('click').bind('click', {id: settings.serie, nom : settings.nomSerie, i : settings.imageActuelle}, _initialise); } }); function _initialise(event) { settings.imageActuelle = event.data.i; settings.serie = event.data.id; settings.nomSerie = event.data.nom; afficherChocolat(settings.serie); //recupere numserie dans id . return false; } function _interface(){ //html $('body').append('<div id="Choco_overlay"></div><div id="Choco_content"><div id="Choco_close"></div><div id="Choco_container_photo"></div><div id="Choco_container_description"><span id="Choco_container_titre"></span><span id="Choco_container_via"></span></div><div id="Choco_aller_gauche" class="Choco_fleches"></div><div id="Choco_aller_droite" class="Choco_fleches"></div></div>'); $('#Choco_aller_gauche').css('background-image', 'url('+settings.gaucheImg+')'); $('#Choco_aller_droite').css('background-image', 'url('+settings.droiteImg+')'); $('#Choco_close').css('background-image', 'url('+settings.fermerImg+')'); //events $(doc

  • a要素でリンク貼るとロールオーバーしないのは何故？

    お世話になります。 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); } },

  • 【jQuery】クリックで開閉するメニュー

    今、クリックで開閉するプルダウンメニューを以下のように作っているのですが 【HTML】 <div class="menu">メニュー</div> <div class="a"> <p>カテゴリー１</p> <p>カテゴリー2</p> </div> 【jQuery】 $(".menu").click(function(e){ if($(".a").css("display") == "none"){ $(".a").show(); }else{ $(".a").hide(); } }); ".munu"の要素をクリックした場合、メニューの".a"の要素が開き もう一度".munu"の要素をクリックすると、メニューの".a"の要素が閉じます。 基本的な動作はこれでいいのですが ".munu"や".a"の要素以外の場所をクリックしたら ".a"を閉じるようにしたいのですが、どのようにすればいいのでしょうか？ OKWaveサイトのメニューバーの開閉みたいに、メニューバー以外の場所をクリックしたら 表示されているメニューのカテゴリーが閉じる動作にしたいです。

    • ベストアンサー
    • noname#256090
    • JavaScript
    • 回答数2
  • 「Dialog」と「tabs」併用時の挙動

    jqueryのUIについてです。 Dialogの表示内容をtabsにした場合 場合によっては tabsの1番目のタブがマウスオーバーした時の色で 潰れてしまいます 例(1) Dialogを開く 1番目以外のタブを選択して、Dialogを閉じる 再びDialogを開く 1番目のタブがマウスオーバー色で潰れている 例(2) selected:2などのように 初期タブを指定して、Dialogを開くと 1番目のタブがマウスオーバー色で潰れている 使用テーマはPepper Grinderです 他のテーマなら普通なのかは調べてないですが・・・ tabsのオプションは下記を試しましたがダメでした。 expires: 0, cache:false, 行き詰ってしまいました 改修方法を教えてください。

  • jQueryプラグイン「Skitter」について

    jQueryのプラグイン「Skitter」の表示で、thumbsの表示で質問させてください。 http://thiagosf.net/projects/jquery/skitter/ 表示には「Numbers」「Dots」「thumbs」の3種類あり、「thumbs」でサイト作りをしているのですが、 「Numbers」「Dots」では表示されるlabelが、「thumbs」では表示されず、困っています。 javascriptの設定は下記のようにしています。 <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({thumbs: true, label: true}); }); </script> labelを表示するかしないかで、“label: true”にしているのですが、これでは表示されません。 オプションを見ても、そのあたりの記載が見当たらず、どこを調整すればいいのか分らずにいます。 どなたかご存知の方、いらっしゃいましたらご教授をお願い致します。m(__)m

  • jQueryプラグイン「Skitter」について

    jQueryのプラグイン「Skitter」の表示で、thumbsの表示で質問させてください。 http://thiagosf.net/projects/jquery/skitter/ 表示には「Numbers」「Dots」「thumbs」の3種類あり、「thumbs」でサイト作りをしているのですが、 「Numbers」「Dots」では表示されるlabelが、「thumbs」では表示されず、困っています。 javascriptの設定は下記のようにしています。 <script type="text/javascript"> $(function(){ $('.box_skitter_large').skitter({thumbs: true, label: true}); }); </script> labelを表示するかしないかで、“label: true”にしているのですが、これでは表示されません。 オプションを見ても、そのあたりの記載が見当たらず、どこを調整すればいいのか分らずにいます。 どなたかご存知の方、いらっしゃいましたらご教授をお願い致します。m(__)m

  • 正規表現で半角数字1桁のみを全角数字に変換

    お世話になります。 JavaScript(JSP)で、 正規表現で半角数字1桁のみ（2桁以上は変換しない）を、 全角数字に変換する方法を教えてください。 たとえば、 ”hoge3hoge5”文字列内の、 半角数字1桁のみを、 正規表現で、全角数字1桁に、それぞれ変換 　　↓ ”hoge３hoge５” あわせて、 半角数字が2桁以上、連続で続いている場合には 変換せずに、半角数字のままにしておきたいです。 ”hoge33hoge5” 　　　↓ 正規表現で、半角数字1桁のみを、全角数字1桁に変換 （半角数字2桁以上は変換しない） ”hoge33hoge５” 以上になります。 もしご存じの方がいらっしゃいましたら、 よろしくお願いします。

  • <img>タグを<span>でくくりたい

    Javascript初心者を脱出したい者です。 <img>タグをgetElementsByTagNameで取得し、 <span class="align_left"><img .... /></span> みたいに囲いたいと考えています。 条件として、<img>タグの親ノードは<p>タグです。 全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert nextContent</title> <script type="text/javascript"> <!-- 　　window.onload = function() { 　　　　var out_span = document.createElement('span'); 　　　　out_span.setAttribute('class', 'align_left'); 　　　　var list = document.getElementsByTagName('img'); 　　　　var img = list[0]; 　　　　/*　この後、 　　　　　　どうやって、out_span を挿入すればよいのか？ 　　　　　*/ 　　} //--> </script> </head> <body> <h1> IMGタグに親ノードを追加したい </h1> <p> 文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。 <img src="../images/logo.gif" alt="Logo" /> </p> </body> </html> ★　インデントは全角スペースで行っております。 ご教示お願いします。

  • <img>タグを<span>でくくりたい

    Javascript初心者を脱出したい者です。 <img>タグをgetElementsByTagNameで取得し、 <span class="align_left"><img .... /></span> みたいに囲いたいと考えています。 条件として、<img>タグの親ノードは<p>タグです。 全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert nextContent</title> <script type="text/javascript"> <!-- 　　window.onload = function() { 　　　　var out_span = document.createElement('span'); 　　　　out_span.setAttribute('class', 'align_left'); 　　　　var list = document.getElementsByTagName('img'); 　　　　var img = list[0]; 　　　　/*　この後、 　　　　　　どうやって、out_span を挿入すればよいのか？ 　　　　　*/ 　　} //--> </script> </head> <body> <h1> IMGタグに親ノードを追加したい </h1> <p> 文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。 <img src="../images/logo.gif" alt="Logo" /> </p> </body> </html> ★　インデントは全角スペースで行っております。 ご教示お願いします。

  • <img>タグを<span>でくくりたい

    Javascript初心者を脱出したい者です。 <img>タグをgetElementsByTagNameで取得し、 <span class="align_left"><img .... /></span> みたいに囲いたいと考えています。 条件として、<img>タグの親ノードは<p>タグです。 全くノウハウは知りませんが、以下のような考え方で実現できるのでしょうか？ <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>Insert nextContent</title> <script type="text/javascript"> <!-- 　　window.onload = function() { 　　　　var out_span = document.createElement('span'); 　　　　out_span.setAttribute('class', 'align_left'); 　　　　var list = document.getElementsByTagName('img'); 　　　　var img = list[0]; 　　　　/*　この後、 　　　　　　どうやって、out_span を挿入すればよいのか？ 　　　　　*/ 　　} //--> </script> </head> <body> <h1> IMGタグに親ノードを追加したい </h1> <p> 文ーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーーー。 <img src="../images/logo.gif" alt="Logo" /> </p> </body> </html> ★　インデントは全角スペースで行っております。 ご教示お願いします。

  • gmap　ストリートビュー

    普通の地図とストリートビューを両方表示したいですが。 どうもストリートビューのほうが不具合が生じます。 ストリートビューがない場所に近いところのストリートビューを表示したいですが、どうすればいいですか？ IEで見ると、ストリートビューの方角標識がズレてて、修正方法を教えていただけますでしょうか？ よろしくお願いします。 <script type="text/javascript"> <!-- var map_canvas; function initialize() { var initPos=new google.maps.LatLng(35.658613,139.745525); var mapOptions = { center:initPos, zoom:14, mapTypeId : google.maps.MapTypeId.ROADMAP, streetViewControl: true, mapTypeControl : true, mapTypeControlOptions : { style : google.maps.MapTypeControlStyle.DROPDOWN_MENU } }; map_canvas = new google.maps.Map(document.getElementById("map_canvas"), mapOptions); var request = { address: "千葉県佐倉市ユーカリが丘４-５７５-２２" }; var geocoder = new google.maps.Geocoder(); geocoder.geocode(request, procGeocodeCallback); } function procGeocodeCallback(results,status){ var response; if(status == google.maps.GeocoderStatus.OK){ for (var i = 0; i < results.length; i++){ map_canvas.setCenter(results[i].geometry.location); openInfoWnd(results[i].geometry.location, results[i].formatted_address.replace(/^日本, /, '')); var markerOpts = { position : results[i].geometry.location, map : map_canvas }; var marker = new google.maps.Marker(markerOpts); // ストリートビュー表示 var svp = new google.maps.StreetViewPanorama( document.getElementById("street"), { position : results[i].geometry.location, pov : { heading : 90, // 東 pitch : 20, // 斜め上 zoom : 0.5 // ズームアウト } }); map_canvas.setStreetView(svp); // ストリートビューの方角などを求める function checkSTV(){ var pov = svp.getPov(); var hd = pov.heading; // 方角 var pt = pov.pitch; // 見上げる角度 var zm = pov.zoom; // ズーム alert("方角："+hd+"、角度："+pt+"、ズーム："+zm); } } } } function openInfoWnd(latlng,txt){ if( txt === undefined) { txt =""; } else { txt += "<BR>"; } var info = new google.maps.InfoWindow(); info.setContent("<div id=\"gmap_d\">" + "<span>" + "ユーカリが丘" + "</span>" + txt + "</div>".toString()); info.setPosition(latlng); info.open(map_canvas); } google.maps.event.addDomListener(window,"load",initialize); --> </script> <div id="map_canvas" style="width: 450px; height: 300px; float:left"></div> <div id="street" style="width: 300px; height: 300px; float:left"></div>

  • GoogleMapAPIv3でルート上の座標を取得

    Google maps api v3において、ルート検索をして経路上の座標を取得する方法を探しています。 「右折する」「国道2号線に入る」といった経路上の情報を文章として取る方法は分かったのですが、 座標として取りたいです。 できれば、まっすぐな道でも数100mごとに座標が取れると嬉しいです。 イメージとしては、 http://orchard.ddo.jp/GMAP_ROUTE/index.php なのですが、リンク先はAPIがv2っぽいので使えませんでした。 v3でもできないか調べてみたのですが、分からなかったため質問させて頂きました。 分かる方宜しくお願いします。

活動履歴