下記のページの「SAMPLE」を、サムネイルをクリックすると、選択した画像が真ん中の段の陰付き白枠の中に拡大表示されるようにしたいです。
インラインフレームは使いたくないのでJavaScriptでできないかと思っています。
ちなみに当方はJavaScript初心者です。
白枠はcssで#subcon2というボックスの背景に設定しています。
画像については、サムネイルの画像はs01.jpg、s02.jpg・・・という名前で、拡大表示用の画像はサムネイルの名前からsを取って、01.jpg、02.jpg・・・と、名前を付けて、このhtmlと同じ階層にある「images」フォルダの中の「sample_nail」フォルダに入ってます。
この情報で足りますか?
どのようにすればいいでしょうか?よろしくお願い致します。

http://www.ac.auone-net.jp/~mrs/sample.html

このQ&Aに関連する最新のQ&A

A 回答 (2件)

No1様の回答と方法は同じですが…



イメージが増減したりすることを考えると、onclickを各イメージタグに設定するのも面倒そうなのとHTMLが長くなるので、代表してsubcon3にだけ設定しておくという案です。
ついでながら、サムネイルのイメージ群のwidth、heightはCSSで指定してあるので、HTMLには不要だと思います。省いてしまったほうがHTMLがすっきりするのでは?
<img src="images/sample-nail/s01.jpg" alt="s01" />
<img src="images/sample-nail/s02.jpg" alt="s02" />
<img src="images/sample-nail/s03.jpg" alt="s03" />
 ・・・
みたいに

また、ご提示のurlをOpera8.5で見るとレイアウトが乱れていました。(←よけいなお世話ですが…サムネールとフッターが重なる)

さて、本題ですが、以下の修正をしてみてください。
◆HTMLのsubcon3のdivを以下のように修正
<div id="subcon3" onclick="show(event)">

◆スクリプトを追加(head間にいれるか外部js)
<script type="text/javascript">
<!--
var oImg = new Image(); oImg.style.display='none';
window.onload = function(){document.getElementById('subcon2').appendChild(oImg);}
function show(e){
var iName = null, el, n;
el = e./*@cc_on @if (true) srcElement @else@*/ target /*@end@*/;
if (el.src) {
iName = el.src.match(/s\d+\.jpg$/);
if (iName) {
n = iName.toString();
oImg.src = el.src.replace(n,n.substr(1));
}}
oImg.style.display = iName?'inline':'none';
}
-->
</script>

なお、拡大表示部分のスタイルは、必要に応じて
#subcon2 img{ }
で指定することができます。
    • good
    • 0
この回答へのお礼

できました!
ありがとうございました!

お礼日時:2009/05/17 00:50

できればサムネイル画像のファイル名を"01_s.jpg", "02_s.jpg"...のように変更して頂いた方が処理が楽になるのですが・・・。



サムネイル画像のファイル名を上記のように変更した場合、JavaScriptを以下のように記述します。

[JavaScript]
function showImage(el) {
var imageSrc = el.src.replace(/_s\.jpg$/, ".jpg");
document.getElementById("subcon2").innerHTML = '<img src="' + imageSrc + '">';
}

次にサムネイル画像がクリックされたときに上記のJavaScriptが呼ばれるようにHTMLでサムネイル画像を表示している部分を以下のように変更します。

[HTML]
<img src="images/sample-nail/01_s.jpg" width="110" height="55" alt="s01" onClick="showImage(this);"/>
<img src="images/sample-nail/02_s.jpg" width="110" height="55" alt="s02" onClick="showImage(this);"/>


これが一番簡単な処理かな?と思います。

何か不明な点や不具合があれば、もう一度質問して下さい。
    • good
    • 0
この回答へのお礼

さっそくの回答ありがとうございました!
デザインの乱れもご指摘いただき、ありがとうございました。

お礼日時:2009/05/17 00:51

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

Q添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラ

