highslide.jsを使ってみるその２

JavaScript

highslide.jsに惚れた！

おもしろいね〜簡単に画像の拡大プレビューが作れたよ。

ただ拡大プレビュー画面がかっこよくない。というよりも左上に出るhighslide.jsのアドレスが目立ちすぎるだろ。あとはもう少し枠とか付けたいなと思っていた。コメントとかも付けれるみたいだから挑戦する。

いろいろ調べたら、CSSを使ってデザインするみたいだ。ちょっとやってみた。

body {
    font-family: Verdana, Helvetica;
    font-size: 10pt;
}

これで、bodyに存在するフォントとフォントサイズが決まるわけだ。次にリンクの色を変えてみた。

.highslide img {
    border: 2px solid gray;
}
.highslide:hover img {
    border: 2px solid white;
}

cssも進化したよね。私が進んでいなかっただけだけど。「class=highslide」で定義されているタグにインライン化されているimgタグに「border: 2px solid gray」を適用し、更に「:hover」でマウスポインタが画像の上に乗ったときにボーダーの色を変えているわけた。

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;
}

これこそ、拡大画像の左上にあったhighslide.jsへのリンクの色を変えるcssですね。灰色にしています。文字のサイズも変更しています。:hover側も指定しています。これで多少見栄えがよくなった。

あとは小さい方の画像にポインタをのせるとズームインのポインタになるようにします。

.highslide {
    cursor: url(http://caramel-tea.com/highslide/graphics/zoomin.cur), pointer;
    outline: none;
}

これでずいぶんとかっこよくなった。あとは拡大された画像の下や右に文章を表示できれば最高ですね。がんばって方法を見つけようと思います。といっても今までのものも全部、highslide.jsの公式サイトから見てきたものを自分なりに解釈しているだけですけどね。

TRY AND ERROR!ですよ。では