シンプルなコードでロールオーバー／javascript

■参照サイト■
意外とよく使うJavascript　ロールオーバー
by maro-z.com

■対象フレームワーク■
なし

■サンプル■
class="rollover" を指定している画像が、
マウスオーバー時にsample_on.gifに差し替わる。



■javascriptコード■
function initRollOvers() {
if (!document.getElementById){
return;
}

var preLoads = new Array();
var allImages = document.getElementsByTagName('img');

for (var i = 0; i < allImages.length; i++) {
if (allImages[i].className == 'rollover') {
var src = allImages[i].getAttribute('src');
var ftype = src.substring(src.lastIndexOf('.'), src.length);
var oSrc = src.replace(ftype, '_on'+ftype);

//-- スワップ元、スワップ先画像の登録
allImages[i].setAttribute('pSrc', src);
allImages[i].setAttribute('oSrc', oSrc);

//-- イメージのプリロード
preLoads[i] = new Image();
preLoads[i].src = oSrc;

//-- イベントの設定
allImages[i].onmouseover = function() {
this.setAttribute('src', this.getAttribute('oSrc'));
}
allImages[i].onmouseout = function() {
this.setAttribute('src', this.getAttribute('pSrc'));
}
}
}
}

function addOnload(func){
if ( typeof window.addEventListener != "undefined" ){
window.addEventListener( "load", func, false );
}else if ( typeof window.attachEvent != "undefined" ) {
window.attachEvent( "onload", func );
}else{
if ( window.onload != null ){
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
window[func]();
};
}else
window.onload = func;
}
}
addOnload(initRollOvers);

シンプルなコードでロールオーバー／jquery.js

■参照サイト■
意外とよく使うJavascript　ロールオーバー
by maro-z.com

■対象フレームワーク■
jquery.js

■必要なプラグイン■
jquery.rollover.js
※リンク先ページ中ほどからDLできる。

■サンプル■
class="rollover" を指定している画像が、
マウスオーバー時にsample_on.gifに差し替わる。



■jquery.rollover.js　■
var preLoadImg = new Object();

function initRollOvers(){
$("img.rollover").each(function(){
var imgSrc = this.src;
var sep = imgSrc.lastIndexOf('.');
var onSrc = imgSrc.substr(0, sep) + '_on' + imgSrc.substr(sep, 4);
preLoadImg[imgSrc] = new Image();
preLoadImg[imgSrc].src = onSrc;
$(this).hover(
function() { this.src = onSrc; },
function() { this.src = imgSrc; }
);
});
}
$(function(){
initRollOvers();
});

jquery.corner.js／画像を使わず、簡単に角丸ボックス化

■対象フレームワーク■
jquery.js

■必要なプラグイン■
jquery.corner.js

■構文■
デフォルトの場合



角丸の大きさを指定する場合
$('#sample').corner("30px");/*全ての角に30pxの大きさ*/

角丸箇所と大きさを指定する場合
$('#sample').corner("top 30px");　/* id="sample"の要素に対して、左上、右上に30pxの大きさ */
$('#sample').corner("top 30px");　/* id="sample"の要素に対して、左上、右上に30pxの大きさ */
などとできる。

さらに個別に指定したいときは、
　tl……左上コーナー、tr……右上コーナー
　bl……左下コーナー、br……右下コーナー
で、指定できるので

$('#sample').corner("tl 30px");　/* id="sample"の要素に対して、左上に30pxの大きさ*/
などとできる。

class="sample2" に対して効果をかけたいときは、
$('.sample').corner("tl 30px"); /* class="sample2"の要素に対して、左上に30pxの大きさ */
と、cssと同じように記述する。


■参照サイト■
マジで簡単！！画像を使わず角丸を実現するjQuery Cornerbyバシャログ。

.className エレメントのclass名を書き換える

エレメントに指定されているclass名を、指定する名前に変更する。
特定のid以外にも、特定のエレメント（例えば、＜p＞や＜table＞）など
一括書き換えも可能。

■対象フレームワーク■
なし

■構文■
document.getElementById("hogehoge").className="変更後の名前"

.className エレメントのclass名を取得

エレメントに指定しているclass名を取得する。

■対象フレームワーク■
なし

■構文■
document.getElementById("hogehoge").className

.style.display 特定のエレメントを表示/非表示する

id要素に関するスタイル情報を変更し、表示/非表示を実行する。

■対象フレームワーク■
なし

■構文■
document.getElementById("hogehoge").style.スタイル要素="変更後の値"

document.getElementById("hogehoge").style.display="none"

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

ハイパフォーマンスWebサイト ―高速サイトを実現する14のルール

posted with amazlet at 09.06.03

Steve Souders スティーブ サウダーズ
オライリージャパン
売り上げランキング: 5908

おすすめ度の平均:

仕事で作る人、趣味で作る人、両方にためになります
フロントエンド方面の最適化手法がわかる本
目からウロコでした。
これからのフロントエンド・エンジニアリングの重要性
簡単なWebサイトの高速化

Amazon.co.jp で詳細を見る

jquery

■最新のjquery■
本家（英語サイト）
jQuery: The Write Less, Do More, JavaScript Library:

■お役立ちサイト■
----------
jQuery 1.3.2 日本語リファレンス:
サンプルソースを使い丁寧に解説されています。

prototype.js

■最新のprototype.js■
本家（英語サイト）
Prototype JavaScript framework: Easy Ajax and DOM manipulation for dynamic web applications:

■お役立ちサイト■
----------
prototype.jsを読み解く
ver1.5.11の中身のコードを、全10回に分けて丁寧に解説されています。
ボリュームはありますが、とても勉強になります。

----------
prototype.js逆引きサンプル集
prototype.jsリファレンス
こちらもサンプルソースを使い丁寧に解説されています。

リファラー（リンク元URL）を参照する

リファラー（リンク元URL）を参照する。
ブックマークや直入力によるページアクセスの場合は値は存在しない。

■対象フレームワーク■
なし

■構文■
document.referrer

■サンプル■
<script>
document.write(
'前ページのURLは'+
'document.referrer'+
'です');
</script>

----------------
このページを表示する前ページのURLが表示されます。

※ブックマークなどから直接表示された場合はURLは表示されません。