• ベストアンサー
  • 困ってます

オンマウスで画像がぶれる(HighSlide)

初めて質問します。現在、ブログを運営していますが最近になってHighSlideを導入してみました。記事中の画像はサムネイルで表示され、今までだと別ウインドウにオリジナルを表示するようにしていたのですが、HighSlide導入後は画像がズーム&ポップアップされなかなか楽しめています。 ただ、HighSlideを設定した画像はサムネイル上にマウスカーソルを持ってきたときに画像の枠が消え、画像がやや下方にずれていきます。今までだとこういったことはありませんでした。hoverなどが設定されているのだろうかとHighSlide.jsを探してみましたがなさそうな感じです。参考までにURLを記載しますので、どういった理由が考えられ、どういった対策が取れるのかをご教示下さい。なお、確認環境はMacOSX 10.4.11/FireFox3.0.3/Safari3.1.2です。 http://sceadu.blog.shinobi.jp/ 最近の3記事についてはHighSlideを、それ以前の記事については今まで通りの表示方法にしています。なお、当方で使っているHighSlide.jsは以下のURLで参照できます。 http://file.sceadu.blog.shinobi.jp/highslide.js よろしくお願いいたします。

共感・応援の気持ちを伝えよう!

  • 回答数1
  • 閲覧数507
  • ありがとう数1

質問者が選んだベストアンサー

  • ベストアンサー
  • 回答No.1

挙動としては、borderの幅が変わってるなぁという感じで。 原因は、問題の画像達はA.highslideの子孫であるだけじゃなくて div.EntryTextの子孫でもあることですね。指定の順番からかな、標 準ではEntryTextで指定した1px幅rgb(102,102,102)色のborderが描 かれていて、hoverするとhighslide:hoverの2px幅white色のborder に切り替わってます。highslideの2px幅gray色のborderは使用され ていません。 highslideの指定をもっと後ろに持ってくるか、指定の詳細度をあげ る工夫が必要ですね。highslideのborderを1px幅にしてもいいけど。

共感・感謝の気持ちを伝えよう!

質問者からのお礼

grumpy_the_dwarfさま 何度も書き込み申し訳ありません。その後、いろいろとソースを見ていまし たら忍者ブログのテンプレート設定があることを思い出しました。テンプ レート設定でhighslideのCSS部分を見てみましたら、ご指摘の .highslide:hover img { border: 2px solid white; } があり、この部分を1pxにすることで解決しましたまた、solid white;を solid gray;に書き換えることで特に違和感なくマウスオーバーできるよう になりました。ここで質問させていただいたおかげです。どうもありがと うございました。

質問者からの補足

grumpy_the_dwarfさま 早速のご回答ありがとうございます。専門的な立場の方とお見受けいたしま すが、当方なにぶん素人のためなかなか理解できません。highslide.jsをテキ ストエディタで見てもhoverは検索にかかりません。 >highslideの指定をもっと後ろに持ってくるか、指定の詳細度をあげ >る工夫が必要ですね。highslideのborderを1px幅にしてもいいけど。 「指定を後ろに持ってくる」「指定の詳細度を上げる」「highslideの borderを1px幅にする」の具体的なご指示をいただくことはできません でしょうか?何度も申し訳ありませんm(__)m

