WEB 職人

var targetWindow;
// *********************************************************
// ウインドウの初期処理
// *********************************************************
function onLoad() {
	targetWindow = window.arguments[0];

	// *************************************************
	// 右クリックした場所のデータ
	// *************************************************
	var str = "";
	var tag = targetWindow.document.activeElement.tagName;

	switch( tag ) {
		case "A" :
			str = targetWindow.document.activeElement.href;
			break;
		default:
			str = targetWindow.document.activeElement.innerHTML;
			break;
	}

	// *************************************************
	// ID を含むリンクである事をチェック
	// *************************************************
	if ( str.search("\/status\/") < 0 ) {
		document.getElementById("text").value = "対象リンクがありません";
		return;
	}

	// *************************************************
	// ID を取得
	// *************************************************
	var arr = str.split("/");

	str = arr[arr.length-1];

	// *************************************************
	// API で埋め込みコードを取得
	// *************************************************
	var req = Components.classes["@mozilla.org/xmlextras/xmlhttprequest;1"].createInstance();
	req.open('GET', "https://api.twitter.com/1/statuses/oembed.xml?maxwidth=550&align=left&id=" + str, false);
	req.send();

	var resultXML = req.responseXML;
	str = resultXML.getElementsByTagName("html")[0].firstChild.nodeValue;
	document.getElementById("text").value = str;

	if ( document.getElementById("text").value == '' ) {
		document.getElementById("text").value = "★ データの取得に失敗しました。再試行して下さい"
	}

}

// *********************************************************
// ユーザが OK をクリックした時だけに一度実行される
// *********************************************************
function onOK() {
	close();
}

// *********************************************************
// クリップボードへのコピー
// *********************************************************
function setData() {

	const gClipboardHelper = Components.classes["@mozilla.org/widget/clipboardhelper;1"].
		getService(Components.interfaces.nsIClipboardHelper);
	var text_data = document.getElementById("text").value;
	gClipboardHelper.copyString(text_data);

}

// *********************************************************
// タブを開いて、そこを選択する
// *********************************************************
function openTab() {

	var text_data = document.getElementById("text").value;
	document.getElementById("codeTestIframe").contentWindow.postMessage(text_data,"*");
	window.opener.gBrowser.selectedTab = 
		window.opener.gBrowser.addTab("http://toolbox.winofsql.jp/tool_html_links.php?p=0&ns=1&ht=300#code_test");
	close();

}

var d=document;
var w=window;
var enc=encodeURIComponent;
var e=w.getSelection;
var k=d.getSelection;
var x=d.selection;
var s=(e?e():(k)?k():(x?x.createRange().text:0));
var s2=((s.toString()=='')?s:('%22'+enc(s)+'%22'));
var f='http://bit.ly/';
var l=d.location;
var p='?v=3&u='+enc(l.href) +'&s='+enc(d.title)+'%20'+s2;
var u=f+p;
try{
	if(!/^(.*\.)?tumblrzzz[^.]*$/.test(l.host))
		throw(0);
		tstbklt();
}
catch(z){
	a =function(){
		if(!w.open(u))
			l.href=u;
	};
	if(/Firefox/.test(navigator.userAgent))
		setTimeout(a,0);
	else
		a();
}

javascript:var%20d=document,w=window,enc=encodeURIComponent,e=w.getSelection,k=d.getSelection,x=d.selection,s=(e?e():(k)?k():(x?x.createRange().text:0)),s2=((s.toString()=='')?s:(enc(s))),f='http://winofsql.jp/sel.php',l=d.location,p='?s='+s2,u=f+p;try{if(!/^(.*\.)?tumblrzzz[^.]*$/.test(l.host))throw(0);tstbklt();}catch(z){a%20=function(){if(!w.open(u))l.href=u;};if(/Firefox/.test(navigator.userAgent))setTimeout(a,0);else%20a();}void(0)

<pre>
想定しているのは、いろいろ文章を書いた後の感情を表現する
顔文字を画像で綺麗に配置しようというものです

これは、PRE 内で使っています

いろいろたくさん記述していますが、ブラウザによって
違う部分を吸収しているものもありますし、画像が透過
ならば、『はんこ』のような使い方も想定しています　　　<div style='display:inline;position:relative;vertical-align:top;'><img src="https://lh4.googleusercontent.com/-ZPa1qc-n16o/ToVXVz7nWuI/AAAAAAAADbM/5NqxuDbVAXc/s80/freefont_hanko_ArmedBanana.png" style='position:absolute;left:0px;top:-25px;border:0px' /></div>




