ＣＳＳによる画像のポップアップ（カーソルを乗せたとき）

★　ＣＳＳによる画像のポップアップ（カーソルを乗せたとき）



モバイル端末で見た場合は、表示部分も、ポップアップする部分も
　　表示されてしまうので注意してください。
（　ＣＳＳ編集で入れたＣＳＳは、モバイル端末では、効果がないので）



●　実例（デモ）は、下記を参照

http://ameblo.jp/new-blue-777/entry-11306974295.html


◆　機能

①　リンク文字にカーソルを乗せると画像がポップアップする。



●　アメーバの主な場所 にはヘッダー、サイドバー、記事、コンテンツ、
フレームなどがあります。

---

②　リンク画像にカーソルを乗せると画像がポップアップする。

---

③　リンク文字にカーソルを乗せるとテキストがポップアップする。



主な場所

テストです。
テストです。
テストです。
テストです。
テストです。
テストです。
テストです。
テストです。
テストです。
テストです。

---

④　リンク画像にカーソルを乗せるとテキストがポップアップする。

主な場所

---

⑤　画像がポップアップする場合に限り、わたしの記事の画像の
　　ポップアッププラグインを使えば、クリックすると画像がポップアップする。
（クラス(class)部分に　detailOn　を入れる）

主な場所

●　ＣＳＳ部分


①　ＣＳＳへ追記する

/* ----------------------------------------------------- */
/* ＣＳＳによる 画像のポップアップ 　　　　　　　　　　　*/
/* ----------------------------------------------------- */
.csspop01{
position: relative;
color:#ffccff;/* 文字色 */
z-index:0;/* 重なりの優先順位 */
}
a.csspop01{/* リンク部分の文字部分 */
color:#ffccff;/* 文字色 */
text-decoration:none;/* 下線なし */
overflow:hidden;
outline:none;/* クリック時に点線が表示されないように */
}
.csspop01:hover{/* リンク部分にカーソルを乗せたときの文字部分 */
color:#0000ff;/* 文字色 */
text-decoration:none;/* 下線なし */
z-index:100;/* 重なりの優先順位 */
}
.csspop01 span{/* 画像 */
visibility: hidden;/* 非表示 */
position: absolute;
}
.csspop01:hover span{/* リンク部分にカーソルを乗せたときの画像部分 */
visibility: visible;/* 画像を表示する */
position: absolute;
top: 10px;/* 上の位置 */
left:10px;/* 左の位置 */
background-color:transparent;/* 背景色 */
}
.csspop01 img{/* 画像の余白 */
padding:0px !important;
margin:0px !important;
border:6px solid #ffccff;/* 枠 */
}
.csspop01 p.textp1{/* テキスト部分の設定 */
width:100px;/* 幅 */
height:100px;/* 高さ */
overflow:auto;/* 横・縦がオーバーしたときはスクロールバー表示 */
background-color:#ffffff;/* 背景色 */
border:1px solid #ffccff;/* 枠 */
position:relative;/* 相対配置 */
left:0px;/* 左からの位置 */
top:0px;/* 上からの位置 */
text-align:center;/* 文字を中央寄せ */
}

◆　説明

・　csspop01 を変えることによって、ポップアップのデザインを
変えることができます。
csspop01 の他に、コピーして、csspop02　に変えるなどして
ＣＳＳへ付け加えて、行けばＯＫです。

・　テキストをポップアップしたい場合は、テキストごとに
　名前をつけて、幅、高さ、ポップアップ表示位置を調整します。
　textp1 を　textp2 というように変えて、追加していきます。




●　記事の書き方（ＨＴＭＬタグを表示をクリックしてＨＴＭＬモードで書く）
　　（ＨＴＭＬタグを表示は投稿ボタンの左上にあるタブです）


①　文字リンクの場合

<a class="csspop01" href="#">リンクしたい文字<span><img src="ポップアップする画像のＵＲＬ" width="300"></span></a>

・デモの例


●　アメーバの<a class="csspop01" href="#">主な場所<span><img src="http://stat.ameba.jp/user_images/20120116/08/new-blue-777/59/b2/p/o0775063411737764872.png" width="300"/></span></a>にはヘッダー、サイドバー、記事、コンテンツ、<br />フレームなどがあります。




◆　説明

・　# 　にするとクリックしても、どこにも飛びません。
　クリックしたときに飛ばしたい場合は、　# はリンク先のＵＲＬに変えてください。
　以下同じ。　新しいページで開きたいリンクの場合は、　target="_blank" を入れます。
　例 <a href="リンク先のＵＲＬ" target="_blank">

