2007年2月27日

Javascriptで画像置換の方法にもバリエーションを

CSSを利用した有名なテクニックのひとつに通称「画像置換」というテクニックがあります。
これは画像を背景として表示し、a:linkの場合とa:hoverの場合で背景を入れ替える事でスワップイメージが可能になるという少々トリッキ－なテクニックです。

僕はこのテクニックが大好きなんですが、少し前に大藤幹氏が記事に「画像置換は使われなくなってきている」と述べられた事を発端に画像置換を見直す論争が起きています。

要するに画像オフでCSSがオン環境だと見れないとかの意見を重視するか、
ナロードバンド、PDAなどに配慮し、ファイルサイズの軽量化に尽力するか。

アクセシビリティやユーザビリティについては諸々の意見はあるので
この件についての個人的なコメントとしては特にないですが、選択できる方法は多ければ多い程良いには違いないですよね。

Dreamweaverの吐き出すscriptは異常に長くて使いづらいと思っている方も多いとは思います。
そんな方はこちらのサイトで公開されているスクリプトを利用してはいかがでしょうか

Javascriptで画像置換の方法にもバリエーションを　の続きを読む　＞＞

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年12月 7日

【DOM Tool】超便利TOOL!!Ajaxもラクラク|HTMLからDOM作成文を生成する

久々にこれはSUGEEEEE!!ってやつを見つけました。
最終的に出力したい形のHTMLを入力すると、createElementとか書くのが結構面倒くさい構文をスラスラ書き出してくれちゃうcoolなtoolです↓

DOM Tool

使い方は単純明快です、詳細は以下の通り。

【DOM Tool】超便利TOOL!!Ajaxもラクラク|HTMLからDOM作成文を生成する　の続きを読む　＞＞

• 個別ページ｜
• コメント(327)｜
• トラックバック(0)

2006年10月13日

ブラウザが地震を起こすjavascriptコード

今24見てます、やっぱ面白いですね、メルトダウンしちゃうんでしょうかドキドキです。

本日は不吉な13日の金曜日ということで24みながら不吉なコードを書いてみました。 したのリンクを押すとブラウザが地震を起こします（何の役にも立ちません）。

地震だ～

スクリプトの内容は以下となります。
今回は特に解説するほど難しくないですね

<script language="JavaScript" type="text/javascript">

//ここで震度を設定
var wid = 7;

//地震を起こすファンクション
function earthquake(){
	for( var i =wid; i>0; i-- ){
		for(var j =0; j<10; j++ ){
			self.moveBy(i,0);
			self.moveBy(-i,0);
		}
	}
}
</script>

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年10月 2日

文字サイズ変更ボタンってprototype.jsでよくない？

と、いうわけで。

こないだ導入したばっかりのprototype.jsですが便利なファンクションやメソッドが盛りだくさんですっかり長いスクリプト書く必要が無くなり文法なんて忘れてしまいました。

今日prototype.jsのリファレンスを読んでいたら

setStyle(element, cssPropertyHash)

element: 要素オブジェクトかID, cssPropertyHash: 適用される CSS プロパティハッシュ)

指定された cssPropertyHash 引数の値から、要素の CSS プロパティを設定する。

と、いうとてもとても便利なメソッドを発見しまして、
これSUGEEEE！！！！と思って早速こんなの作ってみまんた(^ω^)

文字サイズを拡大縮小できるscriptサンプル

Javascriptのソース

//文字サイズ大用ファンクション
function setLargeFont(){
  Element.setStyle('stopnlisten', 
  { 
	"font-size" : "x-large"
  });
}
//文字サイズ中ファンクション
function setMidStyle(){
  Element.setStyle('stopnlisten', 
  { 
	"font-size" : "medium"
  });
}
//文字サイズ小ファンクション
function setSmallStyle(){
  Element.setStyle('stopnlisten', 
  { 
	"font-size" : "x-small"
  });
}

※'stopnlisten'はbodyに指定してあるidです。サイズ変更したい要素のidに適宜変更してください

HTMLのソース

