ホームページ制作のヒントやTIPSを色々と書いています。

去年くらいから時々見かける、画像ポップアップがカッコいいやつです。


１： JSの配布サイトからダウンロードしてくる⇒こちらから
２：　ヘッダーに一文を入力
３：　CSSに一文を入力
４：　表示させたい画像にstyleなどを適用する　

以下に詳しく

１：作者のサイトからダウンロードしてくる
　　*英語ですが、DOWNLOADをクリック、次のページでダウンロードもう一回
　　*それをFTPでサイトにアップする。

２：ヘッダーに以下の文を入力

<a href="自分のサイト名/images/1.jpg" 
onclick="return hs.expand(this)" id="thumb1" class="highslide">
<img src="自分のサイト名images/1_s.jpg"
 alt="Highslide JS" height="80" 
width="120" /></a>

３：以下をCSSへ書き加える

.highslide {
cursor: url(highslide/graphics/zoomin.cur), pointer;
outline: none;
}
.highslide img {
border: 2px solid gray;
}
.highslide:hover img {
border: 2px solid white;
}

.highslide-image {
border: 10px solid white;
cursor: pointer; /* opera */
cursor: url(highslide/graphics/zoomout.cur), pointer;
}
.highslide-image-blur {
cursor: pointer;
cursor: hand;
}
.highslide-caption {
display: none;
border: 5px solid white;
border-top: none;
padding: 5px;
background-color: white;
}
.highslide-display-block {
display: block;
}
.highslide-display-none {
display: none;
}
.highslide-loading {
display: block;
color: white;
font-style: 'MS Sans Serif';
font-size: 9px;
font-weight: bold;
text-transform: uppercase;
text-decoration: none;
padding: 3px;
opacity: 0.60; /* w3c */
filter: alpha(opacity=60); /* ie */
border-top: 1px solid white;
border-bottom: 1px solid white;
background-color: black;

padding-left: 22px;
background-image: url(highslide/graphics/loader.gif);
background-repeat: no-repeat;
background-position: 3px 1px;

}
a.highslide-credits,
a.highslide-credits i {
padding: 2px;
color: silver;
text-decoration: none;
font-size: 10px;
}
a.highslide-credits:hover,
a.highslide-credits:hover i {
color: white;
background-color: gray;
}

４：画像にエフェクトを適用させる

複数使用したいときは、例のように id をダブらないようにつける。

<a href="自分のサイト名/images/1.jpg" 

onclick="return hs.expand(this)" id="thumb1" class="highslide">

<img src="自分のサイト名images/1_s.jpg" 

alt="Highslide JS" height="80" 

width="120" /></a>