プロが教えるわが家の防犯対策術!

javascriptを使って日替わりで
なんとか画像を表示する事ができましたが
その画像をclickしたら拡大させるにはどうしたらいいのでしょうか
調べても日替わり画像までしかなくて
困ってます
ご存知の方
教えてください。
phpや別の言語を使うのでしょうか
<script type="text/javascript" language="javascript">
<!--
d=new Date();
date=d.getDate();
document.open();
document.write('<td width="230" height="219" bordercolor="#003333"><img src="img/himekuri/');
document.write(date);
document.write('.jpg" alt="今日のカレンダー" width="230" height="219"></td>');
document.close();
// -->
</script>
今現在の内容です

A 回答 (4件)

document.close()が抜けてました・・・



別ウィンドウで画像を表示する関数で、「winImg.document.close();」を追加してくださいorz

この回答への補足

HIRSYUさん
すみません
PC触れないアナログ人間のスタートで、WEBの社会人スクールに通いようやく1年のスキルです。やっとのこさWEBデザインの会社に入りました。それで営業さんのミスでこのポップアップ画像の仕事をすることになったんです。ボタンで丸く収まりましたが。
できないのが悔しく、何度かHIRSYUさんの教えてくださったので試したのですが
難しくて分かりません><
今度は画像がでてきません。
なんか私は大きな勘違いをしてるのでしょうか

<script type="text/javascript" language="javascript">
<!--
d=new Date();
date=d.getDate();
function openImage(<img src="img/himekuri/.jpg" width="200" height="185")
{var op = "scrollbars=no,resizable=no,width=" + 430 + ",height=" + 430
var winImg = window.open("", "ImageWindow", op);
winImg.document.write("<img src=\""+ img src="img/himekuri2/.jpg" + "\" width=\"" + 401 + "\" height=\"" + 371 + "\" style=\"position:absolute;top:0px;left:0px;\">");
}
winImg.document.close();
// -->
</script>

補足日時:2008/02/17 01:10
    • good
    • 0
この回答へのお礼

遅くなりました。
すみません
結局この仕事はボタンになってしまいました
また別の仕事で(メールフォーム)全然、この日替わり画像の試作ができませんでした><
HIRSYUさんはなんでもパッと答えれるのですね
実はいろんな人や掲示板に聞きました
調べました
答えがなかったです
自分のスキル(検索能力)と意外と皆知らなくがっかりでした
書いてくださったことに
ほんとうに感謝します。
まだ試せてないのですがprintさせていただきました。
できましたら
また報告させてください。
ほんとうにありがとうございます

お礼日時:2008/02/16 01:34

失礼しました。



タイトルの「画像ポップアップ」が、完全に頭から抜けてました(--;

// 別ウィンドウで画像を表示する関数
// 引数で拡大用の画像、画像の幅、画像の高さを指定します
function openImage(imgPath, imgWidth, imgHeight)
{
// ウィンドウのオプション設定(私の好みで設定してます)
var op = "scrollbars=no,resizable=no,width=" + imgWidth + ",height=" + imgHeight

// 新しいウィンドウを開く
 var winImg = window.open("", "ImageWindow", op);

// 開いたウィンドウに画像を表示する(スタイルの設定で、bodyのmarginを無視できるようにしてます)
 winImg.document.write("<img src=\""+ imgPath + "\" width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" style=\"position:absolute;top:0px;left:0px;\">");
}

後は↑の関数をonclickで呼ぶようにしてください
    • good
    • 0

別のイメージに置き換えるには、



画像のクリックで拡大ってことなので、imgタグにonclickで拡大用の関数を呼ぶ。(引数で自身も渡す)
document.write('.jpg" alt="今日のカレンダー" width="230" height="219" onclick="change(this);"></td>');

で、拡大用の関数は、受け取ったイメージタグのsrcとwidthとheightを拡大用の値に上書きする。
function change(obj){
obj.src = "拡大用の画像のパス";
obj.width = 460;
obj.height = 438;
}
    • good
    • 0
この回答へのお礼

ありがとうございます><
うーーん
いろいろ試してます
素人には難しいです。
もっと勉強しないと
HIRSYUさんの言わんとしてることがつかめないです
拡大はされるのですが別ウィンドウで開かないです
別ウィンドウが日代わりに設定がならないです
難儀です

d=new Date();
date=d.getDate();
document.open();
document.write('<td width="220" height="220" bordercolor="#003333" bgcolor="#FFFFFF"><img src="img/himekuri/');
document.write(date);
document.write('.jpg" alt="今日のカレンダー" width="220" height="220" onclick="change(this);" target="_blank"></td>');
function change(obj){
obj.src = "img/himekuri_zoom.jpg/";
obj.width = 460;
obj.height = 438;
}
document.close();

お礼日時:2008/02/04 23:51

どのような拡大をしたいのですか?



1.表示中のイメージタグのwidth/heightを大きくする
2.拡大用の別イメージに置き換える
3.画像エディタのような拡大処理を行う

1.2.はJavaScriptで可能ですが、3.に関してはサーバー側になります。

この回答への補足

HIRYUさん
ありがとうございます。
2番の別の拡大画像に置き換えたいのです。

補足日時:2008/01/29 23:43
    • good
    • 0

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