お母さん

・・・・・・・

2012年 02月 02日

左のサムネイル画像にマウスカーソルを重ねると元のサイズで表示されます。JavaScript を使わずに下記のような (X)HTML と CSS だけで実装しているので手軽に導入できます。

HTML

文章

※href, src, width, height, alt の値は、使用する画像に準じます

(css)

a.thumbnail {
display: block;
float: left;
margin: 0.3em 10px 0.3em 0;
}
a.thumbnail img{
position: absolute;
}
a.thumbnail,
a.thumbnail img{
width: 100px;
height: 100px;
}
a.thumbnail:hover {
border: none;
cursor: default;
}
a.thumbnail:hover img {
width: auto;
height: auto;
}

(マウスで大きくする方法）

# by pckmieko | 2012-02-02 10:08 | その他 | Trackback | Comments(0)

練習

2012年 02月 02日

ほんばにぼー、ぼくはゆで卵が好きやからね。

マウスを置くと大きくなる

ＣＳＳコード

p a:hover {
font-size: larger;
}

ＣＳＳコード

文章

(css)

a.thumbnail {
display: block;
float: left;
margin: 0.3em 10px 0.3em 0;
}
a.thumbnail img{
position: absolute;
}
a.thumbnail,
a.thumbnail img{
width: 100px;
height: 100px;
}
a.thumbnail:hover {
border: none;
cursor: default;
}
a.thumbnail:hover img {
width: auto;
height: auto;
}

div.img-move a:hover {
position: relative;
top: -1px;
left: -1px;
}
div.img-move a:active {
position: relative;
top: 5px;
left: 5px;
}
画像が揺れる

.popup a:link img.zoom,
.popup a:visited img.zoom,
.popup a:active img.zoom,
.popup a:focus img.zoom{
display:none;
border-style:none;
text-decoration:none;
}
.popup a:hover img.zoom{
border-style:none;
display:block;
text-decoration:none;
}

最後の行の幅と高さは数字を変更できる。

# by pckmieko | 2012-02-02 10:01 | その他 | Trackback | Comments(0)

池

2011年 11月 03日

フリーソフトは、「Reflet」です。http://www.photofiltre.com/

＜hr color="red"＞
この線の作り方
＜hr color="色"＞
赤→　red　紺　→　mediumblue　と入れるのです。

＜hr size="10" width="50%" color="green"＞

--------------------------------------------------------------------------------

＜hr size="10" color="green"＞

--------------------------------------------------------------------------------

＜・＞は半角で入力

# by pckmieko | 2011-11-03 22:13 | その他 | Trackback | Comments(1)