JavaScriptで印刷時に画像を上に寄せて表示する方法

前へ 次へ
このQ&Aのポイント
  • JavaScriptで作成したlightboxの画像が印刷時に下に表示される問題を解消する方法を探しています。
  • 外部スタイルシートで@media print{}を使用して画像の表示位置を上書きしようとしましたがうまくいきませんでした。
  • JavaScriptから@media printの属性を上書きする方法を探していますが、調査中です。
回答を見る
  • ベストアンサー

JavaScriptで印刷時にスタイル変更

お世話になります。 JavaScriptで画像を表示するプログラムを作成しました。lightboxのようなもので、スクロール位置に合わせて画像を表示します。 この画像を印刷時に上に寄せて表示したいのですが、スクロール状態によって下の方に画像が表示されてしまいます。 これを解消しようと外部スタイルシートにて @media print{}で指定しましたが、JavaScriptが動的に変更したプロパティは上書きされてしまうようで上手くいきませんでした。 考えたのは １．印刷時に画像のtopを0にする 　　　→topは表示時にJavaScriptで上書きしているのでダメ １．もう一つ画像を作って、印刷時に表示し、元の画像を隠す 　　　→元の画像のdisplayを上書きしているのでダメ ２．元の画像の上に白のDIVを被せて、その上にもう一つの画像を載せる 　　　→場合によっては印刷のページ枚数が増えてしまう（元の画像は生きているため） JavaScriptから@media printの属性を上書きできたら良いのですが、色々と調べましたが良く分かりませんでした（それらしきプロパティは有るようですが。。） よろしくお願いします。

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

  • ベストアンサー
  • 15mm
  • ベストアンサー率65% (65/100)
回答No.1

ＩＥ・Ｏｐｅｒａ・ＦｉｒｅＦｏｘで確認。 @media print と !important で目的の動作ができました。 ※「lightboxのようなもの」というのがどう影響するかわかりません

masaota56
質問者

お礼