添付画像のファイルはどんな状態のファイルなのでしょうか?クリってもエラーしか出た事がないのですが

Aベストアンサー

他の回答者様の記入通り、拡張子が無い事には判断出来ません。
また、クリックしてもエラーとありますが、webから探すとか出ませんか?
憶測ですが、多分質問者様のPCにこのファイルを開くアプリケーションが
インストールされていないのではないかな?って思います。
参考までに
よくありがちなのは、XPで作ったエクセルファイル等(逆だったかな^^;)を
ビスタのPCで見ると似たようなアイコンになります。
オフィスの互換パックをインストールすると見れます。

QFlashで表示されたサムネイルをJavaScriptで拡大表示したい

HTMLはある程度わかるようになってきただけのJavaScript初心者なのですが、HP制作の途中、Flashを使っていて分からないことが出てきました。
教えていただけるとうれしいです。

Flashのメニューを使っていて、そのメニューはリンク先がカスタマイズ可能です。
リンク先の指定は、テキストファイルの中に記述されている、
「 &url5=http://www.xxxxx.xxx.xx/& 」という場所で指定することになっています。

フォトギャラリーの写真のサムネイルをメニュー項目にして、Flashメニューでサムネイル選択したいと思っているのですが、そのサムネイルをクリックしたときに、同じページの別のテーブルに、そのサムネイルの大きな画像を表示させるということをしたいのですが、できるのでしょうか。
もしできるのなら、教えてほしいです。

Flashメニューでないサムネイルをクリックして拡大画像を表示ということはJavaScriptでできるのですが、Flashメニューで、となると不可能なのでしょうか。

よろしくお願いいたします。

HTMLはある程度わかるようになってきただけのJavaScript初心者なのですが、HP制作の途中、Flashを使っていて分からないことが出てきました。
教えていただけるとうれしいです。

Flashのメニューを使っていて、そのメニューはリンク先がカスタマイズ可能です。
リンク先の指定は、テキストファイルの中に記述されている、
「 &url5=http://www.xxxxx.xxx.xx/& 」という場所で指定することになっています。

フォトギャラリーの写真のサムネイルをメニュー項目にして、Flashメニューでサムネイル選択した...続きを読む

Aベストアンサー

Flash のヘルプから
fscommand を参照してください。

SWFが含まれたHTMLドキュメント内のJavaScriptの呼び出し方が記述されています。

Q右クリで画像保存が出ない!

画像を取りたくて矢印を画像に置くと!手のマークに代わり!右クリができなくなりました。
どうしたらよいのでしょうか?

Aベストアンサー

最近のサイトでは著作権の問題もあり、勝手に保存ができないように右クリックができないように設定しいるところが多くなっているであります。法律に抵触する場合もあるであります。

方法としては、色々あるでありますが、ただ見えてる画像が欲しいのであれば、プリントスクリーンでPC画面全体をコピーして、ペイントソフトにペースト、余分な部分を削除して保存すればいいと思うであります。

プリントスクリーンはググってほしいであります。

Qサムネイル画像にマウスオーバーすると拡大表示するプログラムについて。

下記のように指定した場所に拡大表示をすることはできます。

http://www.alan1.net/jp/hawaii/oahu/sg/106/ag/5641/

この拡大表示される画像に角度をつけることはできますか?
例えばポラロイド写真のような枠がすこしななめに貼付けてあるような感じにしてあって、そこに画像を拡大表示させたいのです。

できるでしょうか?
よろしくお願い致します。

Aベストアンサー

できません。
どうしてもしたければ、斜めに加工した画像を使ってください。

Q 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思

 友近さんの画像を探しています。本当にいい人で、美人で、セクシーだと思います。着衣・水着・スカート、なんでもOKです(あまり小さいサイズじゃない方がよいです)。どうぞよろしくお願いします。

Aベストアンサー