これは、『にこっ』と笑っているつもりです<div style='display:inline;position:relative;vertical-align:top;'><img src="https://lh6.googleusercontent.com/-5nb2DVZzHqY/TvvvISq5LEI/AAAAAAAAEIU/bvo9fqq9jnw/s60/_img.png" style='position:absolute;left:20px;top:0px;border:0px' /></div>
</pre>

<script src="https://ajax.googleapis.com/ajax/libs/prototype/1.7.0.0/prototype.js
" type="text/javascript"></script>
<div id="message" style='height:100px'></div>
<script type="text/javascript">  
Event.observe(window, 'load', function(){  
	var str="";
	str+="<img src=\"http://lh3.googleusercontent.com/-50LAkJyptvE/TuDBNQcFdtI/AAAAAAAAD8I/QSDzGMrYa_g/s335/_img.png\" /> ";
	document.getElementById("message").innerHTML = str;
});
</script>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("jquery", "1.7.1");
</script>
<div id="message" style='height:100px'></div>
<script type="text/javascript">  
$(window).bind('load', function() {
	var str="";
	str+="<img src=\"http://lh3.googleusercontent.com/-50LAkJyptvE/TuDBNQcFdtI/AAAAAAAAD8I/QSDzGMrYa_g/s335/_img.png\" /> ";
	document.getElementById("message").innerHTML = str;
});
</script>

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<div id="message" style='height:100px'></div>
<script type="text/javascript">  
google.setOnLoadCallback(function () {
	var str="";
	str+="<img src=\"http://lh3.googleusercontent.com/-50LAkJyptvE/TuDBNQcFdtI/AAAAAAAAD8I/QSDzGMrYa_g/s335/_img.png\" /> ";
	document.getElementById("message").innerHTML = str;
});  
</script>

<script src="http://maps.googleapis.com/maps/api/js?sensor=false" type="text/javascript"></script>  
<script type="text/javascript">  
google.maps.event.addDomListener(window, 'load', function () {
	alert('ページがロードされました');
});  
</script> 

<style type="text/css">
.WordWrap3 {
	word-wrap: break-word;
	float: right;
	width: 33%;
}
</style>
<table><tr><td>
<div class="WordWrap3" style='background-color:#777'>
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- 
</div>
<div class="WordWrap3" style='background-color:#999'>
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------  
</div> 
<div class="WordWrap3" style='background-color:#bbb'>
----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------  
</div> 
</td></tr></table>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta content="text/html; charset=euc-jp" http-equiv="Content-Type">
<title>モーダルダイアログサーバー</title>
<style type=text/css>
* {
	font-size: 12px;
}

textarea {
	width:700px;
	height:400px;
}
</style>
<script type=text/javascript>

var text;

if ( window.attachEvent ) {
	window.attachEvent('onmessage',function(e) {
		text = e.data;
		// 先頭コマンド 'A' で、ローカル保存
		if ( text.substr(0,1) == 'A' ) {
			if ( text.substr(1) == '' ) {
				localStorage['serverText'] = new String("");
			}
			else {
				localStorage['serverText'] = text.substr(1);
			}
		}
		// 先頭コマンド 'B' で、ローカル保存されていたデータを親ウインドウに POST
		if ( text.substr(0,1) == 'B' ) {
			parent.postMessage(localStorage['serverText'], "*");
		}
	});
}
else {
	window.addEventListener('message',function(e) {
		text = e.data;
		// 先頭コマンド 'A' で、ローカル保存
		if ( text.substr(0,1) == 'A' ) {
			if ( text.substr(1) == '' ) {
				localStorage['serverText'] = new String("");
			}
			else {
				localStorage['serverText'] = text.substr(1);
			}
		}
		// 先頭コマンド 'B' で、ローカル保存されていたデータを親ウインドウに POST
		if ( text.substr(0,1) == 'B' ) {
			parent.postMessage(localStorage['serverText'], "*");
		}
	}, false);
}

</script>
</head>
<body>
</body>
</html>

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("prototype", "1.7.0.0");
</script>

<script type="text/javascript">
// *********************************************************
// バッチその1
//
// XDomainRequest を使えるようにするのが目的です
// *********************************************************
Ajax.getTransport = function() {
    return Try.these(
      function() {return new window.XDomainRequest()},
      function() {return new XMLHttpRequest()},
      function() {return new ActiveXObject('Msxml2.XMLHTTP')},
      function() {return new ActiveXObject('Microsoft.XMLHTTP')}
    ) || false;
}

