- 締切済み
正規表現について教えてください。
正規表現について教えてください。以下は左に配置したサムネイル（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 ====
補足
ご回答ありがとうございます。 ただ残念ながら私の説明不足のせいか回答がまったく意図していることと異なっているようです。 また文字制限があるためコードは不要と思われるところは省いています。 そのせいかもしれません。 質問は記載したページ自体が動作する/しないということではなく、サムネイル自動作成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 以上でもし何かお分かりになればご指摘いただければ幸いです。