こちらに数点ありました。
http://bsearch.goo.ne.jp/image.php?UI=web&TAB=web&STYPE=0&CC=1&SCRDEF=0&IMGST=0&IMGSZ=0&IMGC=3&IMGFT=0&IMGFT=1&IMGFT=2&IMGFT=3&MOVPT=0&MOVFT=0&MOVFT=1&MOVFT=2&MOVFT=3&AUDPT=0&NSDP=1&KWDP=1&DC=20&FR=1&SM=mc&OCR=1&SITE=&SITE2=&SITE3=&SITE4=&SITE5=&SITEH=&AUDST=0&AUDMST=0&MOVTHN=0&QGR=1&MOVSC=0&NOJSB=0&QGA=1&NOJS=0&AUDSITE=0&MT=%CD%A7%B6%E1&button=%B2%E8%C1%FC%B8%A1%BA%F7
画像を使用される場合は自己責任でお願いします。

QFlash内のサムネイル画像をクリックするとサイズ指定の別窓で拡大画像を表示

お世話になっております。

Flashでフォトギャラリーを作っています。

http://okwave.jp/kotaeru.php3?q=2243910
で質問させていただいているのですが、別の方法として、
JavaScriptを使用し、Flashの画像をクリックすると、
別ウインドウをサイズ指定で開きさらに画像のサイズを変更し
拡大画像を表示させることはできるのでしょうか?

方法を知っている方いましたら教えて下さい。
宜しくお願いします。

Aベストアンサー

>別ウインドウをサイズ指定で開きさらに画像のサイズを変更し拡大画像を表示させることはできるのでしょうか

t1.htm?h590to/tzzz.jpg 等の情報で t1.htm 呼ぶ

呼ばれた先で 呼び出し元の情報を解析して
document.write('<A href="' + pn_sw + '"><IMG src="' + pn_sw + '" alt="' + pn_sw + '" class="' + pn_ln1 + '">\n');

いろいろの画像があるのでスタイルシートで高さ指定しています

画像の高さ指定している 例 .h590 {border-style:none;height:590px;}

Q●「美人アプリ」の画像を保存したい!

●「美人アプリ」というアプリを使用しています。

●ここで表示される画像を保存したいのですが、方法がわかりません。可能かどうかも。。

●もし、方法をご存知の方がいらっしゃいましたら教えていただけませんか?おねがいします。

Aベストアンサー

保存したい画像を表示させて、↓の方法で画面をキャプチャすると、写真アルバムから見れます。
http://blog.livedoor.jp/sakusakupocky/archives/50263981.html

Qサムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について

お世話になります。
JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。
下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。

記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。

フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか?

■記述1(html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js">
</SCRIPT>
</head>
<body>
<table width="400">
<a href="#" target="_blank">
<img src="http://test.com/img/01.jpg" name="imgSample"></a>
<div>
<div>
<script language="JavaScript" type ="text/javascript" src="http://test.com/01.js">
</script>
</body>
</html>

■記述2(js00)
//画像の名前を配列に代入していきます。
strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg");
function SetPicture(nVal)
{
document.imgSample.src = strPictureName[nVal];
}

■記述3(js01)
//サムネイル画像をオンマウスで拡大表示
img_num="8";
if( img_num == "" ){img_num='5';}
for ( cnt = 1 ; cnt <= img_num ; cnt++ ) {
cnt2 = cnt-1;
document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ;
}

■記述4(js02)

// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://www.yahoo.co.jp/";
jmp[1] = "http://bb.yahoo.co.jp/";
jmp[2] = "http://www.yahoo.co.jp/";
jmp[3] = "http://auctions.yahoo.co.jp/";
jmp[4] = "http://aeu.jp/cs/";
jmp[5] = "http://google.com/";
jmp[6] = "http://google.co.jp/";
jmp[7] = "http://news.yahoo.co.jp/";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "http://test.com/01.jpg";
img[1] = "http://test.com/02.jpg";
img[2] = "http://test.com/03.jpg";
img[3] = "http://test.com/04.jpg";
img[4] = "http://test.com/05.jpg";
img[5] = "http://test.com/06.jpg";
img[6] = "http://test.com/07.jpg";
img[7] = "http://test.com/08.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");


