- 締切済み
リンクで包括している画像とテキストの周りに枠線を表示させたい
DOUGLAS_の回答
- DOUGLAS_
- ベストアンサー率74% (397/534)
＞自分も display: block;で試していたのですが、 ＞たしかにこれだとwidth:を調節すればちょうど全体を隙間なく囲めるのですが、 ぁぁ、そぉでしたヵ．．．。 それは、大変、失礼いたしました。 <(_ _)> <a href="画像へのURL" style="border: 10px solid rgb(51, 204, 255); display: block; width: 0px;"> <img src="image.jpg" border=0><br><nobr>文字</nobr></a>
関連するQ&A
- ロールオーバー画像の枠線を消したい
初めてホームページ作成中の超初心者です。 ロールオーバーで、下記のタグで表示させたのですが、画像の枠線が出てしまいました。 普通に<img src="img1.gif">と書くと出ない画像なんですが・・・ リンク画像の枠線を消すのと同じ要領でborder="0"とも書き加えてみましたが、（４ヶ所とも）今度は何も表示されなくなってしまいました。 ＜問題のタグのひな形＞ <a href="http://www-------"onmouseover = "document.bt.src = 'img1.gif'" onmouseout = "document.bt.src = 'img2.gif'"onclick = "document.bt.src = 'img3.gif'"><img src = "img2.gif" name="bt"></a> どうぞ宜しくお願いします！
- ベストアンサー
- JavaScript
- 画像の枠線に色をつける方法を探しています。
画像の枠線に色をつける方法を探しています。 現在無料HP作成サイトでHPを作っているのですが、ポップアップウィンドのjavascriptを設定したところ 画像の枠線が消えてしまいました。 入力したのが↓です。 <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> border="1"になっているのに表示されないんです。 色がついていないのか。枠線自体が表示されていないのか。分からず、 調べたところ、色をつけるにはスタイルシートを指定し直接書く方法があるとのことで style="border:solid 5px #000000" をつければ色をつけられるという事を発見しました。 それで、下記のように入力したところ <a href="Javascript:w=window.open('/img/ronro/care2.jpg','ボタンサンプル','Width=200,Height=200');w.focus();"> <img border="1" style="border:solid 5px #000000" width="100" height="100" alt="" src="/img/ronro/care.jpg" /></a> 枠線が太くなって表示されました。 どう書けば枠線を表示できるのでしょうか。 希望はborder="1"の時の太さがいいです。 HP作成初心者なのでタグがめちゃくちゃだと思います。色々なサイトから引用したため。 勉強不足で申し訳ありません。 よろしくお願いします。
- ベストアンサー
- HTML
- リンクのスタイルをテキストと画像を別々にするには？
リンクのスタイルの設定で詰まってしまい困っています。 テキストと下線部分にpaddingを入れたいため、text-decorationではなくborderで下線を設定しています。 このような場合、 画像のみborderを消し、テキストのみにborderを適応させることは可能でしょうか？ <a href="#"><img src="hoge.gif"></a><a href="javaScript..." >テキスト</a>のように書けば簡単なのですが、挙動が望んでいたものと違ってしまうため、<a href="javaScript..."><img src="hoge.gif">テキスト</a>のままでお願いします。 （自分でｊｓが書ければ解決しそうな気もしますが…残念ながらｊｓは借りてきたものです） サンプルでもう少し詳しく説明しています。 http://imaichie.web.fc2.com/sample.html
- ベストアンサー
- HTML
- css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（
css 背景画像（1つ）とリンク付き画像（複数）を中心に表示したい。（超初心者です。） 現在、Kompozerをつかってホームページを作成しています。 添付画像のような配置にしたいので、いろいろなサイトを参照したのですがどうしてもうまくいきません。 現在のソースは以下のようになっており、ブラウザで表示すると背景画像が表示されません。 あまりにも知識がなく、不快な思いをさせてしまったら申し訳ございません。 ご指導いただければうれしいです。 よろしくお願いします。 ＊ソース <html><head> <meta content="text/html; charset=Shift_JIS" http-equiv="content-type"> <title>ページタイトル</title> <style type="text/css"> </style> </head><body> <div style="text-align: center;" background-image:="" url ＊＊.jpg ;width:450px;height:450px;=""><br> <br> <img style="width: 137px; height: 137px;" alt="" src="＊＊.gif" border="0"><br> <br><p style="text-align: center;"> <a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><img style="width: 92px; height: 230px;" alt="" src="＊＊.jpg"><a href="＊＊.html"><img style="border: 0px solid ; width: 92px; height: 230px;" alt="" src="＊＊.jpg"></a><br></p> </div> </body></html>
- ベストアンサー
- HTML
- リンク画像のマウスオーバー時の下線を消したい。（a:hover 関連。
テキストリンクについては、マウスオーバー時に下線が表示されても良いのですが、画像リンクについては下線を表示させたくないと考えています。 どうやったら、切り分けられますでしょうか。 現在、cssファイル内にて、 ---------------- a:hover { color: #色; border-bottom: 1px solid #色; } ----------------- と書いてあり、これがテキストリンクにも画像リンクにも影響しています。 ------------------- 【CSS】 img{ border:0; } -------------------- ではダメでした。 ------------------------- 【HTML】 <a href="リンク先" class="img"><img src="画像URL"></a> 【CSS】 .img a:hover { border-bottom:0px; } ------------------------- →これでもダメでした。 どなたかご助言よろしくお願いします。
- ベストアンサー
- HTML
- リンクする画像とテキストをくっつけるには？
ブログでHTMLタグを使いたいのですがまだよく分かりません。 テキストをクリックしたらリンクするためのHTMLタグは次の通りですよね。 <a href="リンク先URL">表示するテキスト</a> 画像（写真）をクリックしたらリンクするためのHTMLタグは次のようになりますよね。 <A Href="リンク先URL"><img src="画像のアドレス"><A> 私は現在、テキストと画像の両方を同じサイトにリンクさせるのに、上の二つのタグを使っているのですが、本文に表示されると二つが離れてしまいます。よく、画像とテキストが一体化しているのを見るのですが、そうするにはどうしたらいいのでしょうか？ご教授願えませんか？
- ベストアンサー
- ブログ
- 画像リンクでの余白を消したい.(モバスペ)
モバスペでHPを作成しているのですが、 HPを携帯から見たとき、 画像リンクと画像リンクの間に余白が出来てしまいます。 繋げて表示させたいのですが、 どうしたら良いですか？ <BR CLEAR="all>のタグを使ってみたところ、 パソコンから見たら繋がっていましたが、 携帯(au)からは余白が出来ていました…。 無理なのでしょうか？？ ちなみに、下のようなタグを使っています。 <a href="リンク先URL"><img src="画像URL" copyright=yes Border=0></a> <a href="リンク先URL"><img src="画像URL" copyright=yes Border=0></a> 教えてください。
- 締切済み
- その他（インターネット・Webサービス）
- サムネイル画像をリンクにしたとき align="top"が効かない
サムネイル画像をリンクにしたときに横に"＊"を画像topと揃えて表示したいのですが、 <A HREF="リンク先"><img border="0" src="image.gif" align="top"></a>＊<br> 上記ソースで"＊"が下になってしまうのはなぜでしょうか。 解決策がありましたら、ご教示お願いします。
- ベストアンサー
- HTML
- CSSでリンクの表示をテキストと画像で変えたい
CSSを使って、 ・テキストのリンクのときは、 a:link で 常に点線のアンダーラインを表示 a:hover で マウスを重ねたとき色を変える ・画像のリンクのときは、 アンダーラインをださない a:hoverの動作をさせない という風にしたいのですがうまくいきません。 a:link { color: black; text-decoration: none; border-bottom-width: 1px; border-bottom-style: dotted; border-bottom-color: #333333; } a:hover { background-color: black; text-decoration: underline; color:white; } といった指定をして、テキストからのリンクに適用しています。そのうえで、画像には上記の設定が生きないようにしたいと思っていますがうまくいきません。 .bordernone { border: none; } と書いて、リンクの画像に <img src="image/xx.jpg" class="bordernone" style="border-style:none"> などとしてもうまくいきません。 よろしくお願いいたします。
- ベストアンサー
- CSS
お礼
ご回答ありがとうございます。 うーん・・・それをまんまコピペして試してみたのですが、下のような感じになって ┌┐ │画像 ││ │文字 └┘ width: 0pxを50pxとか100pxにすると枠が横に広がっていく感じです。 たしかにIE8で試しているのですが、みなさんのとは微妙に環境がずれているのでしょうか？