- 締切済み
画像の左端をクリックした時にJavascriptを動作させたい
任意の縦横サイズの画像の左端の外側についてる幅4pxの枠をクリックすると特定の Javascriptメソッドを呼ぶHTMLコードを書きたいのですが、どうCSSと 組み合わせても枠が画像より短かったり逆にヤケクソに長くなったりして うまくいかないのですが、実際のところこのような芸当は可能なのでしょうか？
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- ぜ り～（@-Jelly-）
- ベストアンサー率34% (132/383)
関連するQ&A
- [HTML][CSS] 画像の高さを揃えるには？
HTML、CSSの書き方について教えてください。 ブロック中に複数の画像を配置し、それらのアスペクト比を変えずに高さを揃えようとしています。 ベースとなるHTMLコードの例： <div class="photos"> <img class="photo" src="xxx1.jpg"> <img class="photo" src="xxx2.jpg"> <img class="photo" src="xxx3.jpg"> </div> やりたいこと： 要件1. <div>内の写真の数によって幅を固定させたい。 例：写真が3枚なら、1枚あたりの幅は3/画面幅。 要件2. <div>内の複数の写真を一番小さい高さの写真に揃えたい。 例：写真1の高さ200px、写真2の高さ250px、写真3の高さ100px →写真1~3の高さを100pxとしたい。 要件3. 要件1と2を満たしつつ、画像のアスペクト比は変えたくない。 →幅をベースとして高さを動的にトリミングしたい。 読み込んだポストによって幅や高さが変わるので、 css+JavaScriptというよりはHTMLタグに属性を直に書いてできると良い。 （<div style="xxxxx">とか<img style="yyyy">とか。） clip:rect()でできるのかもしれないのですが、座標の扱い(position:absolute;)とかがよくわからないです…。 なお、HTML内にて各画像の高さを取得する必要はありません。既に取得済の情報を使います。 何か良い案はありますでしょうか？
- ベストアンサー
- HTML
- CSSの画像位置
CSSを使ってある画像を完全に右によせたいと思っています。 CSSの場合下記のやり方で記せば右端によるはずなのですが、 何がいけないのか、1pxだけ空いてしまうのです。 本当にわずか1pxなのてすが、 （1pxというより1ドット？） とても気になります。 これの逆バージョン、左端よせは上手くいきました。 一体何がおかしいのでしょうか？ もし直らないなら、他に完全右寄せできる記述が ありましたら教えて下さい。 それはHTMLでも何でもかまいません。 <STYLE TYPE="text/css"> <!-- body { background: #ffffff; } p { position: absolute; top: 15px; right: 0px; } --> </STYLE>
- ベストアンサー
- HTML
- 右寄せ時の背景画像
cssでテキストを右寄せするだけなら問題ないのですが背景画像をつける場合下記の他にどのような方法がありますか？ <p class="hoge">ここに右寄せのテキストが入ります。</p> .hoge { margin-top: 5px; font-size: 80%; color: #888; text-align: right; background: url(../img/common/hoge.png) no-repeat 420px 1px; } 420pxを0とすると当然ながら左端を基準に画像が表示されテキストは右を基準に表示されてしまいます。 ここで妥当なpxを指定する事によりうまく調整は可能なのですがサイト内でフォントサイズを変更 できるようにしておりフォントサイズMAXの幅に合わせてcssを定義するとMINの際に大きく幅が空いてしまい 不格好になってしまいます。 解決方法としてどのような方法がありますでしょうか？
- ベストアンサー
- HTML
- Dreamweaverでoverflow画像の位置
DreamweacerCS3です。 表示フレーム幅(1000px)よりも長い画像(2050px)をcssにてoverflow: auto に設定して、はみ出ることなく収めています。 水平スクロールバーをスライドすれば画像を全幅にわたって動かすことができています。 ページを開いたときは常にこの画像はスクロールバーが左端に寄った状態になっていますが、常時見るのは反対の右側なのでスクロールバーを右端に初期設定したいのですが方法がわかりません。ご伝授ください。 cssのプロパティを見ると100くらいのパラメータがあり、それらしきもの(float)を変えてみるのですが思うようになりません。 現在設定しているのはビューウィンドウのサイズ：（1000px, 410px)、overflow：autoのみです。
- ベストアンサー
- ホームページ作成ソフト
- 【初心者です】HP作成しています。ヘッド画像をクリックして、トップページへリンクのタグを教えてください。
HTMLとCSSを勉強しながらHP作成している初心者です。 外部CSSを使ってHPを作ってるんですが、 ヘッド画像（W830px×H390px）をクリックしたら、トップページへ飛べるようにするには、CSS側とHTML側、それぞれどのようなタグにしたらいいのでしょうか？？ 困っています！ どなたか教えてください。よろしくお願いします。
- ベストアンサー
- その他（インターネット・Webサービス）
- 画像？を入れたらおかしくなりました。
こんにちわ。うまく説明できないのですがお願いします。 私はライブドアブログでブログを書いているのですが、先日、Javascriptの動く画像を貼り付けました。 しかし、ライブドアブログでは、枠の大きさが決まっているようで、動く画像を載せたとたん、横にあるはずのメニューが下に移動してしまいました。 枠の設定などはCSSで作られているらしく、ちょっとHPとかで見てみたのですがわかりませんでした。 で、教えてほしいことは、動く画像を縮小して載せる方法。または、メニューのところの幅を広げる方法です。 この場合、プログラムは載せるべきだとは思うのですが、見ても意味がわからないため、コピペになってしまいすごく多くなってしまいます。それでも乗せたほうがよろしいでしょうか。 ちなみに、動く画像のプログラムは <noedit><script language="JavaScript" src="http://www.livly.com/画像元のURL"></script></noedit> です。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ボタン（画像）をクリックするたび表を切り替える方法
HTMLとcssで組み立てたサイトのページ内に設置したいものです。 タイトルボタン（画像 W300px）の下に表Ａ（簡単な<table>内にテキストがあるW300 H400くらいのもの）があって、 タイトルボタンをクリックするたびに表Ｂ、表Ｃに切り替わるようにしたいのですが、 JavaScriptか何かで可能でしょうか。 表の大きさはすべて同じです。 画像切り替えはできたのですが、どうしてもテキストありの表を切り替え表示したく、 悩んでおります。 宜しくお願い致します。
- ベストアンサー
- HTML
- 枠より大きな画像を部分的に表示javascript
縦1000px 横1000pxの画像(test.jpg)があり、この画像は、5×5で25枚の 縦200px 横200px の画像がつながって一枚となっています。 <img id="testplace"src="test.jpg" width="200px" height="200" /> と指定し（この時には、一番左上の200pxの画像が見えている）、その下に <a href="javascript:void(0)" onclick="testscript(0,0)">1番目</a> <a href="javascript:void(0)" onclick="testscript(0,200)">2番目</a> <a href="javascript:void(0)" onclick="testscript(0,400)">3番目</a> <a href="javascript:void(0)" onclick="testscript(0,600)">4番目</a> <a href="javascript:void(0)" onclick="testscript(0,800)">5番目</a> <a href="javascript:void(0)" onclick="testscript(200,0)">6番目</a> <a href="javascript:void(0)" onclick="testscript(200,200)">7番目</a> ・ ・ ・ <a href="javascript:void(0)" onclick="testscript(800,600)">24番目</a> <a href="javascript:void(0)" onclick="testscript(800,800)">25番目</a> とクリックする場所を設けて、それぞれをクリックすると、「testplace」に各々の200pxずつの画像が表示されるようにするスクリプト「testscript」を作成したいと考えています。 この方法だと画像は複数いらず1枚で済みます。CSSで背景画像を移動させる方法は使用しないで、実装できますでしょうか。 よろしくお願いいたします。
- ベストアンサー
- JavaScript
- CSS による画像を使ったロールオーバー
よろしくお願いします。 CSSを使って、画像のロールオーバーをしようとしています。 HTMLの構成としては、 タイトル画像（幅800px）の下に、CSSを使って作った ロールオーバーするメニューを横並びで配置したいと思っています。 http://edo-freiheit.sakura.ne.jp/eblog/2006/06/css_2.html のサイトを参考に（ほとんどまる写しですが）して、 作成してみたのですが、HTML全体を左寄せしても、中央寄せ してもロールオーバーしたメニューの項目の左側に隙間というか 余白が入ってしまい、上のタイトル画像とズレが生じててしまいます。 この余白をなくす方法がありましたらお教え下さい。
- ベストアンサー
- HTML
- スタイルシートを使用して任意の位置に画像を移動
お世話になります。 HTMLにてページを作成しておりますが、w480×h10pxの大きさの画像を 任意の位置に入れなくてはならなくなりました。その場所にはすでに 画像が入っております。w120×h40が4つ横に並列にならんでおります。 その4つの画像の上と少し重なるように、w480×h10pxの画像をCSSを使用して重なるように上に配置することは可能なのでしょうか？ よろしくお願いいたします。
- 締切済み
- CSS
