- 締切済み
onclickイベントでフィルターを使用するには
初めて投函させていただきます。 表題の件ですが、onclickでPNG形式のアルファチャンネル画像を使用したく悩んでおります。 通常 <img src="image1.png" onclick="img1.src='image2.png'"> でイメージの変更が出来ますが、これをPNG形式のアルファチャンネル画像で処理したいのですが 記述がわかりません。 PNG形式のアルファチャンネル画像を表示するには <div style="width:100;height:50; filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image1.png');"> </div> のようなフィルタで可能ですがonclickのようなイベントにくっつけるにはどうしたら良いでしょうか? 「image1.png」「image2.png」共にPNG形式のアルファチャンネル有効画像です。 どなたかわかる方がおられましたら、ご教授ください。
- Harasin
- お礼率100% (1/1)
- JavaScript
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
みんなの回答
- a-kuma
- ベストアンサー率50% (1122/2211)
filter で、AlphaImageLoader を指定するスクリプトは、以下のような感じになるはずです。 <div onclick="this.style.filter=\"progid:DXImageTransform.Microsoft.AlphaImageLoader(src='image1.png')\""></div> ＃ 試してません m(_ _)m
関連するQ&A
- 画像切り替え
<div> <img src="image1" alt="" width="300" height="300" /><br /> <img src="image1" alt="" width="80" height="80" /> <img src="image2" alt="" width="80" height="80" /> <img src="image3" alt="" width="80" height="80" /> <div> 下の小さい画像にマウスが乗ったら、上の大きい画像に表示させたいのですが、どのように組んだらよろしいでしょうか、よろしくお願いいたします。
- ベストアンサー
- JavaScript
- 【jQuery】サムネイル
3つのサムネイル画像(.thumb)があります。 クリックした.thumbはopacityを1に、その他は0.5に切り替わる する方法を教えてください。 始めは1番目.thumbのopacityは1でお願いします。 ■html <div id="ph-wrap"> <div id="photo"> <p><img src="./img/photo1.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo2.png" width="480" height="320" alt="" /></p> <p><img src="./img/photo3.png" width="480" height="320" alt="" /></p> </div> <div id="thumb-wrap"> <p class="thumb"><img src="./img/photo1.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo2.png" width="120" height="80" alt="" /></p> <p class="thumb"><img src="./img/photo3.png" width="120" height="80" alt="" /></p> </div> </div> ■CSS(一部抜粋) #thumb-wrap{ float:left; margin:0 0 0 10px; padding:0; width:120px; } #thumb-wrap img{ width:120px; height:80px; cursor:pointer; opacity:0.5; -moz-opacity:0.5; /* Firefox */ filter: alpha(opacity=50); /* IE */ } .opc{ opacity:1.0; -moz-opacity:1; /* Firefox */ filter: alpha(opacity=100); /* IE */ } ■jQuery $(function () { var photoImg = "#photo img" var thumbWrapImg = "#thumb-wrap img" $("#photo p:gt(0)").hide(); $(thumbWrapImg).eq(0).css({"opacity":1}); $(thumbWrapImg).click(function () { $(this).animate({"opacity":1},100); $(photoImg).attr("src",$(this).attr("src")); }); });
- ベストアンサー
- JavaScript
- IE7で表示すると画像に隙間があきます。
WEBサイトを作っているのですがIE７で表示すると 画像と画像の間にスペースが出来てしまいます。 他のブラウザだとスペースが出来ないのですが原因は何なんでしょうか？ HTML <div id="sidebar"> <div id="sidebar-bg"> </div> <div id="image-navigation"> <div class="navi"> <ul> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="39" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> <li><a href="#.html" title="○○"><img src="images/○○.png" width="200" height="35" alt="○○" /></a></li> </ul> </div> </div> </div> CSS #sidebar{ width: 200px; float: left; } #sidebar-bg{ background-color: #FFF; filter:alpha(opacity=50); -moz-opacity: 0.5; opacity:0.5; position:absolute; left:0; top:42px; z-index:-1; width: 200px; height:100%; } ul, li { margin:0; padding:0; list-style:none; } #image-navigation ul li a { display:block; width:200px; }
- ベストアンサー
- HTML
- Ａｌｐｈａフィルタについて
こんにちは。質問させてください。 現在、alphaフィルタを使って、画像の背景を半透明にしたいと思っているのですが、どうしてもできません。 （確認はie6.0でも5.5でも行っています） ソースはタグ辞典を見ながら、下のようなものを組みました。 どこか間違っているでしょうか？ お教え頂ければうれしいです。 よろしくお願い致します！ <html> <head> <meta http-equiv="Content-STYLE-Type" content="text/css; charset=Shift_JIS"> <title>無題ドキュメント</title> <style type="text/css"> <!-- .alpha1{ filter:progid:DXImageTransform.Microsoft.alpha(style=2,opacity=100, finishopacity=40); } .alpha2{ filter:progid:DXImageTranceform.Microsoft.alpha(style=2,opacity=100, finishopacity=0); } --> </style> </head> <body bgcolor="#FFFFFF" text="#000000"> <img src="/jsg41044.jpg" width="700" height="466" class="alpha2"> </body> </html>
- ベストアンサー
- CSS
- onClickで指定した以外の画像も変わってしまう
Youtubeの動画をボタンを使って切り替えるように設定しています。 ＝＝＝＝＝＝＝＝＝＝ Youtube動画表示 ＝＝＝＝＝＝＝＝＝＝ ボタン１ ボタン２ ボタン３ という感じで配列しています。 ボタン１～３は、それぞれ同じ画像で表示しています。 btn.png：OFF時 btn_on.png：ON時 Javascriptは下記のように書いています。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ function change(obj){ var orgimg="img/btn.png"; var newimg="img/btn_on.png"; var imgs=document.getElementsByTagName('img') for(var i=0;i<imgs.length;i++){ if(imgs[i].className==obj.className){ if(imgs[i]==obj) imgs[i].src=newimg; else imgs[i].src=orgimg; } } }; ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ ボタン部分はそれぞれ下記のようにしています。 ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ <a href="http://www.youtube.com/watch?v=1111111" onclick="return Obj.replaceObject(this.href);"><img src="img/btn_on.png" width="16" height="15" border="0" alt="movie 1" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=2222222" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 2" onClick="change(this)"></a> <a href="http://www.youtube.com/watch?v=3333333" onclick="return Obj.replaceObject(this.href);"><img src="img/btn.png" width="16" height="15" border="0" alt="movie 3" onClick="change(this)"></a> ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ これでちゃんとクリックしたボタンのみがON時の画像になり、それ以外はOFF時の画像に戻るのですが 同ページ上に表示している全く関係ない画像（例えばタイトル画像やバナー等）が 何故かOFF時の画像が拡大された状態のもの（タイトルやバナーで指定してあるサイズ）に切り替わってしまいます。 CSSで背景に指定してある画像やボタン設定してある画像は大丈夫なのですが 普通にHTML上に指定してあるJPGやPNG画像が変わってしまいます。。。 どこかおかしな部分があると思うのですがわからず途方にくれております。 何方か教えて下さい。どうぞ宜しくお願いします。
- ベストアンサー
- JavaScript
- 重なった画像にクリックイベントを発生させたい
いつも大変勉強させていただいております。 かさなった画像にクリックイベントを発生させたいと 苦心しておりますが、うまくいきません。 スタイルシートのz-indexプロパティーで 重なり位置を指定しました。 以下のような記述です。 <!-- 画像1 --> <DIV style="top:117px;left:360px;position:absolute;z-index:1;"><IMG src="00464.png" width="100" height="100" border="1"></DIV> <!-- 画像2 --> <DIV style="top:117px;left:360px;position:absolute;z-index:2;"><a href="#" OnClick="javascript:ZoomWin('00464.png');"><IMG src="big.gif" width="42" height="41" border="0"></a></DIV> 00464.pngとbig.gifという画像が重なっていて、 それぞれz-indexで指定しています。 big.gifをクリックすると、ZoomWinという関数を 発生させて、新規ウインドウを 立ち上げたいのですが、 リンクすらはれないのです。 z-indexを指定しただけでは、 <a>タグはつかえないのでしょうか？ ほかに代替案があればおしえてください。
- 締切済み
- JavaScript
- AlphaImageLoaderを使用して文字を透過させたいのですが…
こんにちわ。 ホームページのボタンで、スクリプト系の細かい文字の背景を透明にしてfireworksで書き出し、backgroundとしてcssでAlphaImageLoaderを指定してアップ。 他の部分の透過に関してはこれでうまくいくのですが、この文字の部分だけがIE6できれいに反映されません。 よくある、透明部分がブルーグレーになると言う状態ではなく、文字背景は透過されて表示はできるのですが、ギザギザで線も細すぎて読み取れない状態です。 （gifよりはまともですが・・・。） 他の画像の透過はきれいに出ているのでcssの指定は正しいと思うのですが、どう調べても分からず、どなたかお知恵をお貸しください！ fireworksでの保存方法ですが、png8,png24,png32と全て試してみましたがだめでした。 文字など細かいものに関しては諦めるしかないと言うことでしょうか？ javascriptを使用できない条件であるためAlphaImageLoaderを使用しているのですが…。 ■css .png-filter{ background:url(images/index/btn_skip.png) no-repeat; width:110px; height:38px; } *html .png-filter { background: none; filter:progid:DXImageTransform.Microsoft. AlphaImageLoader(src='images/index/btn_skip.png', sizingMethod='scale'); width:110px; height:38px; } .png-filter a{ display:block; text-indent:-9999px; overflow:hidden; width:110px; height:38px; }
- ベストアンサー
- 画像・動画・音楽編集
- XOOPS カスタムブロックに htmlを配列
始めまして！ 初めて投稿させて頂きます。 XOOPSのカスタムブロックにhtmlで表示したいのですが、イメージ通り表示出来ないでおります。 htmlの知識も無い無謀者ですが、どうかご指導の程宜しくお願い致します。 【やりたい事】 ブロックの左側にアイコンに続きtxtを挿入、右側にイメージ画像のアフリエイトを配置したいのですが、表示がイメージ通り出来ません。 添付ファイル画像（１） ・配置したいイメージ 添付ファイル画像（２） ・現状 ・現状のソース <P><Div Align="left"><IMG src="file:///C:/Users/xxx/Desktop/folder858.png" width="24" height="24" border="0">test01<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/Desktop/folder858.png" width="24" height="24" border="0">test02<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test03<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test04<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test05<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test06<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx/folder858.png" width="24" height="24" border="0">test07<BR></Div> <Div Align="left"><IMG src="file:///C:/Users/xxx/xxx//folder858.png" width="24" height="24" border="0">test08<BR></Div> <Div Align="right"><script type="text/javascript"><!-- google_ad_client = "pub-ｘｘｘｘｘｘｘｘｘ"; /* 200x200, 作成済み 09/06/15 */ google_ad_slot = "ｘｘｘｘｘｘ"; google_ad_width = 200; google_ad_height = 200; //--> </script> <script type="text/javascript" src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> </script></Div> ご指導宜しくお願い致します。
- ベストアンサー
- その他([技術者向] コンピューター)
- HTML CSSを、教えてください。
お世話になります。 HTMLを始めたばかりで、 超初心者ですので、ご教授いただけたらと思います。 以下の図のような感じに並べたいです。 バックグラウンドには、青色。 赤と緑の部分は、画像配置、 また、右の緑の画像の上に, オレンジのボタン配置を行いたいのです。 ただ、オレンジのボタン配置の仕方が、 なかなか出来ずにいます。 以下のHTMLとCSSには、 オレンジのボタンを入れずに、まず配置をしてみましたが…。 ただ、やはり右の緑の画像が、崩れてしまう感じも…。 オレンジのボタンを入れていただいた形で、 お願いできないでしょうか？ （オレンジ画像 width＝100 height＝50 でお願いします。） 【 HTML 】 <div class="Red"><img src="img/Red.png" width="300" height="50" /> <div class="contents"> <div class="Color_Box"> <div class="Green01"><img src="img/Green01.png" width="200" height="100" /> </div> <div class="Green02"><img src="img/Green02.png" width="200" height="100" /> </div> </div> </div> </div> 【 CSS 】 div.Red{ background:url(img/Bule.png) 0 100% repeat-x; height:200px; margin-top:45px; text-align:center; } div.Color_box{ width:450px; height:100px; } div.Green01{ width:200px; padding-right:50px; float:left; } div.Green02{ width:200px; float:left; }
- 締切済み
- CSS
- 初歩的かもしれませんが回り込みが上手くできません
初歩的かもしれませんが回り込みが上手くできません イメージ的には、図のようなdivを４つ横に並べて改行、同じように繰り返したいです。 ■■■■ ■■■■ しかし、下記の様にすれば ■■■ ■ ■■■ ■ に、なってしまいます。 こういう場合、どうすればいいのでしょうか？？ <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave1</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave2</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave3</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave4</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave5</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave6</a></div> <div class="sample" style=" width:120px; float:left;"><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave7</a></div> <div class="sample" style=" width:120px; "><a href="http://okwave.jp" target="_blank"><img src="okwave.png" height="80" width="120"><br>okwave8</a></div>
- ベストアンサー
- CSS
お礼
情報ありがとうございます。 この情報を元に試行錯誤してみます。