人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

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

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

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

1153186846
●拡大する

●質問者: caster777
●カテゴリ:インターネット ウェブ制作
✍キーワード:HTML JavaScript サムネイル ソース マウス
○ 状態 :終了
└ 回答数 : 6/6件

▽最新の回答へ

1 ● snowland
●1ポイント

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

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

◎質問者からの返答

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

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

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


2 ● llusall
●2ポイント

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

<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()" >

  

  

◎質問者からの返答

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

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

<html>

<head>

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

</head>

<body>

</body>

</html>


3 ● Mook
●2ポイント

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

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>

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

◎質問者からの返答

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

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

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

<html>

<head>

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

</head>

<body>

</body>

</html>


4 ● esecua
●1ポイント

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

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

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

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

◎質問者からの返答

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

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

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


5 ● llusall
●34ポイント

再回答ですみません。


<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>

◎質問者からの返答

ありがとうございます。

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

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

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

index.html

11540-m.jpg

11540-b.jpg

preview_templates.js

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

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

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

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

う?む。


1-5件表示/6件
4.前の5件|次5件6.
関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