// *********************************************************
// バッチその2
//
// XDomainRequest 用の処理を追加します
// ※ onComplete のみ使えるように( 実際は onload )
// *********************************************************
Ajax.Request.prototype.request = function(url) {
    this.url = url;
    this.method = this.options.method;
    var params = Object.isString(this.options.parameters) ?
          this.options.parameters :
          Object.toQueryString(this.options.parameters);

    if (!['get', 'post'].include(this.method)) {
      params += (params ? '&' : '') + "_method=" + this.method;
      this.method = 'post';
    }

    if (params && this.method === 'get') {
      this.url += (this.url.include('?') ? '&' : '?') + params;
    }

    this.parameters = params.toQueryParams();

    try {
      var response = new Ajax.Response(this);
      if (this.options.onCreate) this.options.onCreate(response);
      Ajax.Responders.dispatch('onCreate', this, response);

      this.transport.open(this.method.toUpperCase(), this.url,
        this.options.asynchronous);

      if (this.options.asynchronous) this.respondToReadyState.bind(this).defer(1);

      // ここから : 変更した部分
      if ( Prototype.Browser.IE ) {
          var ieparam1 = this.options.onComplete;
          var ieparam2 = this.transport;
          this.transport.onload = function() { ieparam1(ieparam2) };
      }
      else {
          this.transport.onreadystatechange = this.onStateChange.bind(this);
      }
      // ここまで : 変更した部分
      this.setRequestHeaders();

      this.body = this.method == 'post' ? (this.options.postBody || params) : null;
      this.transport.send(this.body);

      /* Force Firefox to handle ready state 4 for synchronous requests */
      if (!this.options.asynchronous && this.transport.overrideMimeType)
        this.onStateChange();

    }
    catch (e) {
      this.dispatchException(e);
    }
}

// *********************************************************
// バッチその3
//
// とりあえず、処理を空にしていますが、パッチ2のほうで変更
// する事もできます
// *********************************************************
Ajax.Request.prototype.setRequestHeaders = function() {}

</script>

<input
	type="text"
	value="http://lightbox.on.coocan.jp/ver.php"
	id="xurl"
	style='width:400px;'
>
<input type="button" value="実行" onclick='testCall();'>
<script type="text/javascript">
function testCall() {
	new Ajax.Request($("xurl").value, {
		method: "get",
		asynchronous: true,
		onComplete: function(response) {
			alert(response.responseText);
		}
	});
}
</script>

<input type="button" value="action" onclick='alert("I can&#39;t fly.")'>

<input type="button" value="action" onclick='

	setTimeout(function(){
		alert("I can&#39;t fly.")
	},10);

'>

<script type="text/javascript">

	if ( window.attachEvent ) {
		window.attachEvent('onmessage',function(e) {
			document.getElementById("msg").value = e.data;
			document.getElementById("origin").value = e.origin;
		});
	}
	else {
		window.addEventListener('message',function(e) {
			document.getElementById("msg").value = e.data;
			document.getElementById("origin").value = e.origin;
		}, false);
	}

</script>
<input type="text" id="msg">
<input type="text" id="origin" style='width:400px;'>
<br><br>
<iframe
	src="http://lightbox.on.coocan.jp/message.htm"
	name="myframe"
	frameborder="1"
	scrolling="yes"
	width="500"
	height="100"
></iframe>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=EUC-JP">
</head>
<body>

<input
	type="text"
	id="message"
	style='width:200px;'
	value="日本語表示"
>
<input
	type="button"
	value="post"
	onclick='parent.postMessage(document.getElementById("message").value, "*")'
>

</body>
</html>

#!/bin/sh
echo "Content-Type: text/plain"
echo
echo "<pre>"
echo
pecl bundle imagick-3.0.1
echo
echo "</pre>"

<?php

$img = new Imagick();
$img->readImage("in.png");
$img->writeImage ( "out.jpg" );

$img->clear();
$img->destroy(); 

?>
OK

<?php
$img = new Imagick();
$img->readImageBlob(file_get_contents("heart.gif"));
$img->setImageFormat("ICO");

$handle = fopen("test.ico", "wb");

$img->writeImagesFile( $handle );
?>
OK

