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

回答の条件
  • 1人10回まで
  • 13歳以上
  • 登録:2010/07/14 00:03:43
  • 終了:2010/07/21 00:05:02

ベストアンサー

id:pacochi No.1

ぱこち回答回数246ベストアンサー獲得回数1112010/07/14 04:40:15

ポイント35pt

お使いのスクリプトは 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 の変更は可能のようです。

id:ameri1u1

pacochi様

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

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

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

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

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

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

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

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

また、

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

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

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

2010/07/14 11:15:22

その他の回答(1件)

id:pacochi No.1

ぱこち回答回数246ベストアンサー獲得回数1112010/07/14 04:40:15ここでベストアンサー

ポイント35pt

お使いのスクリプトは 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 の変更は可能のようです。

id:ameri1u1

pacochi様

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

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

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

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

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

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

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

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

また、

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

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

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

2010/07/14 11:15:22
id:pacochi No.2

ぱこち回答回数246ベストアンサー獲得回数1112010/07/14 13:46:15

ポイント35pt

>この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」の値そのままになります。

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

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


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

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

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

id:ameri1u1

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

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

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

2010/07/16 16:56:40
  • id:pacochi
    コメント欄を使えるようにしていただき、ありがとうございます。

    はじめの回答で書いたものは、テーブルで囲っていることが前提かと思い、それに即して答えたので、テーブルを外すと拡大枠が左に寄ってしまいます。

    ふたつめの回答で答えた書き方 (サムネイルを DIV ではさむ方法) でしたら、テーブルに関係なく、画像にかぶさる形で表示されると思います。

    >http://www.rakuten.ne.jp/gold/boutsuton/629/sample2.jpg
    >↑このようにすることも可能なのでしょうか。

    可能です。サムネイルにぴったりかぶせるのではなく、ちょっとずらして表示させたいのであれば、zoom1-big に「top: 10px; left: -20px;」というスタイルを指定すれば、少しだけずれてくれます。数値はお好きなように変更して下さい。

    まとめると以下のようになります。

    <div style="margin:0px auto; position: relative; width: 500px; height: 376px;"><!-- width と height はサムネイルのサイズ -->
    <div id="zoom1-big" style="position: absolute; top: 10px; left: -20px;"></div><!-- 右に寄せる場合は right、下に寄せる場合は bottom を指定 -->
    <a href="topimage.jpg" class="MagicZoom MagicThumb" id="zoom1" title=""
    rel="zoom-width: 300; zoom-height: 300; zoom-position: custom; hotspots: zoom2;">
    <img src="topimage.jpg" name="tempImage" width="500" height="376" class="img_sub" />
    </a>
    </div>

    <div id="zoom2" class="MagicHotspots">
    <a href="topimage.jpg" coords="0, 0, 500, 376" title="" class="MagicThumb"></a><!-- coords の三番目、四番目はサムネイルのサイズ -->
    </div>

    本日提示された HTML でしたら、CENTER の中に書く形になります。
  • id:ameri1u1
    pacochi様

    コメント書いて下さり誠に有難うございました。
    修正箇所をそのまま挿入させて頂きました。
    私は「peggy pad」というソフトを使い、IE8を利用しております。
    peggy padで編集、IEでオフラインで確認
    ↑この時は正常に左上に重なるように表示されておりました。
    ただ、fttpでアップロードしたら、
    先のページ、オンライン上では本画像の下に、左上表示されており、
    拡大表示が見えない状態です。
    これはIE8だからなのでしょうか?
    家のmacで見た時には正常に見えていたと思いますので、(環境はsafariです)
    これはIEだからこその現象なのでしょうか。
    他の方が正常に見えているのであれば、問題ないとは思うのですが
    根本的な問題を申し訳ありません。
    もし変更出来る箇所があれば教えて頂けないでしょうか。
    何度も申し訳ありませんがよろしくお願いいたします。
  • id:pacochi
    >先のページ、オンライン上では本画像の下に、左上表示されており、
    >拡大表示が見えない状態です。
    >これはIE8だからなのでしょうか?

    私の環境 (Windows Vista) では、再現できませんでした。
    http://f.hatena.ne.jp/pacochi/20100717132512
    拡大枠をかぶせた部分にマウスカーソルを持っていくと多少ちらつきますが、それ以外は問題があるようには見えませんでした。
    (IE8 以外でも、拡大枠をかぶせた部分にカーソルを当てるとちらつきます。これは仕方ないと思います。)
    もしかしたらファイルのキャッシュが残っているのかもしれません。一度更新してみて下さい。
  • id:ameri1u1
    同僚のwindows vistaで見せてもらったところ、
    http://www.rakuten.ne.jp/gold/boutsuton/629/sample-a.jpg
    私のパソコンと同様に上記のような「拡大表示が下にくる」という症状が出てしまいます。

    pacoshi様が仰っている、
    ファイルのキャッシュ、そして更新の作業というのは
    「ページを最新の状態に更新」ということで間違いないでしょうか。

    他にやらなければならない作業があるものなのでしょうか。

    また、先のページ、
    http://www.rakuten.ne.jp/gold/boutsuton/629/629.html
    を開くと下のバーに警告マークでエラー表示が出ておりました。
    以下に記載しておきます。
    ---------------------------------------------------------------------------
    Web ページ エラーの詳細

    ユーザー エージェント: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 6.0; Trident/4.0; GoogleT5; SLCC1; .NET CLR 2.0.50727; Media Center PC 5.0; .NET CLR 3.5.30729; .NET CLR 3.0.30729; .NET4.0C)
    タイムスタンプ: Sat, 17 Jul 2010 06:47:31 UTC


    メッセージ: 識別子、文字列または数がありません。
    ライン: 15
    文字: 4
    コード: 0
    URI: http://www.rakuten.ne.jp/gold/boutsuton/629/629.html
    ---------------------------------------------------------------------------
    これはタグページ自体が何かエラーになるものが入っているということなのでしょうか。
    ご返答お待ちしております。
  • id:pacochi
    原因が分かりました。IE7 互換モードで表示させると、後ろに隠れていたみたいです。
    zoom1-big のスタイルに「z-index:100;」と書き加える事で回避できました。


    それから、スクリプトエラーの方ですが、今回の拡大枠が後ろに表示される現象とは関係ありません。
    エラーがあったのは、クリックした時に出る画像の表示方法を設定している箇所ですね。
    HTML ファイルの 9行目あたりから始まる部分です。

    <script type="text/javascript">
    MagicThumb.options = {
    backgroundFadingColor: '#ffffff',
    backgroundFadingDuration: 0.2,
    backgroundFadingOpacity : 0,
    keepThumbnail: true,
    }</script>

    「keepThumbnail: true,」のコンマ (,) を削除して、「keepThumbnail: true」にするとエラーは出なくなりますが、書式が古いバージョンのものなので、このスクリプトにあまり意味はありません。SCRIPT タグごと削除しても良いと思います。
    (SCRIPT に記述して指定する方法自体は最新版でも存在するのですが、backgroundFadingColor などのパラメータが古い書き方なので、反映されないのです。)

    この設定と同じ設定をしたい場合は、zoom2 の中にあるリンクに「rel="background-color: #ffffff; background-opacity : 0; background-speed : 200; keep-thumbnail: true;"」という設定を書き加えて下さい。

    まとめると、以下のようになります。

    <div style="margin:0px auto; position: relative; width: 500px; height: 376px;"><!-- width と height はサムネイルのサイズ -->
    <div id="zoom1-big" style="position: absolute; top: 10px; left: -20px; z-index:100; "></div><!-- 右に寄せる場合は right、下に寄せる場合は bottom を指定 -->
    <a href="topimage.jpg" class="MagicZoom MagicThumb" id="zoom1" title=""
    rel="zoom-width: 300; zoom-height: 300; zoom-position: custom; hotspots: zoom2;">
    <img src="topimage.jpg" name="tempImage" width="500" height="376" class="img_sub" />
    </a>
    </div>

    <div id="zoom2" class="MagicHotspots">
    <a href="topimage.jpg" coords="0, 0, 500, 376" title="" class="MagicThumb"
    rel="background-color: #ffffff; background-opacity : 0; background-speed : 200; keep-thumbnail: true;"></a><!-- coords の三番目、四番目はサムネイルのサイズ -->
    </div>


    あと、些細な事かもしれませんが、外部スタイルシートとして指定されている magiczoom-new.css というファイルがアップロードされていないようです。
    おそらくこのファイルの有無でそんなに挙動は変わらないと思いますが、一応ご確認下さい。


    >ファイルのキャッシュ、そして更新の作業というのは
    >「ページを最新の状態に更新」ということで間違いないでしょうか。
    はい、そういう意味だったのですが、見当違いでしたね。すみません。
  • id:ameri1u1
    pacochi様

    教えて頂いた通りに、試してみましたところ、
    きちんと表示がされました。
    大変助かりました、本当に色々有難うございます。

    magiczoom-new.cssは、
    アップロードしていたはずなのになぜだろう?と探してみると、
    アップロードしていたのは「maziczoom-new.css」とタイトル名違いでした。
    お騒がせしました。

    また、拡大表示や、拡大画像にも表示される赤字はfree javascriptを使用しているからなのでしょうか。
    この一つだけが最後の謎になってしまいましたが。

    それ以外は本当に助かっております!
    本当に有難うございました。
    それでは失礼します。
  • id:pacochi
    解決して良かったです。
    拙い説明にお付き合い下さり、ありがとうございました。

    >また、拡大表示や、拡大画像にも表示される赤字はfree javascriptを使用しているからなのでしょうか。
    >この一つだけが最後の謎になってしまいましたが。

    赤字が出るのは、デモ版 (お試し版) だからです。
    ひとまず試用して、満足な動作をしたら、改めて正式なライセンスのものをダウンロードする形になってるみたいです。

    http://www.magictoolbox.com/license/
    ひとつめの回答でも触れましたが、非商用・個人利用に限りフリーで、商用利用 (お店のサイトに使う場合) はお金を払うみたいです。
    支払い方法は PayPal か Google Checkout が選べるようです。

    http://www.google.com/search?q=%EF%BF%A139+in+%E5%86%86%3D
    1 サイトなら五千円ちょっとになると思います。

    以前は商用もフリーだった、というような情報は検索しても出てこなかったので、おそらく、いちばん初めに使われていた古いバージョンのものでも、お金を払わずに商用利用すると、ライセンスに引っかかると思われます。
    ご注意下さい。


    余談ですが、はてなの人力検索は、質問後一週間経てば自動終了しますが、自分で質問を終了させることもできます。
    コメント欄は質問終了後も継続して利用できます。

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

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

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

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