2005年09月19日

JavaScriptのみで動的にGoogleMapを書き出し

対応ブラウザ: IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8

JSFormの応用サンプルです。
一枚のHTMLで動的にGoogleMapを表示させます。
JavaScriptのみでフォームを受信しているのでサーバーに依存せず、CGIやPHPの使えないサーバーでも使用出来ます。
もちろんJavaScriptが動作するブラウザじゃないと動きませんが、どっちにしろGoogleMapもJavaScriptが動かないと動きませんし。


サンプル

posted by 高速内弁慶 at 18:49| Comment(4) | TrackBack(0) | GoogleMap | このブログの読者になる | 更新情報をチェックする

JavaScriptのみでFormを受信

対応ブラウザ: IE6.0 / IE5.5 / IE5.2Mac / NN7.0 / FF1.0 / Opera8

Getで飛ばされたFormの値をJavaScriptのみで取得します。
「何でJavaScriptだけでする必要があるんだよ!」とか言わないように!
そこに魅力を感じてください。ここはそういう所です。


サンプル

JSForm

ソースと解説

<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>

9/25修正
posted by 高速内弁慶 at 17:53| Comment(3) | TrackBack(0) | JavaScript | このブログの読者になる | 更新情報をチェックする

2005年09月16日

ブックマークレットでウィンドウサイズを変更


対応ブラウザ: IE5.5 / IE6.0 / IE5.2mac / FF1.0 / NN7.0

今回も小物で、ウィンドウサイズを変更するブックマークレットです。
中身はそのまんまの何のひねりもないソースなんで説明省略。
単純ですけど、これって意外にブックマークに入れておくと役にたちますよ。
何の役にたつかはお察しください。

サンプル

1280x1024
1152x864
1024x768
800x600
640x480

posted by 高速内弁慶 at 23:23| Comment(4) | TrackBack(1) | Bookmarklet | このブログの読者になる | 更新情報をチェックする

2005年09月15日

ふせんバナー風リンク

label.gif

対応ブラウザ: 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>
posted by 高速内弁慶 at 21:59| Comment(41) | TrackBack(1) | CSS | このブログの読者になる | 更新情報をチェックする

2005年09月13日

画像をアップロードする前にサムネイルを表示させる。

対応ブラウザ: 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>
posted by 高速内弁慶 at 23:04| Comment(63) | TrackBack(230) | JavaScript | このブログの読者になる | 更新情報をチェックする

広告


この広告は60日以上更新がないブログに表示がされております。

以下のいずれかの方法で非表示にすることが可能です。

・記事の投稿、編集をおこなう
・マイブログの【設定】 > 【広告設定】 より、「60日間更新が無い場合」 の 「広告を表示しない」にチェックを入れて保存する。


×

この広告は1年以上新しい記事の投稿がないブログに表示されております。