<style type="text/css">
.rbase {
	font-family: "ＭＳ ゴシック";
	font-size:14px;
	line-height: normal;
}
.rotation270 {
	font-family: "ＭＳ ゴシック";
	font-size:15px;
	line-height: normal;
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, -1, 0, 0, 0);
	-o-transform:matrix(0, 1, -1, 0, 0, 0);
	-ms-transform:matrix(0, 1, -1, 0, 0, 0);
	transform:matrix(0, 1, -1, 0, 0, 0);
	display: inline-block; 
}
</style>
<!--[if lte IE 8]>
<style type="text/css">
.rotation270 {
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
</style>
<![endif]-->

<pre class="rbase">
<span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span>

今何時ですか<span class="rotation270">？</span>
明日お<span class="rotation270">会</span>いしましょう

<span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span><span class="rotation270">§</span>
</pre>

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.7/themes/base/jquery-ui.css" type="text/css" />
<script type="text/javascript" src="https://www.google.com/jsapi"></script>

<style type="text/css">
.ui-widget {
	font-size:12px;
}
.ui-widget-content .ui-state-default {
	font-weight:bold;
	color:#000;
}
</style>

<script type="text/javascript">
google.load("jquery", "1.4.4");
google.load("jqueryui", "1.8.7"); 
</script>

<div style='height:230px;background-color:#c0c0c0'>
<input type="text" id="datepicker"/>
</div>

<script type="text/javascript">
$( "#datepicker" ).datepicker( {
	closeText: '閉じる',
	prevText: '&#x3c;前',
	nextText: '次&#x3e;',
	currentText: '今日',
	monthNames: ['1月','2月','3月','4月','5月','6月',
	'7月','8月','9月','10月','11月','12月'],
	monthNamesShort: ['1月','2月','3月','4月','5月','6月',
	'7月','8月','9月','10月','11月','12月'],
	dayNames: ['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
	dayNamesShort: ['日','月','火','水','木','金','土'],
	dayNamesMin: ['日','月','火','水','木','金','土'],
	weekHeader: '週',
	dateFormat: 'yy/mm/dd',
	firstDay: 0,
	isRTL: false,
	showMonthAfterYear: true,
	yearSuffix: '年'
} );
</script>

<style type="text/css">
.mtx {
	display:block;
	font-size:16px;
	width:16px;
}
.rotation90 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, -1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, -1, 1, 0, 0, 0);
	-o-transform:matrix(0, -1, 1, 0, 0, 0);
	transform:matrix(0, -1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
.rotation180 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(-1, 0, 0, -1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, -1, 0, 0);
	-o-transform:matrix(-1, 0, 0, -1, 0, 0);
	transform:matrix(-1, 0, 0, -1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
}
.rotation270 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, -1, 0, 0, 0);
	-o-transform:matrix(0, 1, -1, 0, 0, 0);
	transform:matrix(0, 1, -1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
}
.mirror {
	/* 横反転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(-1, 0, 0, 1, 0, 0);
	-webkit-transform:matrix(-1, 0, 0, 1, 0, 0);
	-o-transform:matrix(-1, 0, 0, 1, 0, 0);
	transform:matrix(-1, 0, 0, 1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(mirror=1);
}
.mirror90 {
	/* 横反転90 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, 1, 1, 0, 0, 0);
	-webkit-transform:matrix(0, 1, 1, 0, 0, 0);
	-o-transform:matrix(0, 1, 1, 0, 0, 0);
	transform:matrix(0, 1, 1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1,mirror=1);
}
.mirror180 {
	/* 横反転180 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(1, 0, 0, -1, 0, 0);
	-webkit-transform:matrix(1, 0, 0, -1, 0, 0);
	-o-transform:matrix(1, 0, 0, -1, 0, 0);
	transform:matrix(1, 0, 0, -1, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2,mirror=1);
}
.mirror270 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0, -1, -1, 0, 0, 0);
	-webkit-transform:matrix(0, -1, -1, 0, 0, 0);
	-o-transform:matrix(0, -1, -1, 0, 0, 0);
	transform:matrix(0, -1, -1, 0, 0, 0);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3,mirror=1);
}
.rotation45 {
	/* 回転 : cos sin -sin cos : Y軸下向きが正 */
	-moz-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	-webkit-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	-o-transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	transform:matrix(0.707, -0.707, 0.707, 0.707, 0, 0);
	filter: progid:DXImageTransform.Microsoft.Matrix(M11=0.707,M12=0.707,M21=-0.707,M22=0.707,Dx=-2,Dy=8);
}
</style>

<table>
<tr>
<td><span class='mtx rotation90'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を90度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation180'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を180度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation270'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を270度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転しています</td>
</tr>
<tr>
<td><span class='mtx mirror90'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して90度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror180'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して180度回転しています</td>
</tr>
<tr>
<td><span class='mtx mirror270'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を横反転して270度回転しています</td>
</tr>
<tr>
<td><span class='mtx rotation45'>海</span></td>
<td><span class='mtx rotation90'>▼</span></td>
<td>海を45度回転しています</td>
</tr>
</table>

<script src="http://www.google.com/jsapi?key=APIキー" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages: ["piechart"]});
</script>

