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

css、javascriptの修正方法が分かる方教えて下さい。http://www.rakuten.ne.jp/gold/boutsuton/629/629.htmlのページのように、カーソルを移動させると右上に拡大表示され、更にクリックすると元画像の拡大画像が表示されるというものが現段階のページです。これを、1.右上に拡大表示されるものを左上に(画像にかぶせる形で)表示させたい、2.カーソル移動させると元画像が薄く四角で囲まれますが、その幅・高さと拡大表示される方も幅・高さを変更させたい、3.クリックして拡大表示をさせた時、元画像とは異なった画像を表示させることは可能なのでしょうか?? 以上3点のご回答を何とぞ御願い致します。

●質問者: ameri1u1
●カテゴリ:インターネット ウェブ制作
✍キーワード:CSS JavaScript カーソル クリック 画像
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● ぱこち
●35ポイント ベストアンサー

お使いのスクリプトは Magic Zoom Plus かと思われますが、バージョンがとても古いようで、 Firefox や Chrome などでの動作がいまいちでした。

最新版にすることを強くお勧めします。

参考までに、ライセンスは非商用・個人利用に限りフリーで、その他はお金を払う形態みたいです。


以下、最新版という前提で回答します。


>1.右上に拡大表示されるものを左上に(画像にかぶせる形で)表示させたい

あらかじめ zoom1-big という id の DIV 要素を左上に配置して、zoom1 の rel 属性に「zoom-position: custom;」と記述する事で、表示できます。


>2.カーソル移動させると元画像が薄く四角で囲まれますが、その幅・高さと拡大表示される方も幅・高さを変更させたい

同じく zoom1 の rel 属性に、「zoom-width: 60; zoom-height: 40;」といった風に好きなサイズを記述する事で、変更できます。


>3.クリックして拡大表示をさせた時、元画像とは異なった画像を表示させることは可能なのでしょうか??

「Hotspots advanced」という機能で、画像全体をホットスポットにすれば、可能です。


全部まとめると、こんな感じです。

<div id="zoom1-big" style="position: absolute;"></div>
<a href="topimage.jpg" class="MagicZoom MagicThumb" id="zoom1" title=""
 rel="zoom-width: 60; zoom-height: 40; zoom-position: custom; hotspots: zoom2;">
<img src="topimage.jpg" name="tempImage" width="450" height="338" class="img_sub" />
</a>

<div id="zoom2" class="MagicHotspots">
<a href="topimage2.jpg(別の画像)" coords="0, 0, 450, 338" title="" rel="" class="MagicThumb"></a>
</div>

Magic Zoom Plus v2.0.8 DEMO で、動作確認をしました。

ちなみに、現在使われているバージョンでも、IE に限り、1 と 2 の変更は可能のようです。

◎質問者からの返答

pacochi様

ご回答頂きまして誠に有り難うございました。

このMagicZoomPlusの最新版をダウンロードしてCSSとjavascriptを修正していけばいいということで間違いないでしょうか。

また、まとめて頂いたタグに関しては最初のhtmlに張り付ける形でこちらも間違いないでしょうか。

修正確認が出来るのが金曜日になってしまいまして、もし金曜日に試しその結果を再度記載させて頂きます。

丁寧にご説明頂いて大変分かりやすかったです。有り難うございました。

申し訳ありません。あと1点質問よろしいでしょうか。

>1.右上に拡大表示されるものを左上に(画像にかぶせる形で)表示させたい

これに関して残り左下、右下に関しても教えて頂いてもよろしいでしょうか?

また、

>2.カーソル移動させると元画像が薄く四角で囲まれますが、その幅・高さと拡大表示される方も幅・高さを変更させたい

これと同じですが、右上に表示される拡大表示の幅や高さも、paccochi様の記載して頂いたzoom2のrelにwidthやheightを加えるという形でよろしかったでしょうか。

質問が多くなり申し訳ありませんがよろしく御願い致します。


2 ● ぱこち
●35ポイント

>このMagicZoomPlusの最新版をダウンロードしてCSSとjavascriptを修正していけばいいということで間違いないでしょうか。

はい。ひとまずは画面右の「Download Free trial (ZIP 583Kb)」というリンクからデモ版を落として、動作を確認してみて下さい。

一応ですが、もう一度 URL を出しておきます。

Magic Zoom Plus

http://www.magictoolbox.com/magiczoomplus/


