2010年09月16日

IE6で、PNGボタンのロールオーバー

IE6で、PNG画像を表示しようとした場合、ブラウザの使用上、japascriptを利用しないと表示することが出来ません。
有名どころでいうと、下記が有名と思います。
alphafilter
iepngfix


それぞれを使用しつつロールオーバーを行う場合、状況に応じてうまくいかない場合があります。
まず、alphafilter の場合
alphafilterは、上記に記載したURLを見て貰うと分かりますが、ロールオーバー対応してくれており、ロールオーバーさせたい画像に対して、class属性「btn」を記述すれば、ロールオーバーします。
ただしCSSにて、position: absolute などを利用している場合、ボタン自体が消える現象に遭遇します。

次に、iepngfix の場合
iepngfixは、PNG画像のclass属性に「iepngfix」を記述すれば、PNGが表示されますが、
デフォルトのままの場合、画像が表示されつつ×印が表示されます。
×印を回避するのに、僕の場合は、昔懐かしい、spacer.gif を読み込ませています。

この状態でロールオーバーさせれば、問題ないかと思い普段使っているロールオーバー用のjQuery(こんな感じのやつ)を読み込ませて試してみると、ロールオーバーしました。
ただし問題があって、ロールオーバーした画像に×印がついてしまいました・・・。

前述した通り、spacer.gif を読み込ませれば解決すると思いますが、設定する箇所が1ヵ所しかなく、2個目が設定できません。
ただし色々調べてみると、iepngfixの場合、HTMLソースへの直書きをすることで、ロールオーバーを可能にする方法がありました。
<img src="/images/sample.png" onmouseover="this.src='/images/sample_ov.png',IEPNGFIX.fix(this)" onmouseout="this.src='/images/sample.png',IEPNGFIX.fix(this)" class="iepngfix" alt="sample" width="100" height="100" />


今回、PNGボタンのロールオーバーの必要箇所が1ヵ所のみだったのですが、特殊な位置へ設置する必要があり、iepngfix を直書きにて対応しました。
position: absolute を記述するようなことがなければ、alphafilterが楽かもしれないですね。

そんなことより、IE6がなくなればいいのに!
posted by memo4me at 11:00 | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年03月31日

Facebookシェアボタン

Facebookのシェアボタンを設置する為、WEBで探してみたが、そのまま使えるものが少なかったので、自分で調べてみました。

まずは、FacebookのDeveloper wiki
http://wiki.developers.facebook.com/index.php/Talk:Fb:share-button#setting_default_tab_to_.22Send_a_Message.22_rather_than_.22Post_to_Profile.22

英語だったので、さっぱり分らなかったのですが、少しスクロールしたら分りました。

そして出来たものが
【HTML】
<a href="javascript:void(0)" onclick="link('fb')" title="Facebook">facebook</a>


【Javascript】
function link(name){
 var service = {
  fb : "http://www.facebook.com/sharer.php?u=",
 };
 
 //リンク先URLセット
 if(service[name] != undefined){
  location.href = service[name] + encodeURIComponent(location.href) + '&t=' + encodeURIComponent(document.title);
 }else{
  alert("不正な呼び出しです")
 }
}


まとめていくつかのソーシャルブックマーク登録ボタンを作ったので、気が向いたらまた更新します。
posted by memo4me at 00:28 | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年03月29日

window.open時の子windowから親window操作

window.openで別窓を立ち上げ、立ち上がった子windowから親windowを操作することがありました。

【HTML】
<a href="javascript:void(0)" onclick="disp('test.html');" title="hoge">hoge</a>


【Javascript】

function disp(url){
 //メインウィンドウチェック
 if(!window.opener || window.opener.closed){
  //親ウィンドウが閉じられている場合
  window.open(
   'test.html',
   '_blank'
  );
 }else{
  //親ウィンドウが開いている場合
  window.opener.location.href = url;
  window.opener.focus();
 }
}


【注意事項】
・子windowが開いた後、親windowを閉じている可能性があるので、閉じている場合を考慮して、子windowから新規windowを表示
・親windowを操作しても、子windowに隠れてしまう場合があるので、「window.opener.focus();」を使ってフォーカスをあてる
posted by memo4me at 23:37 | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする

2010年03月17日

window.open時のフルスクリーン対応

たまーにフルスクリーンにすることがあるのですが、よく忘れるので

function fullscreen(){
 winFullscreen = window.open("test.html","","menubar=no, toolbar=no, resizable=yes, scrollbars=yes");
 winFullscreen.moveTo(0,0);
 winFullscreen.resizeTo(screen.availWidth,screen.availHeight);
}

メモメモ
posted by memo4me at 22:17 | Comment(0) | TrackBack(0) | javascript | このブログの読者になる | 更新情報をチェックする
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。