フォームのinput type="submit"をロールオーバーさせる方法

フォームのボタンは<a>タグではないのでCSSではロールオーバーできないので(正確に言うと方法を知らない・・・)JavaScriptと合わせてロールオーバーさせる。

JavaScriptだけでは一発目にブラウザで表示したときに表示されないのをCSSのバックグラウンドで補って表示する。
HTML

<input type="submit" class="btn"
onmouseover="this.style.backgroundImage='url(img/btn_on.gif)'"
onmouseout="this.style.backgroundImage='url(img/btn.gif)'" />

CSS

input.btn{
	width:100px;
	height:100px;
	background:url(img/btn.gif) no-repeat;
	border:none;
	cursor:pointer;
	padding-top:100px;
	overflow:hidden;
	display: block;
}

CSSで指定している「btn.gif」はJavaScriptで指定してるものと同じ画像。
text-indent:-9999pxでテキストを飛ばすとIEで画像もいっしょに飛んでしまうバグがあるらしいので、padding-topを画像と同じ高さにしてテキストを飛ばして
overflow:hiddenで表示させないようにしている。

参考サイトhttp://d.hatena.ne.jp/wen000/20090614/1244955308

WordPressのページを簡単に見たまま印刷できるようにする裏技

っと言ってもそんな大げさなものではない。

印刷用の「print.css」を用意すればいい・・なんて思っていたんだけど

もっと簡単な方法があった。


<link href="<?php bloginfo('template_directory'); ?>style.css"
rel="stylesheet" type="text/css" />

っが、ワードプレスでの一般的なCSSファイルへのリンク方法だけど、その尻尾に


<link href="<?php bloginfo('template_directory'); ?>style.css"

rel="stylesheet" type="text/css" media="all" />

のように「media=”all”」を付け加えてあげるといい。
ちなみに「media=”screen”」はモニターの画面表示

参考サイト

知らんかった~・・・(-_-;)・・・