1153186846 HTMLとJavascriptに関する質問です。


http://www.templatemonster.com/
に、画像のサムネイルがあるのですが、
その上にマウスを持っていくと、
別窓っぽい領域が立ち上がり、大きめの画像を参照することができます。

ソースを確認したのですが、
いろんなjavascriptが混在しており、
このサムネイルを拡大させるためのものが
どれかわかりませんでした。

詳しい方がいらっしゃれば、ご教授願います。

回答の条件
  • 1人5回まで
  • 登録:2006/07/18 10:40:47
  • 終了:2006/07/19 14:41:38

ベストアンサー

id:Mook No.6

Mook回答回数1313ベストアンサー獲得回数3922006/07/19 01:10:50

ポイント70pt

#3 です。

スクリプトが動くためには動作条件があります。

・<div> の宣言

・画像表示位置のy座標が500以上であること

 (今回はbrで位置を調整しました。)

<html>

<head>

<script src="http://www.templatemonster.com/js/preview_templates.js" language="JavaScript" type="text/javascript"></script>

<script src="http://www.templatemonster.com/js/loader.js" language="JavaScript" type="text/javascript"></script>

<body BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="nbInit()">

<div style="display: none; position: absolute;z-index:110; " id="preview_div"></div>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

  <IMG SRC="http://images.templatemonster.com/screenshots/11500/11540-m.jpg" border=0 border=1

onmouseover="showtrail('http://images.templatemonster.com/screenshots/11500/11540-b.jpg ','Template 11540',430,430);"

onmouseout="hidetrail();">

</body>

</html>

で試してみてください(動作確認済み)。

ソースにもCopyright が残っていましたが、出展は

http://www.javascriptkit.com

のようです。

非常に参考になるサンプルが多くあるので、一度見てみてはどうでしょうか。

id:caster777

動作しました!

なんと、場所に問題があったのですね!

ありがとうございました。

2006/07/19 14:40:26

その他の回答(5件)

id:snowland No.1

snowland回答回数168ベストアンサー獲得回数42006/07/18 10:59:35

ポイント1pt

http://www.templatemonster.com//js/preview_templates.js

上記のjsファイル内のshowtrail()、とfunction hidetrail()を利用していますね。

id:caster777

それは、すぐにわかったのですが、

そのファイルを読み込んで、

HTMLの同箇所だけをかいてもうまく動きませんでした。

2006/07/18 22:50:08
id:llusall No.2

llusall回答回数505ベストアンサー獲得回数612006/07/18 11:00:56

ポイント2pt

// ここのタグで外部スクリプトを取り込んでいます。

<script src="/js/preview_templates.js" language="JavaScript" type="text/javascript"></script>


// ※こちらのファイルを取り込んでいます。

// http://www.templatemonster.com/js/preview_templates.js



// このような、IMGタグにて、preview_templates.js に定義されている、showtrail関数にて、ポップアップ表示をしています。

// また、hidetrail関数にて、ポップアップ非表示にしています。


<IMG SRC="http://xxxx.jpg

  onmouseover="showtrail('http://zzzz.jpg ','Template 11505',430,488)"   onmouseout="hidetrail()" >

  

  

id:caster777

実際に試しましたが、うまくいきませんでした。

---------------------------------------------

<html>

<head>

<script src="http://www.templatemonster.com/js/preview_templates.js" language="JavaScript" type="text/javascript"></script>

</head>

<body>

</body>

</html>

2006/07/18 22:55:04
id:Mook No.3

Mook回答回数1313ベストアンサー獲得回数3922006/07/18 11:28:23

ポイント2pt

マウスが画像上に乗ったときと、

  onmouseover="showtrail('http://images... 省略 ...','Template 11537',430,449)"

外れたとき

  onmouseout="hidetrail()"

に対するアクションとして記述されています。


showtrail 関数は、

  http://www.templatemonster.com/js/preview_templates.js

の中で定義されており、これは先頭部分で、

  <script src="/js/preview_templates.js" language="JavaScript" type="text/javascript"></script>

として、読み込まれています。

id:caster777

2番の回答と同じですね。

試しましたが、うまく動きませんでした。

---------------------------------------------

<html>

<head>

<script src="http://www.templatemonster.com/js/preview_templates.js" language="JavaScript" type="text/javascript"></script>

</head>

<body>

</body>

