2006年 03月 10日
33-1 画像をpopupをさせて見ましょう① (CSS) 修正版


修正しました大丈夫です...たぶん。
IE,firefox,Opera,で動作確認しました。
ネスケは拡大表示の場所がずれちゃいます;;

一枚の画像を使って、画像をpopupさせて見ましょう。

サムネール画像拡大画像










1.CSSの一番最後の行に次の文をコピーしてください。
img {
border: none;
}
.pic1 {
position: relative;
top: 0;
left: 0;
float: left;
}
.pic1 a .large {
position: absolute;
width: 1px;
height: 1px;
top: 0;
left: 0;
}
.pic1 a.popup,
.pic1 a.popup:visited {
top: 0;
left: 0;
ALIGN:left;
}
.pic1 a.popup:hover {
}
.pic1 a.popup:hover .large {
width: 240px;
height: 320px;
top: 0;
left: 200px;
}
解説
.pic1 a.popup:hover .large {
width: 240px;  ← 拡大した写真の横幅
height: 320px;  ← 拡大した写真の縦幅
top: 0;  ← 縮小画像と拡大画像の上の高さを合わせます。

ここで、赤字のは、popupされた画像の表示位置を調整しています。
左から200pxずらすということです。
(もっと右に寄せたいときは数字を大きく、左に寄せたい場合は数字を小さくしてみてください。)
小さい画像の上に乗せちゃうときは0を指定しちゃいます^^

2.画像を一度アップロードします。
  保存をせずに、一度プレビューを開きます。
  画像の上で右クリックしてプロパティをクリックします。
  中ほどに アドレス(URL)と言う欄があります。
  この右に書いてあるのが、アップロードされた画像のurlです。
  アドレスをドラッグして、右クリックしてコピーしておきます。

記事中の
   〔#IMAGE|e0075308_21374553.jpg|200602/28/08/|mid|400|589#〕
はけしちゃってください。
*下の削除ボタンで消さないで下さいね^^;;

記事の書き方
<div class="pic1"><a href="#" title="" class="popup"><img src="http://pds.exblog.jp/pds/1/200512/15/08/e0075308_22404690.jpg" width="100" height="133" alt="サムネール画像" title="サムネール" /><img src="http://pds.exblog.jp/pds/1/200512/15/08/e0075308_22404690.jpg" width="240" height="320" alt="拡大画像" title="拡大画像" class="large" /></a></div>

解説
 1.赤字の2箇所のurlのところには先ほどupした画像のurlを記載してください。
   (両方同じもの)

 2.赤字のwidth="100" height="133"
   ここには小さい画像のときのサイズを入れてください。
   widthは横幅、heightは高さの指定をします。

 3.緑色のwidth="240" height="320"
   ここには拡大した画像のサイズを入れてください。
    
 *プレビューを見て画像のはみ出し具合を確認して調整してみてください。

上手く出来ない方はご連絡くださいね。検証いたしますので
    
[PR]
by chocobopapa | 2006-03-10 22:26 | スキン編集

記事更新停止中です;;
by chocobopapa
    
since 2005.9.17
Count Down
Ranking

第10位

マイペース
SunSet Swish

第9位

Around The World
MONKEY MAJIK

第8位

恋のダウンロード
仲間由紀恵
with ダウンローズ

第7位

太陽の下
レミオロメン

第6位

Kiss Me Good-Bye
アンジェラ・アキ

第5位

Startin'/Born To Be...
浜崎あゆみ

第4位

SEXY BOY-そよ風に寄り添って-
モーニング娘。

第3位

純恋歌
湘南乃風

第2位

一剣
氷川きよし

第1位

サヤエンドウ
はだしのシンデレラボーイ
NEWS
Chocobo Style
    
以前の記事
    
カテゴリ
    
最新のトラックバック
美容
from 美容
Η(・∀・)イイ!!
from しんや
キッズコスメ
from キッズコスメ
負けても勝ち組w
from ドンパッチ
ホワイトツリー ビタフォ..
from 韓国コスメでべっぴん肌
スーヒャンスノー インテ..
from 韓国コスメでべっぴん肌
【化粧水】雪花秀 滋陰水
from 韓国コスメでべっぴん肌
韓国コスメ「雪花秀」に興..
from 韓国コスメが売れる理由
陸上 自衛隊のサイト集情報
from 陸上 自衛隊メンバー
横幅に戸惑った話 ~2年..
from ここから
    
フォロー中のブログ
    
その他のジャンル
    
ファン
    
記事ランキング
    
ブログジャンル
    
画像一覧
Copy Right Chocobo Style Since 2006