■完成イメージ

  | ̄ ̄ ̄ ̄ ̄ ̄ ̄|
  |  拡大画像  |
  |_______|
  | ̄|| ̄|| ̄|| ̄|
  |_||_||_||_|←サムネイル

・サムネイル画像をオンマウスで拡大画像を表示
・サムネイル画像、拡大画像それぞれに指定リンクを入れる
・可能であればリンクページは target="_blank" で開きたい


以上がご質問内容です。
初心者で大変恐縮ですが、どうぞよろしくお願いいたします。

お世話になります。
JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。
下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。

記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。

フリーソースを応用しようとしすぎて...続きを読む

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
.smlimg{ width:120px; height:80px; }
#bigimg{ width:600px; height:400px; }
#a{ width:600px; height:100px; overflow:auto; }
</style>

<div><img src="" id="bigimg"></div>
<div id="a"><div id="b"></div></div>

<script type="text/javascript">
//@cc_on
var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var jmpurl = 'htp:/test.xxx0.com htp:/test.xxx1.com htp:/test.xxx2.com htp:/test.xxx3.com htp:/test.xxx4.com htp:/test.xxx5.com '.split(' ');
var bufimg = [];

addEvent( window, 'load', init);
addEvent( 'b', 'mouseover', chgimg );
addEvent( document.body, 'click', chgurl );

function init(){
var w=0,r = Math.random()*i|0,image,p;
for(var i in simage){
bufimg[i] = new Image; bufimg[i].src = bimage[i]; image = document.createElement('img');
with( image ){ src = simage[i]; alt = bimage[i];title = jmpurl[i]; className = 'smlimg'; }
p = document.getElementById('b').appendChild( image ); w+=p.offsetWidth;
}
document.getElementById('b').style.width=w+'px'; setbimg( bufimg[r].src, jmpurl[r] );
}
function chgimg( evt ){
var obj = evt.target || evt.srcElement;
if( obj.className && obj.className == 'smlimg') setbimg( obj.alt, obj.title );
}
function chgurl( evt ){
var obj = evt.target || evt.srcElement;
if( obj.className == 'smlimg' || obj.id == 'bigimg' ) window.open( obj.title );
}
function setbimg(s,t){with( document.getElementById('bigimg')){src=alt=s;title=t}}
function addEvent(elementId, evt, eventHandler, flag){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag);
}
</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
.smlimg{ width:120px; height:80px; }
#bigimg{ width:600px; height:400px; }
#a{ width:600px; height:100px; overflow:auto; }
</style>

<div><img src="" id="bigimg"></div>
<div id="a"><div id="b"></div></div>

<script type="text/javascript">
//@cc_on
var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p...続きを読む

Q右クリ禁止のサイトの画像を保存

質問の通りなのですが右クリック禁止のサイトの画像を保存できるようにする方法はないでしょうか?あと、よく海外でおもしろ動画とかを見せてるサイトがありますが、そういった動画を保存する方法はありますか?重ねて質問すいません^^;

Aベストアンサー

そのサイトを見ないとなんとも言えませんが、
JAVAをオフにしてみると右クリック禁止がはずれる事もあります。

それで駄目ならば、プリントスクリーンを取って画像を修正してください。
まぁ画像を持ち出されたくないサイトならばあまり持ち出さないほうがよろしいかと思います。

ちなみに動画を保存する場合は専用のソフトなどが必要。

Q[1-3].jpgを 1jpg 2pg ・・・のようにしたい。

こんにちは。
http://www.aaa.com/xxx[1-3].jpg
というアドレスを
http://www.aaa.com/xxx1.jpg
http://www.aaa.com/xxx2.jpg
http://www.aaa.com/xxx3.jpg
のようにするスクリプトを教えてください。

