[css] a:hoverの背景画像に半透明PNGを使いたい
- IE6で、a:hoverの背景画像に半透明PNGを表示する方法が分からず、困っています。画像Ａ（normal.jpg）にマウスオーバーすると透明度15%白色の画像がかかり、少し白っぽくなるようにしたいです。
- 背景にnormal.jpgを指定し、a:hoverで半透明PNGがかぶさるようにしましたが、IEではうまく表示されません。AlphaImageLoaderを使用してもダメで、ブロック要素にしか効かないようです。
- 解決策を教えていただけませんか？画像Ａと画像Ｂを縦長につなげてhoverでズラす方法は使わず、別の方法を模索しています。
- ベストアンサー
[css] a:hoverの背景画像に半透明PNGを使いたい
いつもありがとうございます。 IE6で、a:hoverの背景画像に半透明PNGを表示する方法が分からず、困っています。 そもそものやりたいことは、 【画像Ａ（normal.jpg）にマウスオーバーすると、（透明度15%白色の画像がかかり）少し白っぽくなる】 です。画像Ａにはリンクを張ります。 下記のように、背景にnormal.jpgを指定し、a:hoverで半透明PNGがかぶさるようにしました。 firefoxなどではうまく行きました。 IE用に、AlphaImageLoaderを使ったのですが、ダメです。（効いてない時と同じ、薄い青グレーになります） ブロック要素にしかダメらしいので、くどくdisplay:blockを使ったのですが… どなたか解決策、教えていただけませんか！！？？ ※画像Ａと、画像Ａに白みがかった画像Ｂをつなげて縦長にして、 hoverでズラす方法は、無しでお願いします。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <html> <head> <style> * { margin: 0; padding: 0; border: 0; text-decoration: none; background: transparent; } #trans { width: 100px; height: 100px; background: url(img/normal.jpg) 0 0 no-repeat; } #trans a { display: block; width:100px; height:100px; background: none; } #trans a:hover { background: url(img/trans.png) 0 0 no-repeat; } * html #trans a:hover { display: block; width:100px; height:100px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='img/trans.png', sizingMethod='scale'); } </style> </head> <body> <div id="trans"> <a href="#">あああ</a> </div> </body> </html>
- asummer
- お礼率74% (52/70)
- ホームページ作成ソフト
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは 半透明PNGもAlphaImageLoaderも使用したことが無いので詳細は分からないのですが・・・こういう感じのものをしたいということですか？ <style type="text/css"><!-- .trans{ position:relative; width:100px; height:100px; } a { background-image:url("sample1.gif"); background-repeat:no-repeat; display:block; width:100px; height:100px; position:absolute; top:0px; left:0px; } a:hover { opacity:0.5; } span { position:absolute; top:0px; left:0px; color:red; } --></style> <!--[if IE]> <style type="text/css"><!-- a:hover { filter:alpha(opacity=50); } --></style> <![endif]--> <div class="trans"> <a href=""></a> <span>あああ</span> </div> ※透明度の設定が100％表示の内の15％なのか85％なのか分からなかったのでとりあえず50％にしてます opacity:0.5; filter:alpha(opacity=50); ※ダミースペースとなる .trans が必要なのでインライン上ではwidth:height:が取れない為使いにくいですが・・・
関連するQ&A
- 背景画像上に複数枚の画像配置について
お世話になります。 まだまだcss勉強中なので教えて頂きたいことがございます。 １枚の背景画像に対し、別箇所にマウスオーバー時のみ表示されるように複数枚画像を配置し、そのマウスオーバー用の複数枚の画像にリンクタグをつけて、別ページへのリンクを貼りたいのです。 しかし、ネットで調べた方法ですと、うまくマウスオーバーが反映されず 余計な画像も出てきてしまいます。 おそらく間違ったcssを記述していると思うので ご指摘いただけると助かります。 -------------------------------------------------------------- 【html】 <div class="demo"> <div class="demo1"><a href="#"></a></div> <div class="demo2"><a href="#"></a></div> <div class="demo3"><a href="#"></a></div> <div class="demo4"><a href="#"></a></div> <div class="demo5"><a href="#"></a></div> </div> 【css】 .demo { background: url("../img/imgbg.jpg") no-repeat; display: block; width: 800px; height: 1108px; } .demo1 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo1 a:hover { background-image: url("../img/img1.png"); position:relative; top:475px; left:635px; display:block; } .demo2 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo2 a:hover { background-image: url("../img/img2.png"); position:relative; top:469px; left:480px; display:block; } .demo3 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; } .demo3 a:hover { background-image: url("../img/img3.png"); position:relative; top:477px; left:322px; display:block; } .demo4 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo4 a:hover { background-image: url("../img/im4.png"); position:relative; top:477px; left:167px; display:block; } .demo5 a { width: 800px; height: 1108px; background: url("../img/imgbg.jpg") no-repeat; display: block; position:absolute; /*text-indent: -9999px;*/ } .demo5 a:hover { background-image: url("../img/img5.png"); position:relative; top:477px; left:10px; display:block; } -------------------------------------------------------------- a のクラスの時に背景画像を指定しなくても良いんじゃないかと思い 消してみたら画像が表示されなくなってしまったので そのまま記載しています。 上記の記述のままですと、マウスオーバーが正しく反応しないですし マウスオーバー時に別箇所に背景画像が表示されてしまいます。 やりたいことは画像にしましたのでご確認ください 黒○は背景画像内にある形で、その上に同じ形の赤○を マウスオーバー時の画像として表示したいです。 （図が下手ですみません） わかる方、ご教示をお願いします。
- 締切済み
- CSS
- IE6バグ css hover
いつもお世話になってます。 宜しくお願い致します。 クロム、firefox、オペラ、サファリ、IE7、IE8ですと、 正常に動作するのですが、IE6だけ動作しません。 (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。 何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML
- css hover ie6
いつもお世話になってます。 宜しくお願い致します。 クロム、firefox、オペラ、サファリ、IE7、IE8ですと、 正常に動作するのですが、IE6だけ動作しません。 cssハックは使用していません。(ieのばーじょんごとにcssを切り替えているためです。) (IEでaタグ以外にhoverを効かせる方法で、サイトからcsshover.htcファイルをインストールし適用させています) 動作内容：画像にマウスがのったら、その画像が別画像に切り替われば正常動作です。切り替わる画像は元画像と同じサイズです。 何卒、お願いします。 htmlソース <dl id="dl1"> <dt id="dt1"><a href="#"><img src="img/main-content-image1.jpg" alt="メインコンテンツ画像1" width="170" height="170" /></a></dt> <dd class="dd"><a href="#">あああああああ</a></dd> </dl> cssソース #dl1 { border-style: none; width: 170px; height: 170px; padding: 10px 10px 0px 35px; margin: 0; float: left; line-height: 0px; font-size: 0px; } #dt1 a { display: block; with: 170px; height: 170px; background-position:left top; background-repeat:no-repeat; text-decoration: none; } #dt1 a img { text-decoration: none; border-style: none; } #dt1 a:hover { background-image: url(img/main-content-image1-2.jpg); text-decoration: none; } #dt1 a:hover img { visibility: hidden; text-decoration: none; border-style: none; } .dd { width: 170px; height: 40px; margin: 0px; color: #ffffff; font-size: 12px; line-height: 16px; padding: 0; } .dd a { padding: 0; margin: 0; text-decoration: none; color: #ffffff; } .dd a:hover { text-decoration: underline; color: #ffffff; }
- 締切済み
- HTML
- 画像をずらしてhoverしたいのですがIE7では×
一枚の画像をずらしてロールオーバーさせてナビをつくったのですが、ＩＥ7以外の全ブラウザではうまくいきますが、唯一IE7だけはうまくいきません。 5つのナビボタンのうち、左3つがポイントしても矢印と画像が変わりません。 ですが、それはトップページのナビだけの話で、他のページは普通にロールオーバーします。 ナビの部分はDreamweaverのテンプレートで編集不可能領域に含まれてますので、全ページのコードは同一です。 以下、コードです。 <!--HTML--> <body> <div id="container"> <div id="hedder"> <div id="toprogo"><a href="index.html"><img src="○○"/></a></div> <div id="main_image"><img src="○○"/></div> <div id="navi"> <div id="top"><a href="index.html"/></a></div> <div id="kodawari"><a href="particular.html" /></a></div> <div id="catalog"><a href="goods-catalog.html" /></a></div> <div id="from_producer"><a href="index.html" /></a></div> <div id="contact"><a href="mailto:" /></a></div> </div> </div> </div> </body> <!--ここからcss--> body { font-family:"ＭＳ ゴシック", "MS Gothic", "Osaka－等幅", Osaka-mono, monospace; color: #473906; background-color: #fafde1 ; } img { border: none; } a { color: #473906; text-decoration: none; } a:hover { color: #ff0000; } #container { width: 950px; margin: auto; } #hedder { widht: 950px; height: 380px; } #top_logo {margin-top: 10px; } #main_image { width: 950px; height: 300px; margin-top: 10px; } #navi { margin-top: 20px; /margin-top: 0 ; } #top a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px 0px; display: block; float: left; } #top a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: 0px -50px; display: block; float: left; } #kodawari a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px 0px; display: block; float: left; } #kodawari a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -190px -50px; display: block; float: left; } #catalog a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px 0px; display: block; float: left; } #catalog a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -380px -50px; display: block; float: left; } #from_producer a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px 0px; display: block; float: left; } #from_producer a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -570px -50px; display: block; float: left; } #contact a { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px 0px; display: block; float: left; } #contact a:hover { width: 190px; height: 50px; margin-top: 30px; background-image: url(images/navi/navi.gif); background-repeat: no-repeat; background-position: -760px -50px; display: block; float: left; } つめて見にくくなっていますが、お願いいたします。
- ベストアンサー
- CSS
- １番右側の画像のhoverだけ位置をずらしたい
テーブル内の画像にcssでマウスオーバーで拡大画像が出るように設定しましたが、 一番右の列をマウスオーバーすると画面からその拡大画像が消えてしまうため、 この列のみもう少し左側に画像が出るようにしたいのですが、どう記述したらよいのか分かりません。 http://okwave.jp/qa/q6343605.html ↑この回答がかなり核心をついているのですが、私の記述で言うところの隣接セレクタってどこなのか分かりません。。 現在設定しているのは下記のコードです。 どなたかご教授下さい。 【html】 <tr><td class="type1" td colspan="2" scope="col" align="center" valign="middle"><a href="#" id="hover"><img src="●●.jpg" width="100" height="100" alt="ec"/></a></td> </a></td> </tr> 【css】 td.type1 { height: 185px; width: 185px; background-color:#FFF; } a#hover img{ border:none; padding:5px; width:100px; height:100px; border: 1px solid #CCC; } a#hover{ display:block; width:100px; height:100px; } a#hover:hover img{ width:300px; height:300px; position:absolute; padding:5px; border: 1px solid #CCC; background-color:#FFF; } ちなみにtdが４つ入ります。（画像は横に４つ入り、一番右側というのは４番目になります）
- 締切済み
- CSS
- １枚画像で作るCSSのナビゲーション・ロールオーバーが上手く動作しません。
はじめまして。初歩的な質問で非常に申し訳ないのですが 今日１日自力で頑張ってみたのですがどうしても解決できないので、ご教授いただけないかと思い書き込ませていただきました・・・・。 ナビゲーションメニューを作っているのですが、 １枚画像でロールオーバーという方法でやっています。 [やりたいこと] 「横978px 縦40pxの画像を使って ６つのメニューに分けて、ロールオーバーをしているようにみせる」 [うまくいかない事] ・横並びにしたいのに、なぜか画像が縦に６つ並んでしまっている状態。 ・最初の「home」以外が全くロールオーバーしてくれない・・・ どこかおかしなところがあれば教えてください・・ よろしくお願いいたします。 【HTML】 <div id="navigation"> <ul> <li id="bttop"><a href="#" title="Home">Home</a></li> <li id="btdai"><a href="#" title="menu1">menu1</a></li> <li id="btsyo"><a href="#" title="menu2">menu2</a></li> <li id="btweb"><a href="#" title="menu3">menu3</a></li> <li id="btmap"><a href="#" title="menu4">menu4</a></li> <li id="bttel"><a href="#" title="menu5">menu5</a></li> </ul> </div> 【CSS】 #navigation { position: absolute; width: 978px; } #navigation ul { width: 978px; height:40px; margin: 0; padding: 0; list-style: none; } #navigation li { margin: 0; padding: 0; width: 978px; height: 40px; text-indent: -9999px; } #navigation li a { width: 163px; height: 40px; text-decoration: none; display: block; float:left; } #navigation li#bttop { background: url(img/navi_bar.jpg) no-repeat 0px 0px; } #navigation li#btdai { background: url(img/navi_bar.jpg) no-repeat 163px 0px; } #navigation li#btsyo { background: url(img/navi_bar.jpg) no-repeat 326px 0px; } #navigation li#btweb { background: url(img/navi_bar.jpg) no-repeat 489px 0px; } #navigation li#btmap { background: url(img/navi_bar.jpg) no-repeat 652px 0px; } #navigation li#bttel { background: url(img/navi_bar.jpg) no-repeat 815px 0px; } /* マウスオーバー時の指定 ---------------------------------------------------- */ #navigation li#bttop a:hover { background: url(img/navi_bar.jpg) no-repeat 0px -40px; } #navigation li#btdai a:hover { background: url(img/navi_bar.jpg) no-repeat 163px -40px; } #navigation li#btsyo a:hover { background: url(img/navi_bar.jpg) no-repeat 326px -40px; } #navigation li#btweb a:hover { background: url(img/navi_bar.jpg) no-repeat 489px -40px; } #navigation li#btmap a:hover { background: url(img/navi_bar.jpg) no-repeat 652px -40px; } #navigation li#bttel a:hover { background: url(img/navi_bar.jpg) no-repeat 815px -40px; }
- 締切済み
- デザイナー・クリエイティブ職
- firefoxではcssで画像をプリロードができません
リンクの貼られた画像に触れると画像が変化させようと 以下のコードを使ってみました。 IE、Operaではできたのですがfirefoxではもともと表示されてるはずの画像も触れたときに表示される画像も表示されません。 何かやり方があるのでしょうか？ ■html <p class="xxx"><a href="#">sample</a></p> ■css p.xxx{ background:url("img01/a_img.gif") no-repeat; } p.xxx a{ display:block; width:200px; height:50px; background:url("img01/b_img.gif"); text-indent:-9999px; } p.xxx a:hover{ background:none; }
- ベストアンサー
- CSS
- CSSでの画像メニューの設定について
現在CSSの勉強中です。 外部CSSで画像を使用してリンクメニューを作ったのですが、 やり方があっているか確認をお願いしたいのですが。 off時の画像（白）、ページのin時の画像（赤）、hover（青）の画像を用意しています。 CSS部分▼ .navi01 a{ width:102px; height:43px; background-image:url(common/img/navi_top_off.gif); background-repeat:no-repeat; } .navi01_on a{ width:102px; height:43px; background-image:url(common/img/navi_top_on.gif); background-repeat:no-repeat; } .navi01 a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } .navi01_on a:hover{ width:102px; height:43px; background-image:url(common/img/navi_top_hover.gif); background-repeat:no-repeat; } HTML部分▼ <li class="navi01_on"><a href="index.html" title="トップページ"><span class="none">トップページ</span></a></li> <li class="navi02"><a href="work.html" title="仕事内容"><span class="none">仕事内容</span></a></li> CSSの講座のページなどを見ると、設定がもうすこし少なくても うまく動いていたりして、無駄な部分があるのではと思っています。 今の私の知識ではどこが悪いのか分からないので、 教えて頂けると幸いです。 （もし良い講座のページ、本がありましたら教えて頂ければと思います。） 宜しくお願い致します。
- ベストアンサー
- CSS
- css 画像の一部分をリンクにしたいです
画像の一部分だけをリンクにしたいです。 margin と width と height で指定したエリアをマウスオーバーすると、指定した部分だけ画像が変わってリンクになるという動作をさせたいのですが、うまくいきません。 最悪、画像が変わらなくても指定した部分のリンクができれば良いのですが画像全体がリンクになっているため、全体画像の上でマウスを動かしていると、リンク時のマウスカーソルになったり通常時のマウスカーソルになったりを繰り返しています。 html と css は以下のような記述をしています。 <html> <head> <style type="text/css"> div#menu a:hover { display:block; background-image:url(img/headerimg02.jpg); background-repeat:no-repeat; margin: 50px 468px 250px 50px; width:200px; height:100px; text-align:center; text-indent: -2000px; overflow: hidden; } </style> </head> <body> <div id="menu"> <a href="hoge.html"><img src="img/headerimg01.jpg" width="718" height="400"></a> </div> </body> </html>
- ベストアンサー
- CSS
- リストタグでのナビゲーションボタンで、背景画像が表示されません。
winIE6では正常に表示されるのですが、 safariだとまったくcssが無視され、横並びにもならない始末です(^_^;) どなたかご教授お願いいたします。 ■html <div id="header"> <ul id="headerMenu"> <li id="home"><a href="index.html">ホーム</a></li> <li id="sitemap"><a href="sitemap.html">サイトマップ</a></li> <li id="recruit"><a href="recruit.html">リクルート</a></li> <li id="contact"><a href="contact.html">お問合せ</a></li> </ul> </div> ■css #header { width:100%; height:107px; margin:0px; padding:0px; position: relative; font-size:12px; background:url("img/top.gif") no-repeat; } #headerMenu{ list-style-type:none; padding:0px; margin:6px 0px 0px 532px; } #headerMenu li { display:inline; padding:0; margin:0px; float:left; } #headerMenu a { display:block; text-decoration:none; text-indent:-5000px; height:25px; } #home { display:block; background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; width:63px; background-position:0px 0px; } #home a:hover { background-image: url("img/topmenu_01.gif"); background-repeat: no-repeat; background-position:0px -25px; } #sitemap { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; width:90px; background-position:0px 0px; } #sitemap a:hover { background-image: url("img/topmenu_02.gif"); background-repeat: no-repeat; background-position:0px -25px; } #recruit { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #recruit a:hover { background-image: url("img/topmenu_04.gif"); background-repeat: no-repeat; background-position:0px -25px; } #contact { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; width:82px; background-position:0px 0px; } #contact a:hover { background-image: url("img/topmenu_05.gif"); background-repeat: no-repeat; background-position:0px -25px; }
- 締切済み
- CSS
お礼
うわあ、ありがとうございます！ そう、そういう感じのことをしたかったのです！ 教えていただいた、透明度の設定を使って、できました！！ こんな感じにしました。 ベースの画像は、htmlに<img>で大丈夫でした（本当はそうしたかったのです） 超ありがとうございましたーー #trans a { display: block; width:100px; height:100px; background: none; } #trans a:hover { background: url(img/white.jpg) 0 0 no-repeat; opacity:0.85; } * html #trans a:hover { filter:alpha(opacity=85); }