マウスオーバした部分の画像を隣に拡大して表示させたいと思っています。

質問

マウスオーバした部分の画像を隣に拡大して表示させたいと思っています。
下記URLでやっている動作そのものなのですが、実際にこのソースを使ってみたところ、文字化けしてしまう上、うまく動作しません(Ajaxのソースのようです)。
できればJavascriptを使ってやりたいのですが。。。
初心者です。
よろしくお願いいたします。

参考：http://f32.aaa.livedoor.jp/~azusa/exp3.php?f=include/ajax/jquery_plugin_zoom/jqzoom.inc&ttl=%E8%A8%AD%E7%BD%AE%E3%82%B5%E3%83%B3%E3%83%97%E3%83%AB

回答No.2

mtaka2 · ベストアンサー

参考に挙げてるページでは、「jQuery」というJavaScriptライブラリと、
「jQZoom」という「マウス部分を拡大表示」するjQuery用プラグインを使っています。
(jQueryはAjaxも出来るライブラリですが、この例ではAjaxは使っていません。)

参考のコードでは
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="lib/jquery/jquery.jqzoom.js"></script>
の部分が、jQueryおよびjQZoomの読み込み指定部です。
jQueryは絶対URLで指定していますが、jQZoomは相対で指定していますので、このHTMLファイルだけを作っても動作しません。
jQZoomを質問者さんの環境でも用意する必要があります。

http://www.mind-projects.it/projects/jqzoom/
からダウンロードし、それを展開したJavaScriptファイル(jquery.jqzoom.js)を、<script …>で読み込むようにしてください。
(scriptタグで指定するパスは適宜変更してください。htmlと同じファイルにjquery.jqzoom.jsを置くのなら、
<script type="text/javascript" src="jquery.jqzoom.js"></script>
になります)

お礼

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

回答No.1

藤田 朋郎（@hujitomo）

参考 URL の通りに作成するのが一番簡単で確実。
文字化けするのはおそらく（つか確実に）文字コードが間違っているだけでしょう。
サンプルのソースは UTF-8 で保存することを前提に書かれておりますので、キチンと UTF-8 で HTML ファイルを作成すれば問題なく動作するはずです。
もしもユニコードでの保存ができないアプリケーションで HTML ファイルの作成をしているならば、サンプルソースの『 charset=utf-8 』の箇所を、任意の文字コードに変更してください（例：『 charset=Shift_JIS 』）

＞できればJavascriptを使ってやりたいのですが。。。
Ajax はそもそも JavaScript で動いているって事を理解されてます？

お礼

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