- 締切済み
正規表現について教えてください。
正規表現について教えてください。以下は左に配置したサムネイル（X01s、X01as、X01bs・・・）をクリックすると右にそのサムネイルの拡大画像（X01l、X01al、X01bl・・・）を表示するページです。 サムネイルのimgタグを▼以下のようにしたいと考えています。 ※makethumbnail.cgiはサムネイル作成CGI 現在：<img src="X01s.jpg"> 変更後：<img src="/makethumbnail?src=X01s.jpg&w=100&h=&type="> ▼以下はダメでした。正規表現に問題があるのでしょうか。 <img src="/makethumbnail.cgi?src=' + img + 's' + ext + '&w=100&h=&type=" class="thumbnail" onclick="changeImage(this)"> お知恵をお借りできれば幸いです。 <head> <script type="text/javascript"> location.search.match(/^\?img=([^&]+)(\.[^&\.]+)&num=(.+)$/); var img = RegExp.$1; var ext = RegExp.$2; var num = Number(RegExp.$3); function changeImage(img){ var imgsrc = img.src || img; imgsrc.match(/^(.*)s(\.[^\.]+)$/); document.main.src = RegExp.$1 + "l" + RegExp.$2; return false; } document.write = img && ext && num ? document.write : function(){}; </script> </head> <body> <table> <tr> <th> <script type="text/javascript"> /* サムネイル */ document.write('<a href="#"><img src="' + img + 's' + ext + '" class="thumbnail" onclick="changeImage(this)"></a><br /><br />'); for (var i = 1; i < num; i++) { document.write('<a href="#"><img src="' + img + String.fromCharCode(0x60 + i) + 's' + ext + '" class="thumbnail" onclick="changeImage(this)"></a><br><br>'); } </script> </td> <td> <script type="text/javascript"> /* 拡大 */ document.write('<img src="' + img + 'l' + ext + '" name="main" id="main_image" />'); </script> </td> </tr></table>
- toutetsu
- お礼率35% (25/71)
- JavaScript
- 回答数1
- ありがとう数0
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- irija_bari
- ベストアンサー率73% (70/95)
正規表現は使っていませんが。。。というか正規表現を使う必要がないと思います。 私なら以下のように記述します。 デバッグしていませんのでミスがあるかと思います。 また、<img>タグの属性なども付けていませんのできちんと付けるべきでしょう。 ==== javascript - HEADER ==== function changeImage(img){ if(img==0){ large_image.src = "X01l.jpg"; }else{ large_image.src = "X01" + String.fromCharCode(0x60 + img) + "s.jpg"; } } ==== end of javascript - HEADER ==== ==== javascript - thumbnail ==== for(var i=0; i<num; i++){ if(i==0){ document.write('<a href="javascript:changeImage(' + i + ')"><img src="X01s.jpg"></a><br>'); }else{ document.write('<a href="javascript:changeImage(' + i + ')"><img src="X01' + String.fromCharCode(0x60 + i) + 's.jpg"></a><br>'); } } ==== end of javascript - thumbnail ==== ==== HTML - Large Image ==== <img name="large_image" src="X01l.jpg"> ==== end of HTML - Large Image ====
関連するQ&A
- 一つのページで二つ動かすのはできないですか
画像を次々に変えていくJavaScriptを一つのページで2個使いたいのですが、二つ使うと、表示されません。これでは無理なのでしょうか？ 無理だったら、他に何かいい方法があれば教えてください。 これを使いました。よろしくお願いします。 <HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- num = 18; nme = "img" exp = "gif" cnt = 0; function changeImage() { cnt++; cnt %= num; document.img.src = nme + cnt + "." + exp; } //--> </SCRIPT> </HEAD> <BODY bgcolor="#ffffff" onLoad="setInterval('changeImage()',500)"> <BR><BR> <IMG src="img1.gif" name="img" border="0"> </BODY> </HTML>
- ベストアンサー
- JavaScript
- 画像を変えるスクリプト
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- img=new Array(); for(i=1;i<=4;i++){ img[i]=new Image(); img[i].src="img"+i+".gif"; } function changeImage(i,j){ document.images[i].src=img[j].src; } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。 質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？ 普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような 感じです。
- ベストアンサー
- JavaScript
- 画像を貼り出してその後、その画像をクリックすると大きく表示されるように
画像を貼り出してその後、その画像をクリックすると大きく表示されるようにしたいのですが、どうしたら良いかわかりません。 <html> <head> <title>画像を大きくする</title> <script type="text/javascript"> <!-- var imagetachi = 5; //イメージの切り替え function kirikae(num){ document.main.src = "big/photo" + num + ".jpg"; } // --> </script> </head> <body> <center> <script type="text/javascript"> <!-- //サムネールの書き出し for (i=1; i <=imagetachi; i++) { document.write('<img src="small/photo' + i + '.jpg" onclick="kirikae(i)">'); } // --> </script> <hr> <img src="big/photo1.jpg" name="main"> </center> </body> </html> どうやらkirikae(i)をkirikae(' + i +')にすれば良いとまではわかったのですが、なぜ(' + i +')にしないといけないのかがわかりません。 (' + i +')にすると関数の処理が document.main.src = "big/photo" + + i + + ".jpg";になってしまいませんか？？ 初心者なので+ i +の意味がよくわかりません。 よろしくお願い致します。
- 締切済み
- JavaScript
- 正規表現（～を含まないものにマッチ）
Perlの正規表現について質問です。 画像<img src="http://hogehoge.com/img/gokuu.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="http://hogehoge.com/img/pikkoro.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="http://hogehoge.com/img/bejiita.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="http://hogehoge.com/img/gohan.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="http://hogehoge.com/img/buruma.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> ↓ 処理後 ↓ 画像<img src="gazo_new1.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="gazo_new2.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="gazo_new3.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="gazo_new4.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> 画像<img src="gazo_new5.jpg" border=0><a href="http://hogehoge.com/">hogehoge</a><br> （変更した画像：gokuu.jpg,pikkoro.jpg,bejiita.jpg,gohan.jpg,buruma.jpg,） 以上のように 画像URL部分のみを gazo_new(連番).jpg に変更させ、 変更前の画像URL一覧を表示させるスクリプトを書いてみました。 $htmldata にHTMLの全データが格納されているとします。 $i=1; while($htmldata=~/(<\s*img.*?src.*?=["\s]*)([.\/]*?\/)?((?:(?!gazo_new)[^"\s>])*)?["\s]?.*?>/i){ $imgurlparts .="$3,"; $htmldata=~ s/(<\s*img.*?src.*?=["\s]*)((?:(?!gazo_new)[^"\s>])*)?(["\s]?.*?>)/$1gazo_new$i.jpg$3/i; $i++; } $htmldata .="（変更した画像：$imgurlparts）"; どうにもうまく動きません。 何卒ご教示をお願い致します。
- ベストアンサー
- Perl
- オンマウスでの拡大画像の位置指定
サムネイル画像にオンマウスした時の拡大画像の位置指定がよくわかりません。今の状態だとマウスを乗せた時に拡大画像がサムネイル画像とかぶってしまい、他のサムネイルが隠れてしまいます。できたら、拡大画像をサムネイル画像かぶらせず、左側に表示させたいのですがどう指定したらよいのでしょうか？ついでに拡大画像を右側、上、下に指定したい時の表示方法もあわせてアドバイスいただけたらありがたいです。 それと、サムネイル画像の下にちょっとしたコメントを記載したい時はどうしたら良いのでしょうか？どうかよろしくお願いします。 <script> var src1="image01.jpg" var src2="image1.jpg" var src3="image02.jpg" var src4="image2.jpg" var src5="image03.jpg" var src6="image3.jpg" var src7="image04.jpg" var src8="image4.jpg" </script> <p align="center"> <img src="image01.jpg" onmouseover="this.src=src2" onmouseout="this.src=src1"> <br> <br> <img src="image02.jpg" onmouseover="this.src=src4" onmouseout="this.src=src3"> <br> <br> <img src="image03.jpg" onmouseover="this.src=src6" onmouseout="this.src=src5"> <br> <br> <img src="image04.jpg" onmouseover="this.src=src8" onmouseout="this.src=src7"> <br> </p>
- 締切済み
- CSS
- javascript について追加の質問
質問NO6591909＝3/14 10：59の追加の質問です。 素晴らしい回答で非常に感謝いたしますが、追加でもう一つお願いします。あと一息といったところです。最後の部分なのですが、 function pd1() { if(flag) document.getElementById('ID1').style.visibility = "hidden"; else document.getElementById('ID1').style.visibility = "visible"; var img = document.getElementById('s1').getElementsByTagName("img"); img[0].src = "別の画像のURL" flag = !flag; } function fx(){ var num = location.search.substr(1,1); var the_id = "ID" + num.toString(); var the_id2 = "s" + num.toString(); document.getElementById(the_id).style.visibility = "visible"; var img = document.getElementById(the_id2).getElementsByTagName("img"); img[0].src = "別の画像のURL" } この3行上の"別の画像のURL"とありますが、上記ですと決まった一枚の画像しか表示できないということになりますよね？ IDは9つありまして、9つ別々の画像をそれぞれ選択できるようにしたいのですが、その点を考慮するとどのような文になりますでしょうか？（function fx()を9つ別々に書くんでしょうか？・・・・・・）よろしくお願いいたします。 因みにここからhtml↓（さっきも書きましたが、また書いておきます。） <div id= "w1" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <a href="javascript:pd1()">テキスト</a></div> <div id="ID1" style="visibility: hidden;" onMouseover="document.s1img.src='img/s1rr.gif'" onMouseout="document.s1img.src='img/s1w.gif'"> <p>テキスト<br /> </div> <div id="s1"><img src="img/s1w.gif" width="29" height="39" name="s1img"/></div>
- ベストアンサー
- JavaScript
- JavascriptからJavaへの変え方
Javascriptで作ったものをJavaにしないといけなくなったのですが 私はJava初心者でまったくわかりません。 色々ネットで調べてみたのですが、どうも難しくて理解することができませんでした。 下にJavascriptで作ったものを載せてるのですがどなたかやり方を教えてもらえないでしょうか？ <html> <head> <title>サンプル</title> <script type="text/javascript"> function jikoku() { dd = new Date(); document.F1.T1.value = dd.toLocaleString(); window.setTimeout("jikoku()", 1000); } </script> <script type="text/javascript"> mes = new Array(5); mes[0]="0"; mes[1]="1"; mes[2]="2"; mes[3]="3"; mes[4]="4"; date=(new Date()).getHours(); if( 0 <= date && date <= 5 ){ document.write(mes[0]); } else if( 6 <= date && date <= 10 ){ document.write(mes[1]); } else if( 11 <= date && date <= 16 ){ document.write(mes[2]); } else if( 17 <= date && date <= 19 ){ document.write(mes[3]); } else{ document.write(mes[4]); } </script> <script type="text/javascript"> function Random() { var kazu = Math.random(); kazu = kazu*100; kazu = Math.ceil(kazu); if( kazu<=9 ) document.write('<br/>○1<br/>'); else if( kazu<=19 ) document.write('<br/>○2<br/>'); else if( kazu<=29 ) document.write('<br/>○3<br/>'); else if( kazu<=39 ) document.write('<br/>○4<br/>'); else if( kazu<=49 ) document.write('<br/>○5<br/>'); else if( kazu<=59 ) document.write('<br/>○6<br/>'); else if( kazu<=69 ) document.write('<br/>○7<br/>'); else if( kazu<=79 ) document.write('<br/>○8<br/>'); else if( kazu<=89 ) document.write('<br/>○9<br/>'); else document.write('<br/>○10<br/>'); } Random() </script> <script language="JavaScript"> var imglist = new Array( "sample1.jpg", "sample2.jpg", "sample3.jpg", "sample4.jpg" ); var selectnum = Math.floor((Math.random() * 100)) % imglist.length; var output = "<img src=" + imglist[selectnum] + ">"; document.write(output); </script> </head> </html>
- 締切済み
- Java
- テーブルとテーブルの間の隙間
以下の様なHTMLでIE６で表示した場合、●Aと●Bの間に、微妙な隙間が入ってしまいます。 どうやっても隙間が無くなりません。 ●Aの部分には、画像がランダムに表示されるようなスクリプトを記述していますが、 そのスクリプトを削除したら、ちゃんと隙間が無くなるのです(^^;) これって方法はありますか？どうにかランダムに表示させたいので、アドバイス下さい。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <script language="javascript" src="../js/top.js"></script> </HEAD> <BODY topmargin="0"> <DIV align="center"> <TABLE border="0" cellspacing="0" cellpadding="0"> <TBODY> ●A <TR> <TD width="800"><SCRIPT LANGUAGE="JavaScript">random_img2()</SCRIPT> <noscript><IMG src="../img/1.jpg" alt="" width="800" height="300"></noscript></TD> </TR> ●B <TR> <TD width="800"><A href="../index.html">HOME</A> >> TEST</TD> </TR> </TBODY> </TABLE> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ※実際のHTMLには●Aと●Bという文字は入っておりません。 以下はtop.jsで記述している内容です。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ function random_img1(num1,num2) { if((num1 - num2) > 0) { var big = num1 var small = num2 } else { var big = num2 var small = num1 } var range = big - small + 1 var number = Math.floor(Math.random()*range) + small return(number) } function random_img2() { var img_src = "../img/" + random_img1(1,3) + ".jpg" document.write("<IMG SRC='" + img_src + "'>") } ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
- ベストアンサー
- HTML
- なぜ「ページでエラーが発生しました。」？
字数が限られているので、「なぜエラーなのですか？」 -----ここからhead区間 <!--JavaScript Function window.onerror = null; var ver4 = (navigator.appVersion.charAt(0) >= "4"); var NN4 = ver4 && (navigator.appName.charAt(0) == "N"); var IE4 = ver4 && (navigator.appName.charAt(0) == "M"); var NN3 = ((navigator.appVersion.charAt(0) == "3") && (navigator.appName.charAt(0) == "N")); if(NN3 || NN4 || IE4){ var img_b = new Array(); img_b[0] = new Image(); img_b[0].src = "kbw.jpg" img_b[1] = new Image(); img_b[1].src = "ao.jpg" img_b[2] = new Image(); img_b[2].src = "bcw.jpg" img_b[3] = new Image(); img_b[3].src = "sm.gif" } function B_in(nam,num){ if(NN3 || NN4 || IE4) document.images[nam].src = img_b[num].src; } function B_out(nam,num){ if(NN3 || NN4 || IE4) document.images[nam].src = img_b[num].src; return false; } // END ---> </SCRIPT> </head> -----ここからbody <BODY onLoad="time(0)"> <SCRIPT LANGUAGE="JavaScript"> <!--- ここから表示 document.write(TodayIMG(0)); //end ---> </SCRIPT>
- ベストアンサー
- JavaScript
- 作成画面の一番下に「・」？
今ＨＴＭＬとＪＡＶＡＳＣＲＩＰＴの勉強をしています。 下記のプログラムを作りましたが画面表示すると一番下に「・」が表示されてしまいます。これはこういうものなんでしょうか？それとも消す方法あるいはプログラミング改良の方法があるのでしょうか？ 下記にプログラムを示します。 <HTML> <HEAD> <TITLE>Java Script</TITLE> </HEAD> <BODY> <SCRIPT LANGUAGE="JavaScript"> var t=new Date(); var h=t.getHours(); document.write("<DIV ALIGN=right>",t,"</DIV><BR>"); document.write("<CENTER>"); if (8<h && h<12){ document.write("<H2>おはよう</H2>"); document.write("<IMG SRC='***.jpg'>"); } if (12<=h && h<=14){ document.write("<H2>こんにちは</H2>"); document.write("<IMG SRC='***.jpg'>"); } if (h<8 || 14<h){ document.write("<H2>こんばんは</H2>"); document.write("<IMG SRC='***.jpg'>"); } document.write("</CENTER>"); </SCRIPT> </BODY> </HTML>
- ベストアンサー
- JavaScript
補足
ご回答ありがとうございます。 ただ残念ながら私の説明不足のせいか回答がまったく意図していることと異なっているようです。 また文字制限があるためコードは不要と思われるところは省いています。 そのせいかもしれません。 質問は記載したページ自体が動作する/しないということではなく、サムネイル自動作成CGI（makethumbnail.cgi）を追加してサムネイルのimgタグを▼以下のようにしたいということです。 ページ自体は問題なく動作していますのでmakethumbnail.cgiを追加するにはどうすればよいかということだけです。 ※X01sは仮に入れています。 ※makethumbnail.cgiは以下のようにmakethumbnail.cgiのあとに画像のURLをサイズを記載することでImageMagicを利用して画像を小さくします。 現在：<img src="X01s.jpg"> 変更後：<img src="/makethumbnail.cgi?src=X01s.jpg&w=100&h=&type="> 記載のページは、あるページ（ページXとします）である画像（画像Aとします）をクリックすると新しいウインドウを開き、画像Aを様々な角度から撮ったものをサムネイルと拡大画像で見せるものです。 正規表現を用いているのは画像Aの名前がX01だったり、A02だったり、B04だったりするからです。 ただ画像Aにはルールがあり、X01のサムネイルはX01s、拡大画像は：X01l、角度の異なる拡大写真はX01al、X01bl、X01clというようにアルファベットで連番となっています。 記載のページとスクリプトは▼以前にこちらで質問したときに回答をいただいたものです。 http://oshiete1.goo.ne.jp/qa1618358.html 以上でもし何かお分かりになればご指摘いただければ幸いです。