スポンサーサイト

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

--/--/-- | スポンサー広告  TOP

ボタン画像を使ったWEBサイトの構築。

って事で今回は、私のツール「ボタン工房」を使ってWEBサイトにリンク用の押しボタンを構築してみてます。
まず、これがボタンの画像です。
サンプルボタン

このボタン画像はボタン工房で「3つの状態を縦に」でセーブしたpngファイルです。
なぜ「ベータ版」と書かれているか言うと新しく構築しているサイトで使う画像を流用しました。
で、それの動くサンプルを右のプロフィールの真下に置いてみました。 →
押すと私のホームページにリンクします。

ホバー状態と押した状態にも対応しているのに気づいてもらえましたでしょうか?それにちゃんとTIPSも表示されるんですよ。興味が出てきました?
んで、これを書く為にはHTMLとCSSで記述します。

「CSSのコード」
#Buttons{
position: relative;
width: 100%;
}

#Buttons span{
margin: 5px;
width: 108px;
float: left;
}

#Buttons span a{
display: block;
width: 100%;
height: 20px;
text-indent: -9999px;
background-repeat: no-repeat;
overflow: hidden ;
}

#Buttons span a:hover{
background-repeat: no-repeat;
}

#Buttons span a:active{
background-repeat: no-repeat;
}

#btnlink a,btnlink a:hover,btnlink a:active{ background-image: url(info_beta.png);}
#btnlink a{ background-position: 0 0; }
#btnlink a:hover{ background-position: 0 -20px; }
#btnlink a:active{ background-position: 0 -40px; }

「HTMLのコード」
<div id="Buttons">
    <span id="btnlink" title="リンクボタンのテストです">
        <a href="http://hp.vector.co.jp/authors/VA047235/">&nbsp;</a>
    </span>
</div>

細かい説明は省きますが、自分のサイトに組み込んで試してみてください。

2008/04/19 | WEBサイト HTML/CSS/PHPCOMMENT(0)TRACKBACK(0)  TOP

コメント

コメントの投稿



管理者にだけ表示を許可する

 | BLOG TOP | 
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。