splitを使用して分解して、[1-3]を取り出して、joinでくっつけて、
document.write()で 
http://www.aaa.com/xxx1.jpg
http://www.aaa.com/xxx2.jpg
http://www.aaa.com/xxx3.jpg

と表示しようと考えたのですが、具体的なスクリプトがわからなくなりました。 上記のようなことをしてくれるフリーのソフトがあるようですが、スクリプトの学習をしようと思いますのでよろしくお願いします。

Aベストアンサー

まず、正規表現の解釈に関してですが、*****で囲まれている内容でほぼ正解です。
但し、注意して頂きたいのは、今回は一致する文字列を切り出して後で使うために使用している表現がある、ということです。
もし、展開部を含む、という条件だけでマッチを行うのならば、
\[ \d+ \- \d+ \]
で十分なことに注意してください。(どこで分けるのかを明確にするためにわざと空白を入れて書きました)
展開部の前、および後の文字列を後から使いたいがために、^(.*)や、(.*)$等の表現を入れているわけです。
それから、()で囲む、ということには、RegExp.$xに代入させて後から使う、という意味がありますが、
グループ化する、という意味はありません。
単に1文字以上の数字、という場合には\d+という表現で十分です。

match()の動作だけを理解するのならば、nullに関して深入りしなくとも理解することができます。
文字列strと正規表現regに対して、str.match(reg)は、
strの中からregで表された表現にマッチする文字列を探し、そのような文字列があればその文字列を、
なければnullという特殊な量を戻り値とする、というように決められています。
従って、
str.match(reg) != null
という式は、regで表された表現がstrの一部にあれば真、なければ偽となります。
(この文はmatch()の戻り値と、nullという量を比較する、という式です)

なぜこのような判定が必要なのか、という話をいたしますと、
RegExp.$xは「最後にマッチしたときの」結果を格納することになっているからです。
従って、my1()を2回以上実行する場合、本当にマッチしたのかをきちんと判定しないと、
2回目は式の書き方がおかしくてマッチしなかったとしても、1回目の結果を使ってURLを書き出してしまう、ということになります。
これを避けるためにマッチしたかどうかを分岐の条件にしています。

また、nullに関してですが、正確に理解するためには、JavaScriptで、文字列がどのように記憶されているのかを知る必要があります。
C等を勉強して、ポインタの概念を理解しておられるなら分かりやすいと思います。
JavaScriptで、変数にオブジェクトを記憶する場合、変数には、記憶するオブジェクトが「メモリ上のどこにあるか」を書き込むことになっています。
例えば、
a = "abc";
とした場合には、メモリ上のどこかに"abc"なる文字列を記憶するStringオブジェクトが作られ、変数aにはその場所が記録されます。
nullというのは、この場所を表す情報の1つで、「どこの場所も表していない」という特別な意味を持ちます。
特に、""とnullは異なる物であることに注意してください。
a = "";
とした場合、aに記憶されているのは空の文字列("")を表すStringオブジェクトの場所です。
従ってa.length()は(""の長さが0なので)0となりますが、
a = null;
とした場合にa.length()を実行しようとするとエラーとなります。
これはaがどの場所も表していないため、その長さを計算する、という操作の対象が存在しないからです。
(厳密にはこの言い方は間違いですが...)

まず、正規表現の解釈に関してですが、*****で囲まれている内容でほぼ正解です。
但し、注意して頂きたいのは、今回は一致する文字列を切り出して後で使うために使用している表現がある、ということです。
もし、展開部を含む、という条件だけでマッチを行うのならば、
\[ \d+ \- \d+ \]
で十分なことに注意してください。(どこで分けるのかを明確にするためにわざと空白を入れて書きました)
展開部の前、および後の文字列を後から使いたいがために、^(.*)や、(.*)$等の表現を入れているわけです。
そ...続きを読む


人気Q&Aランキング

おすすめ情報