- ベストアンサー
半透明なGIFの作成方法
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
「半透明の画像」というのは作成できません。 1ドットずつ密かに透過されている透過GIFを作成するか、スタイルシートを利用してください。 （前者の方法は、恐らくすごく汚く見えると思います。） スタイルシートを使用する場合、 ＞<img src="b.gif"> の部分を <img src="b.gif" style="filter: Alpha(opacity=50);"> と修正してください。 opacity=50 が透明度で、0（透明）～100（不透明）で指定します。
その他の回答 (1)
純粋にHTMLを使う方法は無理です。 #1のように、スタイルシートを使う方法もあるようですが、OSやブラウザによっては対応してない場合があるので、もともとaとbを合成して透けたように見える絵を１枚貼った方がよいと思います。 申し訳ないのですが、Fireworksではやり方は分かりません。Photoshopでは簡単にできます。
お礼
返答ありがとうございます。 PhotoShopの方、調べてみます。
関連するQ&A
- HTMLでHP制作、画像の横にアンダーバーが出てしまいます
現在HTMLを使ってHPを制作中です。 HTMLは初心者で、ウェブや本を参考して作っています。 そこで問題が発生しました。回答よろしくお願いします。 以下のHTMLタグを入れたところ（○○以外はコピペしました）、 <HTML> <HEAD> <TITLE>○○○</TITLE> </HEAD> <BODY BGCOLOR="#FFFFFF" TEXT="#000000" LEFTMARGIN="0" RIGHTMARGIN="0" TOPMARGIN="20" BOTTOMMARGIN="0" BACKGROUND="○○.gif"> <DIV ALIGN="CENTER"> <IMG SRC="○○.gif"> <A HREF="○○.htm"><IMG SRC="○○.gif" BORDER="0"> <A HREF="○○.htm"><IMG SRC="○○.gif" BORDER="0"> <A HREF="○○.htm"><IMG SRC="○○.gif" BORDER="0"></A> <IMG SRC="○○.jpg" WIDTH="200" HEIGHT="159"> </DIV> </BODY> </HTML> htmで確認したところ、 2と3個目のIMGの横（右下）に小さなアンダーバーのようなものが表示されてしまいます。 これを表示しないようにしたいのですが、調べても解決しませんでした。 初心者なもので、質問する内容に情報が足りなかったら教えて下さい。 回答、よろしくお願いします！
- ベストアンサー
- HTML
- changeimgの際のalt設定
head部分の記述 <!-- function changeimg(src) { document.getElementById("img").src = src; } //--> </script> body部分の記述 <a href="javascript:changeimg('./img/img02.gif');">02の絵です</a> <img src="./img/img01.gif" alt="01の絵" id="img" width=100 height=100> このようにすると「02の絵です」をクリックすると01の絵が02に変わる、というのを、検索して見つけました。 これを使いたいのですが、img02.gifにalt属性をつけるには、どのようにしたらよいでしょうか。 よろしくお願いします。
- ベストアンサー
- JavaScript
- ヤフ－の検索にかからなくなりました。
ヤフ－の検索にかからなくなりました。 以下そのページのソースですが、不都合があるでしょうか？ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"> <html> <head> <titl>***************</title> <meta name="keywords" content="*****************************"> <meta name="description" content="*******************************"> <STYLE type="text/css"> <!-- BODY { background-color: #------; background-image : url("ind_back.gif"); background-repeat: repeat-x; background-position: bottom; background-attachment: fixed; } --> </STYLE> </head> <body bgcolor="*********************"> <br> <br> <!-- ロゴ --> <div Align="center"> <img src="a.gif" border="0" alt="ロゴ"> <br><br><br><br> <!-- 写真と説明文 --> <img src="main_photo2.jpg" border="0" alt="**********"><br> <span style="font-size: 13px;line-height:150%"> （***********************） </span> <br><br><br> <span style="font-size: 16px;line-height:150%"><font color="#000099" face="MS UI Gothic"> <b>******</b>***************************<br> </font></span> <br><br> <A href="top/top.htm"><img src="1.gif" onmouseover="this.src='2.gif'" onmouseout="this.src='1.gif'" border="0" alt="入口"></a></div> </body> </html>
- ベストアンサー
- その他（インターネット・Webサービス）
- JavaScriptでリクエストを飛ばす方法を教えて下さい。
下記内容で画像の切り替えを教えて頂いたのですがこれに 画像をクリックした時にサーバー側にクリックした事を分るために URL（リクエスト）をバックグラウンド（非同期かな）で渡したいと 思います。 どうしたら良いでしょうか？？ ブラウザーの画面は画像をクリックしても切り替わりません。 誠に恐縮ですが下記ソースに追加して教えて頂ければと思います。 何卒よろしくお願いします。 <html> <head> <script type="text/javascript"><!-- function clickImg( img ) { var arraySrc = img.src.split( '/' ); var src = arraySrc[arraySrc.length - 1]; if( src == "a.jpg" ) { document.cookie = "click=1;"; img.src = "b.jpg"; img.style.cursor = "default"; } } function init() { if( document.cookie ) { var img = document.getElementById( "img1" ); document.getElementById( "img1" ).src = "b.jpg"; img.style.cursor = "default"; } } //--></script> </head> <body onload="init();"> <img src="a.jpg" id="img1" style="cursor:pointer;" onclick="clickImg(this);" /> </body> </html>
- 締切済み
- JavaScript
- NNでロールオーバーしたgifアニメの動きがおかしい
ホームページを作成し、onmouseするとメニューのアイコンが gifからgifアニメに切り替わるようにしています。 IE6.0とNN7.1で動作確認しているのですが、 NNの方で、画像は切り替わるのですがgifアニメが うまく動きません。IEでは問題なく動作します。 gifアニメは文字の色が順番に変わるアニメーションなのですが、 onmouseするとアニメーションの最後の画像が表示されるだけでうまく動きません。 プログラムの組み方が悪いのか、gifアニメが悪いのか、 NNが悪いのかわからず困っています。 <head>と</head>の間↓ <script language="JavaScript"> <!-- if(document.images){ a1=new Image(); a1.src="image/b_top_m.gif"; a2=new Image(); a2.src="image/b_top.gif"; } else{ a1="" a2="" b1="" b2="" document.a="" } --> </script> <body>と<body>の間↓ <a href="top/top_frame.html" target="mid" onMouseover="document.a.src='image/b_top_m.gif'" onmouseout="document.a.src='image/b_top.gif'"> <img src="image/b_top.gif" border="0" alt="top page" name="a"></a> <a href="gal/gal_frame.html" target="mid" onMouseover="document.b.src='image/b_gallery_m.gif'" onmouseout="document.b.src='image/b_gallery.gif'"> <img src="image/b_gallery.gif" border="0" alt="works" name="b"></a> まだ初心者でJavaScriptについてはよくわかりません。 ちなみに、１つ「"」を抜いてエラーにするときちんと動いたりします(-_-;) よろしくお願い致します。
- ベストアンサー
- JavaScript
- 画像を変えるスクリプト
<HTML> <HEAD> <TITLE></TITLE> <SCRIPT language="JavaScript"> <!-- img=new Array(); for(i=1;i<=4;i++){ img[i]=new Image(); img[i].src="img"+i+".gif"; } function changeImage(i,j){ document.images[i].src=img[j].src; } // --> </SCRIPT> </HEAD> <BODY> <CENTER> <A href="#" onMouseOver="changeImage(0,2)" onMouseOut="changeImage(0,1)"><IMG src="img1.gif" border=0></A><BR> <BR> <A href="#" onMouseOver="changeImage(1,4)" onMouseOut="changeImage(1,3)"><IMG src="img3.gif" border=0></A> </CENTER> </BODY> </HTML> マウスオーバーしたら画像が変わるスクリプトです。 質問ですがこのスクリプトでどうしてオブジェクトを作っているのでしょうか？ 普通にsrcプロパティを変更するだけではだめなのでしょうか？例えばdocument.images[i].src="img"＋j＋".gif"のようにしてiとjを変えるような 感じです。
- ベストアンサー
- JavaScript
- ホームページ作成で画像が表示されません
すみません、初心者でよく分かりません。 ＨＰの作成練習中なのですが、ブラウザで確認すると画像が×（バツ）のまま表示されません。 ファイル名やパスの打ち間違いは確認したのですが、他に何を確認したら解決しますでしょうか。 （ちなみに他のページでは表示されます。） 下記書いた内容です。 <BODY bgcolor="lightgreen" background="image/壁３.jpg"> <center> <IMG SRC="image2/tis12-g-top.gif"><BR><BR> <IMG SRC="image2/tis12-g.gif"><BR><BR> <IMG SRC="image2/tis12-g-diary.gif"><BR><BR> <IMG SRC="image2/tis12-g-bbs.gif"><BR><BR> <IMG SRC="image2/tis12-g-links.gif"><BR><BR> <IMG SRC="image2/tis12-g-mail.gif"><BR><BR> </center> </BODY> どうそよろしくお願い致します。
- ベストアンサー
- レンタルサーバ・ASP
- slide showについて
下記に書かれているスクリプトの中の"konpira.gif"と"konpira1.gif"の画像がスライドされません。なぜでしょうか？教えてください。 <head> <script language="JavaScript"> var img = 1; fileName = new Array("goshikihama1.gif","suisen1.gif","sumotojou.gif","narutokouen.gif","konpira.gif","konpira1.gif"); function img_chg(){ document.IMG_A.src = fileName[img]; img++; if(img>3)img = 0; } </script> </head> <body> <center> <img src="hotel.gif" name="IMG_A"> <br> <br> <input type="button" value="NEXT" onclick="img_chg()"> </center> </body>
- ベストアンサー
- JavaScript
- Javascript外部リンクの書き方（初心者）
以下のJavascriptを外部リンクにしたいのですが、記述の仕方が分かりませんので、お教えください。 （引用元：Javascript例文辞典） <html> <head> <title>一定時間ごと画像を入れ替える（複数箇所に異なる画像［規則的なファイル名版］）</title> <script language="JavaScript"><!-- count = 0; function changeImg() { count++; count %= 4; document.btn1.src = "a" + count + ".gif"; document.btn2.src = "b" + count + ".gif"; } // --></script> </head> <body onLoad="setInterval('changeImg()',2000)"> <img src="a1.gif" name="btn1"> <img src="b1.gif" name="btn2"> </body> </html>
- ベストアンサー
- JavaScript
- ｓｌｉｄｅ ｓｈｏｗについて(2)
下記に書かれているスクリプトの中の"goshikihama1.gif"という画像が一番最初にスライドされません。なぜでしょうか？教えてください。 <head> <script language="JavaScript"> var img = 1; fileName = new Array("goshikihama1.gif","suisen1.gif","sumotojou.gif","narutokouen.gif","konpira.gif","konpira1.gif"); function img_chg(){ document.IMG_A.src = fileName[img]; img++; if(img>3)img = 0; } </script> </head> <body> <center> <img src="hotel.gif" name="IMG_A"> <br> <br> <input type="button" value="NEXT" onclick="img_chg()"> </center> </body>
- ベストアンサー
- JavaScript
お礼
返答ありがとうございます。 CSSのフィルタですよね。IEのみ対応だったと思います。 今、PNGでアルファチャンネルというのを調べています。 もし、Knowhowをもっていたら、よろしくお願いいたします。