2ch Web収入カテゴリからアフィリエイトに関係するねたをチョイス


こちらで新ブログ立ち上げました⇒猫も杓子もアフィリエイト
--.--.-- --
上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。
2005.10.08 Sat
リンク集ページを作成しました( ̄ー ̄)

相互リンクサイトさまはページ下部に移動しております。
特徴はリンク先のサイトのイメージ画像を見ることができます。
TOPページを画像ファイルにして使用させていただいておりますが
勝手に作成したので、リンク先の管理人さまでもし画像使用に問題がある場合はご連絡くださいm(__)m

あと、この画像上にマウスを持っていくと拡大表示してちょっと見やすくなります。
一度お試しください。
↓こんな感じです。
サムネール画像拡大画像


一応作成方法を書いときますね~..._〆(゚▽゚)

①画像を通常表示と拡大表示用で大きさの違うものを2種類用意します。

②スタイルシートの編集・・・以下を追加(コメント部を環境に合わせて変更してください)

.photo a {
width: 180px; #通常表示用画像の幅に変更してください
height: 118px; #通常表示用画像の高さに変更してください
overflow: hidden;
display: block;
}
.photo a:hover img {
border : 1px;
}
.photo a:hover {
width: 320px; #拡大表示用画像の幅に変更してください
height: 210px; #拡大表示用画像の高さに変更してください
}
.photo a:hover img.small { #通常時のクラス名(small)
visibility: hidden;
}
.photo a:hover img.medium { #拡大時のクラス名(medium)
position: relative;
top: -118px; #通常表示用画像の高さのマイナス値に変更してください
left: 0;
right: 0;
}
.photo img {
border : 1px;
}

③HTMLの編集・・・画像を表示したい場所に以下を追加

<div class="photo">←上記で設定したクラスを指定
<a href="http://yochiyochi.blog15.fc2.com/" target="_blank">←リンク先
<img src="http://blog-imgs-29.fc2.com/y/o/c/yochiyochi/knowledge180.png" width="180" height="118" alt="サムネール画像" title="サムネール" / class="small">←通常イメージリンク(smallクラスを指定)リンクを表示したい画像の保管場所に変更してください。
<img src="http://blog-imgs-29.fc2.com/y/o/c/yochiyochi/knowledge320.png" width="320" height="210" alt="拡大画像" title="拡大画像" class="medium" />←拡大イメージ(mediumクラスを指定)リンクを表示したい画像の保管場所に変更してください。
</a></div>

こんな感じですがわかりますかね(;´∀`)

スポンサーサイト
テーマ:雑記 - ジャンル:ブログ
[その他]雑記    Comment(0)  TrackBack(0)   Top↑
管理者にだけ表示を許可する

TrackBackURL
→ http://yochiyochi.blog15.fc2.com/tb.php/116-b89bffef
☆相互リンクありがとうございます☆
⇒  金の卵と銀の卵!ネットで稼ぐお小遣い : どらかんさん
⇒  パソコン1台で数千万稼ぐノウハウを公開中! : スマイルさん
⇒  0円から始めるアフィリエイト~元手なしで始めるビジネス日記! : zero_yen_afさん
⇒  @情報商材館 : まぁパパだぁーさん
Template by まるぼろらいと
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。