<div id="chart_div" style="width: 300px; height: 240px;"></div>

<script type="text/javascript">

	var data = new google.visualization.DataTable();
	data.addColumn('string', '対象');
	data.addColumn('number', '件数');
	data.addRows(3);

	data.setValue(0, 0, '対象A');
	data.setValue(0, 1, 2000);
	data.setValue(1, 0, '対象B');
	data.setValue(1, 1, 3000);
	data.setValue(2, 0, '対象C');
	data.setValue(2, 1, 1500);

	var chart = new google.visualization.PieChart(document.getElementById('chart_div'));

	chart.draw(data, {width: 300, height: 240, is3D: true, title: '円グラフのタイトル'});

</script>

<link type="text/css" rel="stylesheet" href="http://lightbox.on.coocan.jp/tate-style.css"/>

<script src="http://www.google.com/jsapi" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
google.load("mootools", "1.3.0");
</script>
<script src="http://lightbox.on.coocan.jp/js/mootools-fxSlide.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
window.addEvent('domready', function() {

	var myVerticalSlide1 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.linear
	});
	$('v_toggle1').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide1.toggle('horizontal');
		}
		else {
			myVerticalSlide1.toggle();
		}
	});

	var myVerticalSlide2 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeIn
	});
	$('v_toggle2').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide2.toggle('horizontal');
		}
		else {
			myVerticalSlide2.toggle();
		}
	});

	var myVerticalSlide3 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeOut
	});
	$('v_toggle3').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide3.toggle('horizontal');
		}
		else {
			myVerticalSlide3.toggle();
		}
	});

	var myVerticalSlide4 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Quad.easeInOut
	});
	$('v_toggle4').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide4.toggle('horizontal');
		}
		else {
			myVerticalSlide4.toggle();
		}
	});

	var myVerticalSlide5 = new Fx.Slide('vertical_slide', {
		duration: 500,
		transition: Fx.Transitions.Pow
	});
	$('v_toggle5').addEvent('click', function(e){
		e.stop();
		if ( $('horizontal').checked ) {
			myVerticalSlide5.toggle('horizontal');
		}
		else {
			myVerticalSlide5.toggle();
		}
	});

});
</script>

<input id="v_toggle1" type="button" value="linear">
<input id="v_toggle2" type="button" value="Quad.easeIn">
<input id="v_toggle3" type="button" value="Quad.easeOut">
<input id="v_toggle4" type="button" value="Quad.easeInOut">
<input id="v_toggle5" type="button" value="Pow">
<br>
horizontal : <input id="horizontal" type="checkbox">

<pre id="vertical_slide">
この内容が縦に消えたり出現したりします。
http://mootools.net/more/ で、Fx.Slide をチェックしてライブラリ
をビルドして追加実装して使用します
</pre>

<div style='position:relative;height:320px;'>

<div style='position:absolute;padding:20px;font-size:20px;font-weight:bold;'>
こんにちは<br>
</div>

<img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/TPzJxQkpL5I/AAAAAAAABFQ/A4uYtKe14-0/b15architecture_exteriors014.jpg"
	style='border:solid 1px #000000;position:absolute;'
	onmouseover='
	if ( navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
		this.style.filter="alpha(opacity=30)";
	}
	else {
		this.style.opacity=.3;
	}
	'
	onmouseout='
	if ( navigator.userAgent.toLowerCase().indexOf("msie") > -1 ) {
		this.style.filter="alpha(opacity=100)";
	}
	else {
		this.style.opacity=1;
	}
	'
>

</div>

<link rel="stylesheet" href="http://lightbox.on.coocan.jp/js/lightbox_1/lightbox.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://lightbox.on.coocan.jp/js/lightbox_1/lightbox.js"></script>

