ロゴの切り抜きに適用する

マスク画像を工夫すればロゴの切り抜きなども可能です。実際にEdge.jsのサイトではタイトルロゴが切り抜かれて表示されます(IEではそのようには表示されません)。サンプル05ではロゴの部分だけを透明にしPNG形式で保存しています。

ロゴとなる画像

マスク画像。ロゴの部分を透過表示させるため、透明にして作成しておく。その後、PNG形式(24bitアルファチャネル付き)で保存すればよい

サンプル05

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="content-type" content="text/html;charset=utf-8">
        <link rel="stylesheet" href="css/main.css" type="text/css" media="all" />
        <title>edge.jsサンプル</title>
        <script type="text/javascript" src="js/edge.js"></script>
        <script type="text/javascript"><!--
            mask2load[5] = "masks/8bit/logoMask.png"; 
        // --></script>
    </head>
    <body>
    <h1>edge.jsサンプル</h1>
        <div>
            <img src="photo/logo.jpg" class="edges imask5" width="480" height="160" alt="Logo">
        </div>
    </body>
</html>

Edge.jsはIEでは画像の輪郭をぼかす程度にしか使えませんが、他のブラウザでは写真の表示などに効果を発揮することができるでしょう。