・　widthは、ポップアップされたときの画像の横幅です。300は 300px の意味です
　　以下同じ。

・　表示する画像のＵＲＬは、サムネイル画像（小さな画像）を使うといいと思います。







②　画像リンクの場合

<a class="csspop01" href="#"><img src="表示する画像のＵＲＬ" /><span><img src="ポップアップする画像のＵＲＬ" width="300"/></span></a>

・デモの例

<a class="csspop01" href="#"><img width="110" height="83" src="http://stat.ameba.jp/user_images/20120116/08/new-blue-777/59/b2/p/t02200180_0775063411737764872.png" /><span><img src="http://stat.ameba.jp/user_images/20120116/08/new-blue-777/59/b2/p/o0775063411737764872.png" width="300"/></span></a>



◆　説明

・　# 　にするとクリックしても、どこにも飛びません。
　クリックしたときに飛ばしたい場合は、　# はリンク先のＵＲＬに変えてください。
　以下同じ。　新しいページで開きたいリンクの場合は、　target="_blank" を入れます。
　例 <a href="リンク先のＵＲＬ" target="_blank">

・　widthは、ポップアップされたときの画像の横幅です。300は 300px の意味です
　　以下同じ。

・　表示する画像のＵＲＬは、サムネイル画像（小さな画像）を使うといいと思います。




③　文字リンクのテキスト表示の場合

<a class="csspop01" href="#">リンクしたい文字<span><p class="textp1">テキスト部分</p></span></a>

・　デモの例

<a class="csspop01" href="#">主な場所<span><p class="textp1">テストです。<br>テストです。<br>テストです。<br>テストです。<br>テストです。<br>テストです。<br>テストです。<br>テストです。<br>テストです。<br>テストです。<br></p></span></a>


◆　説明

・　<p> ～ </p> がテキスト部分です。
　テキスト部分は、ＨＴＭＬで入れてください。絵文字なども入れられます。

・　textp1 は、名前を変えて、その名前ごとに、ＣＳＳを指定します。

例・・・ textp2 にした場合

.csspop01 .textp2 p{/* テキスト部分の設定 */
width:100px;/* 幅 */
height:100px;/* 高さ */
overflow:auto;/* 横・縦がオーバーしたときはスクロールバー表示 */
background-color:#ffffff;/* 背景色 */
border:1px solid #ffccff;/* 枠 */
position:relative;/* 相対配置 */
left:0px;/* 左からの位置 */
top:0px;/* 上からの位置 */
text-align:center;/* 文字を中央寄せ */
}


④　リンク画像にカーソルを乗せるとテキストがポップアップ

<a class="csspop01" href="#"><img src="表示する画像のＵＲＬ" /><span><p class="textp2">テキスト部分</p></span></a>

・　デモの例

<a class="csspop01" href="#"><img width="110" height="83" src="http://stat.ameba.jp/user_images/20120116/08/new-blue-777/59/b2/p/t02200180_0775063411737764872.png" /><span><p class="textp2">主な場所</p></span></a>


・　ＣＳＳの textp2 部分の指定

.csspop01 p.textp2 {/* テキスト部分の設定 */
width:100px;/* 幅 */
height:20px;/* 高さ */
overflow:auto;/* 横・縦がオーバーしたときはスクロールバー表示 */
background-color:#ffffff;/* 背景色 */
position:relative;/* 相対配置 */
left:0px;/* 左からの位置 */
top:-50px;/* 上からの位置 */
text-align:center;/* 文字を中央寄せ */
}




④　画像リンクとテキスト表示と私の画像ポップアッププラクインを組み合わせた場合

<a class="csspop01 detailOn" href="#"><img src="表示する画像のＵＲＬ" /><span><p class="textp3">テキスト部分</p></span></a>

・デモの例

<a href="#" class="csspop01 detailOn"><img width="110" height="83" src="http://stat.ameba.jp/user_images/20120116/08/new-blue-777/59/b2/p/t02200180_0775063411737764872.png" /><span><p class="textp3">主な場所</p></span></a>


・　ＣＳＳの textp3 部分の指定

.csspop01 p.textp3 {/* テキスト部分の設定 */
width:100px;/* 幅 */
height:20px;/* 高さ */
overflow:auto;/* 横・縦がオーバーしたときはスクロールバー表示 */
background-color:#ffffff;/* 背景色 */
position:relative;/* 相対配置 */
left:0px;/* 左からの位置 */
top:-50px;/* 上からの位置 */
text-align:center;/* 文字を中央寄せ */
}




◆　説明

・　detailOn　を　csspop01 の後にいれれば、クリックしたときにポップアップするように
　　なります。