</html>

2006/07/18 22:57:09
id:esecua No.4

esecua回答回数510ベストアンサー獲得回数102006/07/18 13:59:09

ポイント1pt

Ajax(Javascript)でも可能ですが、ブラウザ設定によってはできない場合もあります。

CSSを使用すればJSが切ってあってもアクション可能なのです

以下にデモやソースがあるので試されてみてはいかがでしょうか。

http://www.dynamicdrive.com/style/csslibrary/item/css-popup-imag...

id:caster777

まずは、Javascriptで動くようにしたいです。

デモサイトも興味あるのですが、マウスを動かしても、大きな画像は動かず。。。

これが結構こだわりだったりするのです。

2006/07/18 22:58:37
id:llusall No.5

llusall回答回数505ベストアンサー獲得回数612006/07/19 00:06:41

ポイント34pt

再回答ですみません。


<div style="display: none; position: absolute;z-index:110;" id="preview_div"></div>

を追加してください。


preview_templates.js は、ローカルや自サイトにしてみてください。

("preview_templates.js" や "/js/preview_templates.js" にする。)


---------------------------------------------------------

<html>

<head>

<script src="preview_templates.js" language="JavaScript" type="text/javascript"></script>

</head>

<body>

<IMG SRC="11540-m.jpg" border=0 border=1 style="border-color: 777777" onmouseover="showtrail('11540-b.jpg ','Template 11540',430,430)" onmouseout="hidetrail()">

<div style="display: none; position: absolute;z-index:110;" id="preview_div"></div>

</body>

</html>

id:caster777

ありがとうございます。

回答の上限を変更しましたので、新たな回答があれば、お願いします。

上記のソースをindex.htmlとして保存して、

あるウェブサイト上のディレクトリに

index.html

11540-m.jpg

11540-b.jpg

preview_templates.js

を同じディレクトリ内に保存し、IE6で開きましたが、

サムネイルのみの表示で、大きい画像は開きませんでした。

ただ、スクリプトエラーの表示は出なくなりました。

かなり惜しい感じかなと思うのですが、

う~む。

2006/07/19 14:38:26
id:Mook No.6

Mook回答回数1313ベストアンサー獲得回数3922006/07/19 01:10:50ここでベストアンサー

ポイント70pt

#3 です。

スクリプトが動くためには動作条件があります。

・<div> の宣言

・画像表示位置のy座標が500以上であること

 (今回はbrで位置を調整しました。)

<html>

<head>

<script src="http://www.templatemonster.com/js/preview_templates.js" language="JavaScript" type="text/javascript"></script>

<script src="http://www.templatemonster.com/js/loader.js" language="JavaScript" type="text/javascript"></script>

<body BGCOLOR=#FFFFFF LEFTMARGIN=0 TOPMARGIN=0 MARGINWIDTH=0 MARGINHEIGHT=0 onload="nbInit()">

<div style="display: none; position: absolute;z-index:110; " id="preview_div"></div>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

  <br><br><br><br><br><br><br><br>

  <IMG SRC="http://images.templatemonster.com/screenshots/11500/11540-m.jpg" border=0 border=1

onmouseover="showtrail('http://images.templatemonster.com/screenshots/11500/11540-b.jpg ','Template 11540',430,430);"

onmouseout="hidetrail();">

</body>

</html>

で試してみてください(動作確認済み)。

ソースにもCopyright が残っていましたが、出展は

http://www.javascriptkit.com

のようです。

非常に参考になるサンプルが多くあるので、一度見てみてはどうでしょうか。

id:caster777

動作しました!

なんと、場所に問題があったのですね!

ありがとうございました。

2006/07/19 14:40:26
  • id:Mook
    ほぼ、llusall さんと同じ解析結果をたどっており、しかもいつも後手でしたが(^^;; 、いるか賞ありがとうございました。回答の励みになります。


    お役に立てたようで、何よりですが、少し正確ではなかったのでちょっとだけ訂正です。


    preview_templates.js の show 関数で、ブラウザの判定処理の条件の末尾に
      (docwidth>650 && docheight>500))
    というのがあり、高さと幅を判定しているようですが、画像の表示位置というよりは使用領域のようです。


    なので、この部分を変更しても、表示させることはできます。
    (上がはみ出てしまったりしますが。)


    蛇足ですが、ご参考まで。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません