JavaScript

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

by

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

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

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

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

続きを読む

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

by

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

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

続きを読む

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

by

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

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

続きを読む

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

by

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

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

»サンプル

続きを読む

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

by

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

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

続きを読む

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

by

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

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

続きを読む

[mootools]ボタンでスタイルシートを切り替える（Cookie使用）

by

mootoolsを使ってスタイルシートを切り替えるサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

ベースのCSSをlinkさせておいて、クリックでCSSファイルを切り替えるようにする。
ボタンをクリックしたときCookieを発行し、リロードしたら記憶させたCSSファイルを読み込んで表示する。
リロードしても選択したCSSを表示する動作になるが、Cookie読み込んだりAssetしたりというJavascriptの動作分だけ、CSSが切り替わるのにタイムラグが発生する。
Assetよりｓｒｃだけ書き換えた方がいいのかも。

書き散らしたから汚い…

続きを読む

[mootools]ボタンでスタイルシートを切り替える

by

mootoolsで最近ブログに多いスタイルシート切り替えのサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

スタイルの違うファイルを３種類用意し、それぞれボタンを押すと切り替わるようにするもの。
このサンプルは記憶させないので、ページを開くたびにシートがデフォルトに戻る。

続きを読む

[mootools]ＴＯＰへ戻るリンク

by

mootoolsで長いページにあると便利なＴＯＰへ戻るリンクを自動挿入するサンプル。
Ｄｒｅａｍｗｅａｖｅｒだとアセットとかテンプレートとかあるのでそっち使ってもいいけど。

※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

続きを読む

[mootools]メールリンク自動挿入

by

直接ＨＴＭＬにメールアドレスを記載していると、ロボット収集されてスパムの標的にされてしまう。
それを防ぐ為の方法として

  • mailto:を使わない
  • メールアドレスを画像にする
  • メールアドレスの＠を別の文字にする
  • Flashテキスト（ボタン）を使う
  • Javascriptで記述

以上がよく使われる手段だろうか。
Javascriptではヘッダに記載してたらまったく意味がないので注意。

Ajaxライブラリmootoolsを使ってメールリンク自動挿入をする方法を考えてみた。

※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

続きを読む

[mootools]パンくずリンク自動記入

by

mootoolsでいちいち面倒くさいパンクズリンクを自動挿入するサンプル。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

でもこれだとＨＴＭＬソースにはリンクやテキストが書き込まれないから、ＳＥＯ対策という面からしたら微妙。スゴイ楽なんだけど。

続きを読む

[mootools]validな別窓リンク

by

mootoolsで別窓表示させる方法。
※このサンプルは前バージョン（1.1.2）で書いたものなので1.2では動かないかも

日本だと、別サイト＝別窓という認識が一般的なので、法人サイトなんかで別のサイトを表示させるリンクが別窓じゃないと「何でこれ別窓じゃないの？」とか言われてしまうこともしばしば。
でも別窓表示の target=”_blank”は、ＸＨＴＭＬだと非推奨要素なのでjavascriptを使う。
普通に書くと色々面倒だからmootoolsというライブラリを使用する。

続きを読む