対応ブラウザ： IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8
JSFormの応用サンプルです。
一枚のHTMLで動的にGoogleMapを表示させます。
JavaScriptのみでフォームを受信しているのでサーバーに依存せず、CGIやPHPの使えないサーバーでも使用出来ます。
もちろんJavaScriptが動作するブラウザじゃないと動きませんが、どっちにしろGoogleMapもJavaScriptが動かないと動きませんし。
対応ブラウザ： IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8
Getで飛ばされたFormの値をJavaScriptのみで取得します。
「何でJavaScriptだけでする必要があるんだよ！」とか言わないように！
そこに魅力を感じてください。ここはそういう所です。
<script type="text/javascript">
<!--
//サーチの値を取得して&区切りで配列に格納
var $_GETURL = location.search.split("&");
//0番目の配列Nameの"？"より後ろの文字列を取得（"?"の消去）
$_GETURL[0] = $_GETURL[0].substring(1,$_GETURL[0].length)
//$_GETStr関数を作る
function $_GET($_GETStr){
//配列の数だけループ
for(i in $_GETURL){
//取得したデータが配列内の"=”以前の文字列と同じなら
if($_GETStr == $_GETURL[i].substring(0,$_GETURL[i].indexOf("="))){
//配列の"="より後ろの文字列を返す
return decodeURIComponent(
$_GETURL[i].substring($_GETURL[i].indexOf("=")+1,$_GETURL[i].length)
);
}
}
}
//$_GET("任意の値")でフォームを取得します。
name = $_GET("name");
password = $_GET("password");
//-->
</script>対応ブラウザ： IE5.5 / IE6.0 / IE5.2mac / FF1.0 / NN7.0
今回も小物で、ウィンドウサイズを変更するブックマークレットです。
中身はそのまんまの何のひねりもないソースなんで説明省略。
単純ですけど、これって意外にブックマークに入れておくと役にたちますよ。
何の役にたつかはお察しください。
対応ブラウザ： IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8(*1)
CSSを使った小ネタ。"aタグ"にスタイルをつけて、ふせん風にしてみました。
画像は一切使わないで作るというコンセプトで"aタグ"をブロック化してから右ボーダーを太くしてhover属性などで色を変えています。
*1 [Operaではvisited が効きません]
<style type="text/css">
a{
display:block;
width:150px;
height:40px;
font-size:0.8em;
color:#666;
line-height:39px;
text-decoration:none;
background-color:#fafafa;
margin:10px;
padding-left:10px;
border:1px #999 solid;
border-left:10px #666 solid;
}
a:link {border-left-color:#999;}
a:visited {border-left-color:#009;background-color:#fff;}
a:hover {border-left-color:#900;}
</style>
対応ブラウザ： IE6.0 / IE5.5
参照画像をリアルタイムでサムネイル表示させるJavaScriptです。
画像をアップロードするまえに確認することができます。
全ブラウザで確認したわけではありませんが、どうやらIE以外はセキュリティの関係上ローカル画像は表示出来ない仕様となってるみたいです。
IE以外のブラウザは「file:///C:/Documents%20and%20Settings/」のようにsrcを書き換えないといけないみたいです。
めんどくさいから作りません。
Mozilla FirefoxではWEB上からローカル画像が参照出来ない!?
優しい方が教えてくれました。感謝。
セキュリティの観点からローカルファイルを読み込まないようになっています。 http://www.mozilla-japan.org/releases/mozilla1.8a4/known-issues.html#psm
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>リアルタイムサムネイル</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script type="text/javascript">
function imgc(objimg) {
document.getElementById("s_img").src= objimg.value;
document.getElementById("s_img").style.display="inline";
}
</script>
<style type="text/css">
#s_img{
display:none;
width:150px;/*この値でサムネイルサイズを指定*/
}
</style>
</head>
<body>
<form>
<input type="file" onChange="imgc(this)" /><br />
<img src="" id="s_img" /><br />
</form>
</body>
</html>
この広告は90日以上新しい記事の投稿がないブログに表示されております。
