- ベストアンサー
背景画像が透けて見えるボタンの作り方
tsucuの回答
- tsucu
- ベストアンサー率62% (71/113)
IE6での表示はかなり特殊な方法になります。 この方法は指定されたボックス内の画像ををすり替えて表示させます。 具体的には<img>タグで指定している画像をCSSで見えないように設定して、IEの独自機能のFilterで画像を直接指定して描写します。 しかし、問題点としまして、IE6では<img>に定義した<a>タグが機能しなくなります。 透過PINGはちゃんと表示されても、onyanさんが行おうとしているボタンとしての機能が使えなくなるということです。 回避方法は、私の経験ではボックス自体に<a>タグを使うことなんですが、はっきり言ってHTMLの書き方としては正しくないです。主要ブラウザでは問題なく動作しますが、あまりお勧めできないです。 それを踏まえたうえで行ってください。 onyanさんの書き方に準じてCSSを適用しますと下記のようになります。 これはサイトで紹介されている方法です。透過PINGを全て記述する必要があります。 ■<head>タグ内の記述 <style type="text/css"> <!-- #main { position: absolute; top: 350px; left: 123px; width: 543px; } #main img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #bt1,#bt2,#bt3 { float: left; cursor: pointer; } * html #main #bt1 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt1.png); } * html #main #bt1 img { display:none; } * html #main #bt2 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt2.png); } * html #main #bt3 img { display:none; } * html #main #bt3 { width:180px; height:50px; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src=img/bt3.png); } * html #main #bt2 img { display:none; } --> </style> ■<td>タグ内の記述 <div id="main"> <a href="#"><div id="bt1"><img src="img/bt1.png" width="180" height="50" /></div></a> <a href="#"><div id="bt2"><img src="img/bt2.png" width="180" height="50" /></div></a> <a href="#"><div id="bt3"><img src="img/bt3.png" width="180" height="50" /></div></a> </div> Javascriptを使った方法もあります。こちらはいちいち個別に定義する必要はありません。 ■<head>タグ内の記述 <style type="text/css"> <!-- #main { position: absolute; top: 350px; left: 123px; width: 543px; } #main img { border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; } #main .bt { float: left; cursor: pointer; margin: 0; padding: 0; } --> </style> <!--[if IE 5.5000 | IE 6]> <style type="text/css"> .bt { filter: expression("progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.firstChild.src + ", sizingMethod=scale)"); width: expression(this.firstChild.clientWidth+"px"); height: expression(this.firstChild.clientHeight+"px"); } .bt img { visibility: expression("hidden");} </style> <![endif]--> ■<td>タグ内の記述 <div id="main"> <a href="#"><div class="bt"><img src="img/bt1.png" width="180" height="50" /></div></a> <a href="#"><div class="bt"><img src="img/bt2.png" width="180" height="50" /></div></a> <a href="#"><div class="bt"><img src="img/bt3.png" width="180" height="50" /></div></a> </div>
関連するQ&A
- DreamweaverCS４で表の背景画像
DreamweaverCS4を使用しています。 以前は、Dreamweaver８を使用していました。 ８では、表の背景に画像を表示するときに、プロパティーに 「表の背景」のところにイメージを表示できるようにフォルダ参照ボタンがあったのですが、CS4には背景にはカラー設定しかありません。 なぜでしょうか？直接HTMLのコードに下記のように書き込まなければいけなくなってしまったのでしょうか？ background="画像.gif" それとも、何か設定があるのでしょうか？ どなたかわかる方よろしくお願いします。
- ベストアンサー
- HTML
- macromedia fireworks8での、画像編集方法について
macromedia fireworks8で作成した画像の背景を透過にする設定が見つかりません。 どこにあるのか教えていただきたいのですが、よろしくお願いします。 画像はボタンです。四隅の角が丸いので、htmlに貼り付けると白く見えて汚いです。gif・pngならば、背景色を透過にする設定があるのですが、最近、使い始めた、fireworksのどこをいじればいいのかわからず困ってます。
- 締切済み
- ホームページ作成ソフト
- 画像の背景色とHTMLファイルの背景色
私がWebページを制作している環境は下記のようになっています。 OSはWindowsXP。 モニターは液晶モニター。 DreamWeaver3でWebページを制作。 FlashMX、FireworksMXを使って、ムービーコンテンツ、画像を作成。 Fireworksで制作した画像をPhotoshop7でJPG形式に変換。（最高画質・低圧縮率で変換） 【ここからが質問です】 DreamWeaverで設定したHTMLファイルの背景色＆Flashコンテンツの背景色と PhotoshopでJPGに変換した画像の背景色を 同じカラーコードにしても、 ウィンドウズのプロパティで画面の色を16ビットにすると Webブラウザ上で違った色に見えてしまいます。 （32ビットだと大丈夫） Fierworksで制作したPNG形式の画像をUPすると 色の違いが無くなるのですが JPG形式に変換した画像だとダメです。 このブラウザ上での色の見え方の違いを解決することは出来ないのでしょうか？ 仕方のないことなのでしょうか？ お分かりになる方、教えてくださると助かります。 よろしくお願いします。
- 締切済み
- グラフィックソフト
- Dreamweaverで背景に画像を取り込む方法
Dreamweaver3Jで、背景に自分で作ったGIF画像を取り込みたいのですが、取り込んだ際にGIF画像が何度もリピートしてしまい、うまく配置出来ません。リピートさせたくないのですが、どうすればよいのでしょうか？ページプロパティで設定できるような所は見当たりません。どうか宜しくお願いいたします。環境はWin98で800x600の画面です。
- ベストアンサー
- グラフィックソフト
- Fireworksのボタン！！
別カテゴリにも質問させていただいたのですが・・・ Fireworks４を使用しています。 シンボルに変換>ボタン にして アップ、オーバー、ダウン、オーバーダウン と作成、プレビューでは見れるのですが GIFに書き出ししてDreamweaverのファイルで使用、 ブラウザでチェックするとオーバーなどのイメージが変化せず アップの状態のままなのです。 書き出しの際”スライスの書き出し”も洗濯しているのですが どうすればボタンとしてアップ・オーバーの イメージが出るようになりますでしょうか。
- 締切済み
- CSS
- Fireworksを使ったGIF画像の保存について
DreamweaverとFireworksを使ってHomePageを作っています。 その途中、88×31ピクセルのリンクバナーをFireworksで 作っていたのですが、これをGIF形式で保存したところ、 ファイルサイズが13.2KBとなりました。 ファイルサイズが大きすぎるのではないかと思い いろいろ試しましたが、Fireworksでは結局うまくいかず、 最終的にFireworksで作ったGIF画像をWindowsのペイントを使って再度 GIF形式で保存しなおしたところ、サイズが1.2KBまで激減しました。 なぜこのようなことがおきるのかと、Fireworks上での対処法が あるのなら、わかる方がいればお教えください。 P.S.ペイント利用の方法では、アニメーションGIFが作れず困っております。
- 締切済み
- その他([技術者向] コンピューター)
- 画像の背景を透明にするには？
javaで単純なゲーム（アルカノイドのような）を作っていまして ボールの画像（●です。）の作成で困っています。 ペイントで作成していますが、 gif形式で保存すると、 この画像の背景が透明になりません。 ゲームを実行すると ボールの画像ファイルの四角い形が動いているのが丸見えです。 画像の背景を透明にできる（gifで保存できる） お薦めのフリーソフトがあったら、教えてください。
- ベストアンサー
- フリーウェア・フリーソフト
- jpg画像の背景を透明にしたい
自作ＤＶＤレーベル画像に、フリーソフトのDeepBurnerを使って、ロゴ（gif形式）を付けたいのですが、DeepBurnerではgif形式が使えず、jpgで貼り付けますと、ロゴの背景が四角く白く出てしまいます。 jpg形式で背景を透明化できないものかとフォトショップでいろいろ試してみましたが、できませんでした。 レーベル画像に、背景なしの、文字だけのロゴを付けたいのですが、どうすれば良いでしょうか？説明不足でしたらすみません！
- ベストアンサー
- その他(ソフトウェア)
- ＦｉｒｅＷｏｒｋｓで作った画像をＤｒｅａｍＷｅａｖｅｒに・・
お世話になっています。 FireWorksでほぼまるまるトップページを作成して、 ボタン部分をスライスして、 シンプルロールオーバーで、マウスを乗せると色が変わる設定をしました。 FireWorksからブラウザで確認すると、ちゃんとうごきます。 書き出すときに、 ファイルの種類・・HTMLとイメージ HTML・・HTMLファイルを書き出し スライス・・スライスの書き出し を選びました。 これをDreamWeaverに読み込む前に他になにか注意することはありますか・・？DreamWeaverでは動きません・・。 DreamWeaverに読み込むときというのは、ひょっとして 書き出したときにたくさん出てきたスライス部分の 画像を配置するのでしょうか・・？ 全然見当違いのことを言ってたらすみません・・。 よろしくお願いします。
- 締切済み
- ホームページ作成ソフト
- 背景画像が半分しか表示されない
H.Pをdreamweaver mx 2004で作ったのですが、背景画像が半分しか表示されません。 自分のパソコン内でinternet explorer5.2に、あげると全て表示されています。 しかし、ホームページ先に転送してアップすると、背景の画像が半分しか表示されなくなります。 背景の絵が重いのかと思って、軽くしたりしてますが結果は変わりません。 背景の画像形式はgifです。 分かりにくい文章なうえ、情報も少なくて申し訳ないのですが、タグなどはイマイチ分からない為、貼付けようにもどこまでを貼付ければよいのかわかりませんでした。 原因が分かる方教えては頂けませんか？
- ベストアンサー
- HTML
お礼
ご回答ありがとうございます！ 教えていただいたソースをそのままコピペしたところ 半透明のボタンができました＼(^o^)／ ただ、ブラウザの大きさを変えるとボタンの位置がずれてしまいます。 今のポジションが背景の左上からカウントしているからということでしょうか？ 質問と違った内容になってきて申し訳ありませんが教えていただけると本当に嬉しいです。 よろしくお願いします。