関連するQ&A

  • highslideで拡大画像・サムネイルが表示されない

    こんにちは、いつもお世話になっています。 こちらで紹介して頂いたhighslide(http://vikjavev.no/highslide/)からサンプルをダウンロードしました。 サンプルの画像フォルダに自分の表示したい画像(拡大画像とサムネイル)をサンプルファイルと同名(full-image.jpg, thumbnail.jpg)で上書きしたのですが、画像が表示されません。 highslideを利用するには、あとどうすればよろしいのでしょうか? どなたかご教授お願いします。

  • highslideでキャプションを画像の右側に出す方法

    highslideでキャプションを画像の右側に出す方法 こんにちわ。 highslideを使用しているんですが、 設定した画像をクリックすると、ポップアップで画像とキャプションが表示されますが、キャプションが画像の下に出ます。 キャプションを画像の右側に出すにはどうすればいいでしょうか? CSSやJSと変更箇所が多いので回答しづらいとはおもいますが、 よろしくお願いします。

  • highslideについて

    highslideを使用してページ内にHTMLを表示させたいのですが、2箇所に設定すると2箇所とも同じHTMLが表示されてしまいます。(LINK先は別々に指定しているのに) ネットで調べても、画像の拡大表示のカスタマイズについてのサイトばっかりで、わからなくて困ってます。 highslideの詳しい設定が載っているサイトをご存知の方いらっしゃいましたら、教えて頂けませんか? よろしくお願いします。

    • 締切済み
    • CSS
  • highslide js の画像の表示サイズが ie6,ie7 でおかしくなります

    highslide js の画像の表示サイズが ie6,ie7でおかしくなります。 サムネイル画像はそのまま表示されておりますが 拡大された画像のサイズが正常なサイズの画像と さらに拡大されて画像が荒くなってしまうものがあります。 すべてサムネイル画像と拡大画像のオリジナルサイズは同じサイズの画像を用意しているのですが・・・。 ちなみにfirefox ではすべて正常に表示されている8ので 正常に機能しているのは間違いないとは思うのですが・・・ IEにおけるバグ等の情報があれば教えていただければうれしいです。 よろしくお願いします。

  • highslideについて

    質問させていただきます。 highslideについてです。 大きな画像を表示する場合、 <div class="highslide-caption"> の部分が、元の画像の大きさに合わせて しまうらしく、右のラインを突き抜けた形で 表示されてしまいます。 (ちなみに画像を拡大して原寸大にすると 問題ありませんでした) <div class="highslide-caption">部分で大きさを設定できる、 もしくは初期表示の大きさに合わせる方法は ありませんでしょうか。 もしわかる方がいらっしゃったらご教授下さい。

  • Highslide JS の設置についてお尋ねします。

    Highslide JS の設置についてお尋ねします。 Highslide Editorで作ったファイルを使って http://lusrogi.web.fc2.com/rrr/rit.html のサイトの画像をスライドショーにするようにしたいのですが 何故かうまくいかず、ずっと読み込み中のままになってしまいます。 『highslide.config.js』と『highslide.js』の『graphicsDir』の値の 書き換えはしたのですがもしかして間違っているのでしょうか? いろいろ試してはみたのですがうまくいかないのでこちらで質問をさせて頂きます。 どうかお知恵をお貸し下さい。

  • Highslide JSの設置方法について質問です。

    Highslide JSの設置方法について質問です。 はじめまして、質問失礼いたします。 現在HPを製作中なのですが、サムネイル画像をクリックして拡大するためにHighslide JSを是非使いたくて試しに適当な画像で設置しようとしているのですが・・・。 参考サイトを読みながらでもなんともできずに困っています。 ページはhttp://2dpuppet.web.fc2.com/2dpuppet/gallery.htmlです。 どうかお詳しい方がいらっしゃいましたら、正しい設置をご教授願います。 宜しくお願い致します。

  • 忍者ブログでの画像の挿入について。

    メールや、通常投稿で画像を挿入した際に <a target="_blank" href="画像のURL.jpg"><img border="0" alt="" src="http://file.○.blog.shinobi.jp/Img/1234567890/" /></a> と挿入されるのですが、常にサムネイルなどを使わないで、 <img src="画像のURL.jpg"> と、画像を挿入することはできないでしょうか…。 サイムネイルなどが毎回出来て困っているのですが…。 出来ればリンクも外したいですが、あってもかまいません。 とりあえずhttp://file.○.blog.shinobi.jp/Img/1234567890/の部分を直接画像のURLにしたいのです。 一通り設定等は確認したのですが、知識は乏しいので、解決方法がお分かりになる方いらっしゃいましたらご回答お願いいたします><

  • highslide JSのポップアップ表示について

    初めまして、よろしくお願いします。 「highslide JS」について分からない事がありますので質問させて頂きました。 現在ホームページを作成していて、 トップページにインラインフレームを設置し、 インラインフレーム内に写真を数枚表示させています。 インラインフレーム内の写真のポップアップ表示をするため、 「highslide JS」を使っているのですが、写真をクリックし拡大表示させると、 写真がインラインフレームの枠のサイズより大きいため、 自動的にインラインフレームに合わせたサイズに写真が縮小され表示されてしまいます。 また、拡大表示された後、ドラッグして移動させると写真が切れてしまいます。 サイズの方は、写真を小さくすれば解決するのですが(本当は写真を小さくしたくありません…)、 拡大表示された後の、ドラッグして移動させると写真が切れて表示されるのは解決できません。 そこで「highslide JS」のサイトを調べて、 FAQのhttp://vikjavev.no/highslide/forum/viewtopic.php?t=1351の http://vikjavev.no/highslide/example-inside-iframe.htmlを見つけました。 http://vikjavev.no/highslide/example-inside-iframe.htmlのページもインラインフレーム使用し、 その中に写真を表示させているようなのですが、 写真をクリックすると、インラインフレームのサイズよりも写真のサイズが大きいのにもかかわらず、 インラインフレームを飛び出したような感じで表示されています。 文章が分かりずらくてすみません…。 整理しますと、トップページのインラインフレーム内の写真をクリックし、 ポップアップ表示を親ウィンドウに表示させたいのです。 このように表示させるにはどのようにしたら良いでしょうか? また、可能なのでしょうか? 最後に、「highslide JS」の設置は、 http://www.kfstudio.net/blog/archives/910mt/20070126164154.phpのサイトを参考に、 JavaScriptソースやHTMLソースをコピペでなんとか設置できました。 JavaScriptはあまり詳しくありません。 長くなりましたが、JavaScriptに詳しい方、どうぞよろしくお願いいたします。

  • Highslide JSのコントローラーについて質問です。

    Highslide JSのコントローラーについて質問です。 http://2dpuppet.web.fc2.com/top.html 上記ページのギャラリーにおいて、画像を拡大した際に表示されるコントローラー(オンマウスで浮かび上がります)が変なリストのままなおりません。 どこをどうすれば画像のようなボタン式になるでしょうか? 初心者ですが、どうかご教授願います。