ソース掲示板




すべてから検索

キーワード   条件 表示 現行ログ 過去ログ トピックス 名前 本文

  メンテナンス 前画面に戻る

対象スレッド 件名: IE6の為の背景が透明のフルカラーPNGファイル用JavaScript
名前: lightbox
処理選択
パスワード

件名 IE6の為の背景が透明のフルカラーPNGファイル用JavaScript
名前 lightbox
コメント
以下の表は、ウチのサイトの11月のアクセスにおける、各ブラウザの比率を
示したものですが、IE6 は、46.24% でまだ利用者の多いブラウザである事
は間違い無いので、背景色が透明で256色を超える画像はまだ使えません。

どうしても使うには、ここで紹介する ie6.php のような方法で利用する
しか、今のところいい案が思い浮かばないです・・・

@HTML
<STYLE type=text/css>
#lboxtable * {
	font-family: 'MS Pゴシック';
	font-size: 12px;
}
#lboxtable table {
	border-collapse: collapse;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: #FFFFFF;
}
#lboxtable td {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	white-space: nowrap;
}
#lboxtable th {
	padding: 5px;
	border-style: solid;
	border-color: #000000;
	border-width: 1px;
	background-color: silver;
	white-space: nowrap;
}
</STYLE>
<DIV id="lboxtable">
<TABLE border="1">
<TR>
<TH><FONT size=-1>#</FONT></TH><TH><FONT size=-1>Hits</FONT></TH><TH></TH><TH><FONT size=-1>ユーザエージェント</FONT></TH>
</TR>
<TR>
<TD><FONT size=-1><B>1</B></FONT></TD><TD><FONT size=-1><B>454437</B></FONT></TD><TD><FONT size=-2>31.87%</FONT></TD><TD><FONT size=-1>Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; .NET </FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>2</B></FONT></TD><TD><FONT size=-1><B>135198</B></FONT></TD><TD><FONT size=-2>9.48%</FONT></TD><TD><FONT size=-1>Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 1</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>3</B></FONT></TD><TD><FONT size=-1><B>85736</B></FONT></TD><TD><FONT size=-2>6.01%</FONT></TD><TD><FONT size=-1>Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 2</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>4</B></FONT></TD><TD><FONT size=-1><B>67755</B></FONT></TD><TD><FONT size=-2>4.75%</FONT></TD><TD><FONT size=-1>Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.9.0.4) Geck</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>5</B></FONT></TD><TD><FONT size=-1><B>67029</B></FONT></TD><TD><FONT size=-2>4.70%</FONT></TD><TD><FONT size=-1>Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 6.0; SLCC1; .NE</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>6</B></FONT></TD><TD><FONT size=-1><B>61246</B></FONT></TD><TD><FONT size=-2>4.30%</FONT></TD><TD><FONT size=-1>Mozilla/5.0 (Windows; U; Windows NT 5.1; ja; rv:1.9.0.3) Geck</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>7</B></FONT></TD><TD><FONT size=-1><B>40742</B></FONT></TD><TD><FONT size=-2>2.86%</FONT></TD><TD><FONT size=-1>Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1)</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>8</B></FONT></TD><TD><FONT size=-1><B>38881</B></FONT></TD><TD><FONT size=-2>2.73%</FONT></TD><TD><FONT size=-1>Mozilla/4.0 (compatible; MSIE 7.0; Windows NT 5.1; .NET CLR 2</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>9</B></FONT></TD><TD><FONT size=-1><B>28657</B></FONT></TD><TD><FONT size=-2>2.01%</FONT></TD><TD><FONT size=-1>Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1; InfoP</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>10</B></FONT></TD><TD><FONT size=-1><B>27987</B></FONT></TD><TD><FONT size=-2>1.96%</FONT></TD><TD><FONT size=-1>Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0; .NET CLR 1</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>11</B></FONT></TD><TD><FONT size=-1><B>21799</B></FONT></TD><TD><FONT size=-2>1.53%</FONT></TD><TD><FONT size=-1>Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.0)</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>12</B></FONT></TD><TD><FONT size=-1><B>19520</B></FONT></TD><TD><FONT size=-2>1.37%</FONT></TD><TD><FONT size=-1>Mozilla/5.0 (compatible; Yahoo! Slurp; http://help.yahoo.com/</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>13</B></FONT></TD><TD><FONT size=-1><B>14664</B></FONT></TD><TD><FONT size=-2>1.03%</FONT></TD><TD><FONT size=-1>Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.co</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>14</B></FONT></TD><TD><FONT size=-1><B>13088</B></FONT></TD><TD><FONT size=-2>0.92%</FONT></TD><TD><FONT size=-1>ichiro/3.0 (http://help.goo.ne.jp/door/crawler.html)</FONT></TD>
</TR>
<TR>
<TD><FONT size=-1><B>15</B></FONT></TD><TD><FONT size=-1><B>11761</B></FONT></TD><TD><FONT size=-2>0.82%</FONT></TD><TD><FONT size=-1>Mozilla/5.0 (Windows; U; Windows NT 5.1; en-US) AppleWebKit/5</FONT></TD>
</TR>
</TABLE>
</DIV>
@HEND

  [[ie6.php]]
@DIV
<?
header( "Content-Type: text/javascript; Charset=shift_jis" );
header( "Expires: Wed, 31 May 2000 14:59:58 GMT" );
$size = getimagesize($_GET['img']);
?>
src="<?= $_GET['img'] ?>";w=<?= $size[0] ?>;h=<?= $size[1] ?>;
<?

$agent = $_SERVER['HTTP_USER_AGENT'];
$agent = strstr($agent, "MSIE 6.0");
if ( $agent === false ) {
?>

document.write(
	"<DIV><IMG border='0' " +
	"src='" + 
	src + 
	"' style=\"width:" +
	w + 
	"px;height:" +
	h +
	"px;\"></DIV>");

<?
}
else {
?>

str="";   
str+="<DIV style=\"width:"+w+"px;height:"+h+"px;\n";   
str+="filter:progid:DXImageTransform.Microsoft.AlphaImageLoader( \n";
str+="src='" + src + "', sizingMethod='scale');\"";
if ( "<?= $_GET['cursor'] ?>" != "" ) {
	str+=" style='cursor:<?= $_GET['cursor'] ?>' ";
}
str+="></DIV> ";
document.write(str);

<?
}
?>
@END


以下は実装のサンプルですが、cursor パラメータは IE6 の為に必要です
( cursor パラメータは A を使ってリンクにする時だけ必要です )

@DIV
<a href="http://winofsql.jp">
<script
	type="text/javascript"
	src="http://winofsql.jp/php/ie6.php?cursor=pointer&img=http%3A%2F%2Fwinofsql.jp%2Fimage%2Flightbox.png"
></script>
</a>
@END


winofsql.jp/php/ie6.php は、実際に存在しますので、ご自由にお使いください。
( 自分のサイトに置けば、応用ききますが、そこまでする必要も無いですし )