>また、まとめて頂いたタグに関しては最初のhtmlに張り付ける形でこちらも間違いないでしょうか。

はい。TD の中に記述する形で貼り付けて下さい。


>>1.右上に拡大表示されるものを左上に(画像にかぶせる形で)表示させたい

>これに関して残り左下、右下に関しても教えて頂いてもよろしいでしょうか?

左下、右下の場合は、もう少し色々書き加える必要があります。

まず、zoom1-big (拡大枠) と zoom1 (本体) を、サムネイルと同じ大きさの DIV で囲みます。この時、「position: relative;」も指定しておいて下さい。

<div style="position: relative; width: 450px; height: 338px;">
<div id="zoom1-big" (省略)></div>
<a (省略) id="zoom1" (省略)><img src="topimage.jpg" (省略)/></a>
</div>

「width: 450px; height: 338px;」の部分は、サムネイル画像の大きさに合わせて下さい。


そして、zoom1-big のスタイルに、ポジションを指定します。

左下の場合は、

<div id="zoom1-big" style="position: absolute; bottom: 42px; left: 0px;"></div>

右下の場合は、

<div id="zoom1-big" style="position: absolute; bottom: 42px; right: 62px;"></div>

のように指定します。

「bottom」の値は zoom1 の rel で指定した 「zoom-height」の値に 2 を足したもの、

「right」の値は zoom1 の rel で指定した 「zoom-width」の値に 2 を足したものです。

2 を足すのは、拡大枠のボーダー分だけはみ出るためです。

まとめるとこんな感じになります。拡大枠はこの場合右下です。

<div style="position: relative; width: 450px; height: 338px;">
<div id="zoom1-big" style="position: absolute; bottom: 42px; right: 62px;"></div>
<a href="topimage.jpg" class="MagicZoom MagicThumb" id="zoom1" title=""
 rel="zoom-width: 60; zoom-height: 40; zoom-position: custom; hotspots: zoom2;">
<img src="topimage.jpg" name="tempImage" width="450" height="338" class="img_sub" />
</a>
</div>

<div id="zoom2" class="MagicHotspots">
<a href="topimage2.jpg(別の画像)" coords="0, 0, 450, 338" title="" rel="" class="MagicThumb"></a>
</div>

>>2.カーソル移動させると元画像が薄く四角で囲まれますが、その幅・高さと拡大表示される方も幅・高さを変更させたい

>これと同じですが、右上に表示される拡大表示の幅や高さも、paccochi様の記載して頂いたzoom2のrelにwidthやheightを加えるという形でよろしかったでしょうか。

zoom2 は、クリックした際に別の画像を表示させるためだけのものです。zoom2 の rel は、その別画像の表示方法を変える場合に書き加えて下さい。


拡大枠の大きさは、zoom1 の rel で指定した「zoom-width」「zoom-height」の値そのままになります。

薄く四角で囲まれた部分の大きさは、拡大枠の大きさでも多少変わりますが、主に元画像の大きさとサムネイル画像の大きさの比率によって変わります。

薄く四角で囲まれた部分を大きくしたい場合は、元画像を画像編集ソフトなどで少し縮小してみて下さい。


こういった返答でも、こうして回答として登録してしまうと、「オープンポイント」というポイントが余計にかかってしまいます。

この質問の設定を、回答受付中もコメント欄が使えるように変更していただければ、オープンポイントを気にすることなく返答できるようになります。

返答の必要性がまだあるようでしたら、コメント欄を使えるようにしていただけると嬉しいです。

◎質問者からの返答

pacochi様

ご回答頂き有難うございました。

まだこちらのシステムに慣れておらず、コメント・トラックバックの表示を「表示する」に変更したのですが、

これでコメントを書き込めるようになっているのでしょうか?

間違っているようでしたら書き込みして頂いて構いませんのでよろしくお願い致します。

http://www.rakuten.ne.jp/gold/boutsuton/629/629.html

上記のページにて修正を行いましたが、

今度は左上に拡大表示がされなくなりました。

ただ、自分のパソコン上では確認がとれる状態です。

また、今の状態ですと

http://www.rakuten.ne.jp/gold/boutsuton/629/sample1.jpg

このようになっておりますが、

http://www.rakuten.ne.jp/gold/boutsuton/629/sample2.jpg

↑このようにすることも可能なのでしょうか。

ご返答何とぞよろしくお願い致します。

関連質問


●質問をもっと探す●



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