<a 
	href="http://lh6.ggpht.com/_IzfbcNjqGuE/S1jkKM952HI/AAAAAAAAAPU/CheJ6YkRGPM/s720/b15architecture_exteriors014.jpg"
	rel="lightbox_1"
	title="my caption"
><img
	src="http://lh3.ggpht.com/_IzfbcNjqGuE/TPzJxQkpL5I/AAAAAAAABFQ/A4uYtKe14-0/b15architecture_exteriors014.jpg"
	style='border:solid 1px #000000;' 
></a>

#lightbox{
	background-color:#eee;
	padding: 10px;
	border-bottom: 2px solid #666;
	border-right: 2px solid #666;
	}
#lightboxDetails{
	font-size: 0.8em;
	padding-top: 0.4em;
	}	
#lightboxCaption{ float: left; }
#keyboardMsg{ float: right; }
#closeButton{ top: 5px; right: 5px; }

#lightbox img{ border: none; clear: both;} 
#overlay img{ border: none; }

#overlay{ background-image: url(overlay.png); }

* html #overlay{
	background-color: #333;
	back\ground-color: transparent;
	background-image: url(blank.gif);
	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src="overlay.png", sizingMethod="scale");
}

kbd{
	color: #555;
	background-color: #ddd;
	border-right: 1px solid #ccc;
	border-bottom: 1px solid #ccc;
	font-size: inherit;
	font-family: inherit;
	padding: 0 3px 2px 4px;
}

#keyboardMsg a {
	font-weight: bold;
	color: #303030;
	text-decoration: none;
}

var loadingImage = 'http://lightbox.on.coocan.jp/js/lightbox_1/loading.gif';
var closeButton = 'http://lightbox.on.coocan.jp/js/lightbox_1/close.gif';

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
</head>
<body style='margin:0'>

<script type="text/javascript" src="http://www.google.com/jsapi" charset="utf-8"></script>
<script type="text/javascript">
google.load("yui", "2.8.2");
</script>
<script type="text/javascript">
new YAHOO.util.YUILoader({
	require: ['colorpicker','fonts'],
	loadOptional: true,
	onSuccess: function() {
		var Event = YAHOO.util.Event;
		Event.onDOMReady(function() {
			picker = new YAHOO.widget.ColorPicker("color_picker", {
				showhsvcontrols: true,
				showhexcontrols: true,
					images: {
						PICKER_THUMB: "http://developer.yahoo.com/yui/examples/colorpicker/assets/picker_thumb.png",
						HUE_THUMB: "http://developer.yahoo.com/yui/examples/colorpicker/assets/hue_thumb.png"
					}
				});
	
				picker.on("rgbChange", function(o){
						picker.chgValue = o; 
					}
				);
				picker.on("available", function(o){
						// 初期編集不可
						document.getElementById(picker.ID.HEX).setAttribute("readonly","true") 
						document.getElementById(picker.ID.R).setAttribute("readonly","true") 
						document.getElementById(picker.ID.G).setAttribute("readonly","true") 
						document.getElementById(picker.ID.B).setAttribute("readonly","true") 
						document.getElementById(picker.ID.H).setAttribute("readonly","true") 
						document.getElementById(picker.ID.S).setAttribute("readonly","true") 
						document.getElementById(picker.ID.V).setAttribute("readonly","true") 
						picker.chgValue = {};
						picker.chgValue.newValue = [255, 255, 255];
						picker.chgValue.prevValue= [255, 255, 255];
					}
				);
	
				Event.on("reset", "click", function(e) {
					picker.setValue([255, 255, 255], false);
				});
	
				Event.on("gethex1", "click", function(e) {
					alert(picker.get("hex")); 
				});
				Event.on("gethex2", "click", function(e) {
					alert(document.getElementById(picker.ID.HEX).value); 
				});
				Event.on("gethex3", "click", function(e) {
					alert(picker.chgValue.newValue + " : " + picker.chgValue.prevValue); 
				});
		});
	}
}).insert();
</script>

<div class="yui-skin-sam" style='padding:10px;background-color: #eeeeee;width: 420px; height:220px;'>
<div id="color_picker" style='position: relative;'></div>
</div>

<input type="button" id="reset" value="初期値">
<input type="button" id="gethex1" value="RGB表示(1)">
<input type="button" id="gethex2" value="RGB表示(2)">
<input type="button" id="gethex3" value="RGB表示(3)">

</body>
</html>