[JS]フォームボタンまとめ

使用頻度の高いフォームボタンのメモ。
主にJavascriptを使用したものです。

XHTML形式のinputとbuttonの2タイプ用意してみた。
onclickとonkeypressを別のタグ(aとか)に書いても機能します。

ウィンドウを閉じる

<input type="button" value="ウィンドウを閉じる" onclick="window.close();" onkeypress="window.close();" />
<button type="button" onclick="window.close();" onkeypress="window.close();">ウィンドウを閉じる</button>

続きを読む

[JS]季節で画像を変更するスクリプト

季節(4カ月おきくらい)でイメージ画像を自動更新するスクリプトのサンプル。
しかしこの間隔ならスクリプト使うこともない気がする。

<img src="images/00.png" alt="季節で変わります" id="change" width="500" height="200" border="0"/>

変更したい画像にIDをつける。サンプルではchangeとつけた。

続きを読む

[JS]ページが開いたら自動でフォーカスを合わせる

お問い合わせフォームの先頭のテキストエリアとかに、ページが開いた時フォーカスを合わせる方法について。
name、ID、配列の各サンプルを挙げてみる。

name値の場合

window.onload=function(){document.formID.inputName.focus()}

formIDがフォームタグのID値
inputNameがフォーカス合わせるフォームのname値。

bodyでイベントハンドラでもいい。

<body onLoad="document.formID.inputName.focus()">

続きを読む

[JS]ステータスバーテキストを非表示にする

通常ステータスバーにはリンク先のURLが表示されるが、それを表示しないようにするスクリプトのサンプル。
事情はどうあれ、フィッシングに使われる手法なので使用には注意が必要。

昔リンクの説明などをステータスバーに表示させたり、ムダにスクロールするようなエフェクトつけるのが流行ったが、
ツールチップが広まった現在はセキュリティが下がるとして敬遠されるテクニックになっている。

なおステータスバー関連のスクリプトは、ブラウザのセキュリティ(Javascript詳細)設定で
「ステータスバーのテキストを変更しない」というものがONになっていると、スクリプトの内容に関係なくスルーされる。

IE系はOFF(設定すら存在しない)。
FireFoxは上記設定がデフォルトでON。
SleipnirもたぶんON(スルーされる)
GraniはOFF。
OperaはOFFだが挙動がちょっと違う(テキスト変更は出来るが、URLが表示されてから指定したテキストが表示されるので完全非表示にはならない様子)
Safariもスルーされる。

続きを読む

[JS]ロールオーバースクリプト(画像名のOn/Offで判別)

前の記事はオーバーの画像だけonを追加するものだったが、
この記事ではオーバーの画像にON、アウトの画像にOFFをつけて、ONとOFFの部分だけで判別する。

ページ内の画像でoffが付いてるもの全てロールオーバーさせる、ということも可能。

続きを読む

[JS]見てるページのメニューを変更する(ボタンが画像の場合)

前に書いた記事のクラスを追加するタイプの場合だと、リンクしてるものが文字じゃなくて画像だったりすると画像そのものが変更出来ない。
そんな質問を見つけたので、画像ボタンの場合のものを作ってみた。

基本の判定は同じ(ファイル名とリンクのsrc一致)で、一致した場合クラス追加じゃなくて画像のsrcに_onを追加します。

続きを読む

[JS]見てるページのメニュースタイルを変更する-HighlightNavigation-

特にタブっぽいつくりをしてるメニューなんかだと、表示してるページのナビゲーションメニューを別のスタイルにしたいという場合がある。
開いてるページのボタンにだけclass=”current”とかつければ出来るんだけど、メニューをテンプレートやライブラリにしちゃうと手書きでは無理。

そういう状況がまさに今日あったので勉強がてら作ってみた。

»サンプル

続きを読む

[JS]擬似クラス:hoverをtrに適用するjavascript

IEだと擬似クラスの:hoverがaタグにしか適用されないので、aタグ以外のものに:hoverつけたいときに困ることが多い。
:hoverをつける要素にaタグが入って、それがリストのように1行(ないし1ブロック)しかないのなら、aをブロック要素にすることで回避も可能だ。
でもそれだとtrでtdが2つ3つ並んでる状態になったりすると不可能になる。
というわけで、手っ取り早くいくならやはりjavascriptになると思う。

参考にtrの背景色を:hoverで変更するスクリプトを2つ紹介。

続きを読む

[JS]Javascriptの有効・無効でCSSを変更する

javascriptが無効の時、有効で使ってるCSSだと表示がおかしくなる場合の回避方法について。

最近作ったサイトが、コンテンツの表示をmootoolsで動かしていて(スライドとかで)、javascript無効にすると まったく見えない状態になってしまう。
XHTMLソースを変更しているわけではないので、CSSだけ変更すれば見れる状態になる。(CSS無効でもXHTMLだからそれなりに見れる)
というわけで、javascriptの有効・無効でCSSを変更する方法についてのメモ。

続きを読む