<ul id="font-setting">
<li><button onclick="setLargeFont();" id="font-large">大</button></li>
<li><button onclick="setMidStyle();" id="font-medium">中</button></li>
<li><button onclick="setSmallStyle();" id="font-small">小</button></li>
<ul>

ちょっと前からアクセシビリティの配慮に結構気を遣うような潮流となりましてページの右上とかにちょこんと文字サイズを変更できるボタンついてますよね

参考

• UNITED ARROWS LTD.とか
• 神戸市ホームページとか
• 三菱UFJ証券とかね

これってよそ様のサイトでは外部CSSを切り替えてたんですけどprototype.jsを利用したらこんなに簡単にできました

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年9月30日

プロとして恥ずかしくないJavascriptの大原則

表題の本（プロとして恥ずかしくないJavascriptの大原則）買いました

ここ半年ほどJavascriptが世間一般的に熱いですね。
最近GUCCIのサイトも全体に渡ってjavascriptでもっさり動くサイトにリニューアルされましたし、すっかりDHTMLやAjaxは定番技術として定着しました。

という事で当blogにものjavascriptの波がやってきました。
とりあえずprototype.jsとoverLIBというライブラリを使用してちょろい感じのスクリプト組んで、
はてブのブックマークレットあたりにはっつけてみました

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年8月 2日

出会い、それは突然

いつも気配り上手で危ないところにははすぐ警告をだして注意してくれる、よく気がつくよい子。
頑張りやさんがゆえたまに無理しすぎて動けなくなっちゃう事も多いけれど、日本語がたまにわからない時があるけども。
とっても器用でサポート上手、おまけに質素でお金がかからないなんて。
今日はこんなパーフェクトなAptanaちゃんと部長の紹介で出会いました。

今とあるSNSを新規に構築しています。
どうみてもインターフェイスの機能を実装するにはDOMが必要なんですが僕はjavascriptの経験殆ど無し、5行くらいしか書いたことないですよ。
Actionscriptは多少経験があるんですが全く同じというようにはなかなかいきません。

ほとほと困り果てた上にたどり着いたのがprototype.jsとAptana（詳しくはGIGAZINE様の記事『Dreamweaverの代わりになるフリーソフト「Aptana」』へ）。実際に使用している動画がこちらで見られます「http://www.aptana.tv/」

しかしながらAptanaさんもDreamweaverのかわりをつとめるとなるとキツイものがあるというか英語が読めなくもないが馴染まないというか・・・
個人的にはHTML＋CSSはDreamweaver（コーダーならばIDEなど使わなくともどのブラウザでどんなバグがあるか把握したいものです）が最速。
JavascriptはAptana最速かも（コードヒントがあれば尚よし、英語理解できてないだけであるかもしれません・・・）。

Aptanaがサポートしてくれるので調子にのって明日はLightbox（今更）あさってはDojo.js（今更）に挑戦してみます！

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)

2006年8月 1日

livedoor clipに追加するアイコンを追加する

今日は割りと早くかえれたんで、また機能追加しました。

最近ログを見ているとかなりlivedoor clipから来ている事に気づきました、僕は個人的にははてな派なんですが今日ユーザー登録してみると結構ブックマークされているものですね、ついでなんで簡単にブックマークできるアイコンを設置してみましたよ。

livedoor clipから提供されているリンク先は

http://clip.livedoor.com/clip/add?link='+encodeURI
Component(location.href)+'&title='+encodeURICompone
nt(document.title);

ですから、URIに関係する部分（イコール[=]以下の部分）にうまくMTタグを挿入して

＜a href="http://clip.livedoor.com/clip/add?link=
＜$MTEntryPermalink archive_type="Individual"$＞
&title=＜$MTEntryTitle$＞&jump=myclip"＞
＜img src="/img/myclip.gif" alt="このエントリを li
vedoor クリップへ追加" title="このエントリをlivedoor 
クリップへ追加" /＞

以上で完成作業時間たったの５分
イメージの部分はアレンジしてください

• 個別ページ｜
• コメント(0)｜
• トラックバック(0)