●続・続・画像に影をつける
前回の、「続・画像に影をつける」では InternetExplorer(IE) でのみ、
右側に影がつかないので、影画像を少し右側に引っ張るとうまくいくのですが､
今度は Opera や Firefox では、本命画像と影画像の間に隙間が出来るのです。
ほんとーに､ブラウザの反応性の違いは厄介です。
困ったなーと考えあぐねていたのですが､結局解決しました。
CSS の書き直しで解決しました。
スタイルシートは下記のスタイルを採用しました。
.shadow {
background: url(/パスを通す/shadow.gif) right bottom;
float: left; /* 影画像の本命画像に対する回りこみ抑制 */
position:relative;
left:6px; /* Opera と Firefox で左側枠が切れるので、全体を右に移動 */
margin-right:6px; /* 右側に回りこんだ文章の頭切れを防ぐ為、文章全体の右への移動 */
}
background: url(/パスを通す/shadow.gif) right bottom;
float: left; /* 影画像の本命画像に対する回りこみ抑制 */
position:relative;
left:6px; /* Opera と Firefox で左側枠が切れるので、全体を右に移動 */
margin-right:6px; /* 右側に回りこんだ文章の頭切れを防ぐ為、文章全体の右への移動 */
}
.shadow img {
position: relative;
left: -6px; /* 本命画像を左へ移動 */
top: -6px; /* 本命画像を上へ移動 */
padding: 5px; /*縁をつける */
background: #ffffff; /* 縁の色 */
border: 1px solid #999999; /* 外枠 */
}
lib/MT/App/ 内の CMS.pm の書き換えはこの様に修正しました。
オリジナルの 3597 行～部分に、下記赤文字を書き足しです。
my $link = $thumb ? qq(<div class="shadow">
<img src="$thumb" width="$thumb_width" height="$thumb_height" alt="" /></div>)
: q{<MT_TRANS phrase="View image">};
return $app->translate_templatized(<<HTML);
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,
scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,
menubar=no, status=no,left=0,top=0'); return false">$link</a>
HTML
} elsif ($q->param('include')) {
if ($thumb) {
return <<HTML;
<div class="shadow"><a href="$url">
<img alt="$fname" src="$thumb" width="$thumb_width"
height="$thumb_height" /></a></div>
HTML
} else {
return <<HTML;
<div class="shadow">
<img alt="$fname" src="$url" width="$width" height="$height" /></div>
HTML
}
<img src="$thumb" width="$thumb_width" height="$thumb_height" alt="" /></div>)
: q{<MT_TRANS phrase="View image">};
return $app->translate_templatized(<<HTML);
<a href="$url" onclick="window.open('$url','popup','width=$width,height=$height,
scrollbars=no,resizable=no,toolbar=no,directories=no,location=no,
menubar=no, status=no,left=0,top=0'); return false">$link</a>
HTML
} elsif ($q->param('include')) {
if ($thumb) {
return <<HTML;
<div class="shadow"><a href="$url">
<img alt="$fname" src="$thumb" width="$thumb_width"
height="$thumb_height" /></a></div>
HTML
} else {
return <<HTML;
<div class="shadow">
<img alt="$fname" src="$url" width="$width" height="$height" /></div>
HTML
}
default の画像アップロード時に、
<div class="shadow">
<img alt="画像ファイル名" src="画像ファイルの URL" width="○○○" height="○○" /></div>
<img alt="画像ファイル名" src="画像ファイルの URL" width="○○○" height="○○" /></div>
という具合に表示されます。
これが、
こーなります。
IE でも Opera でも
Firefox でも Netscape でも、ほぼ同じよ－に表示されます。
かなりうれしーです。