ありがとうございます！できました

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • 印刷時に消したいjavascriptがある

    印刷用のcssを読み込んでいるのですが、 困ったことに、javascriptで無理やり表示している要素がありまして、 そのソースは外部サイトを読み込んでいるので、 こちらサーバーで指定したcssのdisplay:noneは一切ききません。 そこで、印刷時には<script></script>を消すみたいな ことをしたいのですが、そのようなことを可能でしょうか。 javascirptでなくてもphpでも大丈夫です。 cssのmediaとprintのように何かフラグが取得できればいいのですが・・・ ご教授お願いいたします。

  • スタイルシートで印刷時の画像入れ替え

    ホームページの印刷用レイアウトを考慮しています。 スタイルシートを 「media="print"」で利用することで印刷時のみ利用できるスタイルを設定出来るというのはわかりました。 これを利用して、通常a.jpgを表示させておいて印刷時にその場所にb.jpgを表示・印刷させることは出来ませんか?(画像の入れ替え) 方法があれば教えてください。

    • ベストアンサー
    • CSS
  • HTMLの画面上と印刷時のレイアウト

    WEB 上では、認識しやすい大き目のフォントサイズ、カラー（Css 指定）で表示をしているが、印刷コマンドを実行したときは、小さいフォントサイズ、モノトーン（Css 指定）で印刷される。 こんな事は可能でしょうか？ *** STYLE 指定タグ（ HEAD 内）に [ media=print ] の一文を書き添えると、印刷時はその Css を参照してくれます。（確認済み） しかし、画面表示用の Css 属性が別項目に設定してあると [ media=print] の Css は無視されてしまいます。 [ media=tv, projection ] と言うのもあるようですが、有効ではないようです。 *** PS: このような事は、JavaScript でないと出来ないのでしょうか？ Css： カスケード・スタイル・シート 環境： Win98SE, IE 5.5

  • JavaScriptでスクロール画像

    JAvaScriptで、ブラウズのスクロール時に画像が常に固定の位置で表示される（付いて来る）ようなことをしたいのですが、何か良いサンプルはございますか？

  • Javascriptでページ内容全体を書き換える方

    すいません、もしご存じの方がおられましたら、教えて頂けたらと思いまして。。 Javascriptでページ全体（<!DOCTYPE html PUBLIC ～ </html>まで）を動的に書き換えて、なおかつ画面をスクロールさせずに元の位置が表示される方法を教えてください。 document.write(pageHtml); のようにやると、書き換わるのですが画面がトップに移動してしまって困っています。 何かヒントだけでもいただけたら嬉しいです。

  • オンクリックで画像とテキストの指定位置表示について

    フレームを使用してサムネイルをクリックしてメイン部分に拡大画像を表示しています。 また同時に、メインページにおいて、画像表示ごとに「次の画像」「前の画像」「TOPに戻る」リンクを張っています。 この場合、メインに表示させるhtmlファイルを画像枚数分作成する必要があります。 そこでこれをノーフレーム版で、かつ１枚のhtmlシートで作れればいいのですが、javascriptの変数(?)などを使って可能でしょうか。 画像は100枚くらい存在するものとし、ファイルNoにより区分しています。 なお当方javascriptの知識はありません。 これに類するもので lightbox Plus （lightboxの拡張版） http://serennz.sakura.ne.jp/toybox/lightbox/​ があって、画像内にページ送りのアイコンが表示されるようになっていてこれでもいいのですが、このアイコンの表示が画像表示のあと少しタイムラグがあるため、javascript等で作れないものかと考えてます。 よろしくお願いします。

  • jquery lightboxを設定しようとしていますが問題がでてます

    jquery lightboxを設定しようとしていますが問題がでてます.... functionの部分を htmlに直接表記すれば動く状態ですが、 functionの部分を外部に登録するとなぜか動かなくなってしまいます。 jquery.lightbox-0.5.min.jsというファイルにファンクションを書き足せばいいとの ことですが.. なにか　以下のＨＴＭＬソースに足らない部分がありますか？ ご教授ねがいます。 <link href="css/top.css" rel="stylesheet" type="text/css"> <link href="css/print.css" rel="stylesheet" type="text/css" media="print"> <link rel="stylesheet" type="text/css" href="css/jquery.lightbox-0.5.css" media="screen" /> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.lightbox-0.5.js"></script> <script type="text/javascript"> $(function() { $('.up_image a').lightBox({ overlayBgColor: '#FFF', overlayOpacity: 0.7, txtImage: '画像', txtOf: 'の' } ); }); </script> </head>

  • iframeのスクロールバー位置を保持した状態で印刷

    iframeのスクロールバー位置を保持した状態で印刷 HTMLで、iframeの内部に画像を表示しています。 画像のサイズがiframeのサイズよりも大きいためスクロールバーがあるのですが、 表示させたい位置にスクロールバーを移動させた状態で印刷しようとすると、 表示位置がiframeの左上（画像の左上）に戻ってしまいます。 スクロールバーの位置を保持した状態で印刷することは可能でしょうか？ スタイルシート、javascriptも利用可能です。

  • Javascriptで開いたWindowのスクロール

    <SCRIPT language="JavaScript"><!-- function openWin2() { window.open("http://www.OOOO/hanbai.htm","通信販売法","width=636,height=250,menubar=no,location=no,left=10,top=30") } // --></SCRIPT> <SCRIPT language="JavaScript"><!-- function openWin1() { window.open("http://www.OOOO/souryou.htm","送料について","width=579,height=240,scrollbars=no,location=no,menubar=no,left=10,top=30") } // --></SCRIPT> 上記の文で、「送料について」はスクロールバーがなくて ＯＫなのですが、 「通信販売法」は、スクロールバーを出したいのですが、 上の文では、スクロールバーは出てきません。 （表示サイズで途切れてしまう） どう直せば、スクロールバーが出てきますでしょうか？？

  • JavaScriptを使って縦に画像がスクロールするページを作りたいの

    JavaScriptを使って縦に画像がスクロールするページを作りたいのですが、 (こんなかんじで動く)http://www.gmarwaha.com/jquery/jcarousellite/index.php 私はまだ勉強中で、テンプレートをダウンロードして少々いじって使う程度しかできません。 テンプレートで縦に動くものをみつけたのですが http://sorgalla.com/jcarousel/ 画像や全体の幅を広げようとまずCSSで調整したら、画像は大きくなったけど、 全部縦に画像がうまく並ばず、何枚も画像が表示されるはずなのに、1枚しか表示されなくなりました。 矢印ボタンを押してスクロールさせようとすると、 表示枠は長くしてあるのに、一番上の画像が別の画像に切り替わるという感じです。 言葉だけではうまく伝わらないとは思いますが。。 一番上に記載したURLのやつを縦バージョンにする方法など、 あったら教えていただけないでしょうか？ 他にも、縦にスクロールするJavascriptをご存知の方いらっしゃいましたら、教えていただけると助かります。 他力本願で大変お恥ずかしいのですが、どなたかうまく作れる方法がありましたらご協力お願いします！！

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する