2009年10月17日ショートショート とりぶうの読むコント~宮古島  Javascriptでランキングクリック時の画像切り替える奈良の鹿とマイケル・ジョーダン 


Javascriptでランキングクリック時の画像切り替える

テーマ : プログラミング ジャンル : コンピュータ
はじめまして しかちく です。最初で最後の登場となると思います。

いつも、とりぶうが大変お世話になっています。特に常連の方々のコメントは楽しく拝見しています。

さて、以前からメール等々でよく以下の質問を頂きます。

「ランキングのクリックがされると絵が変わりますが、どうすればいいんでしょうか?教えてください。だめでしょうか?・・・・・」


ダメなことないんです。ただ、説明する自信がありません。でも、たびたび聞かれるので一応やってみました。とりあえず一番下のランキングをすべてクリックして動作を確認してください。(我田引水!)


※以下はJavascriptを理解されているのを前提に説明しますので、Javascriptに関しては別のところで研究してくださいね。


1 まずの中にJavascriptファイルが使えるようにしてあげる。(1行目)そして、記事最後部に記述しているプログラム名rankimage1.jsを読み取れるようにする。(2行目)


<head>

以下を追加。
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript" src="ディレクトリパス/rankimage1.js"></script>
ここまで

</head>

2 <body>   </body>の中で何個クリックしてくれたか変数を作って初期化する。


<body>下に以下を貼り付ける。変数の個数はランキングバナーの数によって変更してください。

<!ChangeImage>
<script type="text/javascript">
<!--
var ra=0;
var rb=0;
var r1=0;
var r2=0;
var r3=0;
var r4=0;
var r5=0;
var r101=0;
// -->
</script>
ここまで

3 そして、ランキングのバナーを貼り付けたいところに以下のように貼り付ける。バナー等々は各自変更してくださいね。

ポイントは、onClick="RankingClick2('<%topentry_title>','1')" です。 意味はonClick="RankingClick2('ファイル名','バナー番号')" です。

<%topentry_title>はFC2のタグなので、他の方は別の名前を自由につけてください。これは、記事ごとにランキングを設置する場合に画像名を変えておかないと動かなくなるためです。

また、'1' 等の数字はバナーナンバーです。このブログでは、ランキングを5つ使っているので1から5までつけています。どのバナーがクリックされたかを判断します。

ここから
<a href="http://blogranking.fc2.com/in.php?id=220859" target="_blank"><img src="http://blog-imgs-12.fc2.com/t/a/n/tanno10/fc2ranking.gif" alt="FC2Ranking" onClick="RankingClick2('<%topentry_title>','1')"border="0" /></a>

<a href="http://novel.blogmura.com/novel_shortshort/" target="_blank"<>img src="http://novel.blogmura.com/novel_shortshort/img/novel_shortshort88_31.gif" width="88" height="31" onClick="RankingClick2('<%topentry_title>','2')" border="0" alt="にほんブログ村 小説ブログ ショートショートへ" /></a>

<a href="http://blog.with2.net/link.php?545188" target="_blank"><img src="http://blog-imgs-12.fc2.com/t/a/n/tanno10/blogranking.gif" alt="blogranking" onClick="RankingClick2('<%topentry_title>','3')" border="0" /></a>

<a href="http://www.dendou.jp/in/2177177917" target="_blank"><IMG SRC="http://img.dendou.jp/b_b_wp.gif" onClick="RankingClick2('<%topentry_title>','4')" BORDER="0" ALT="人気ブログランキング【ブログの殿堂】"></a>

< href="http://kutsulog.net/cat12-1.php?id=68501" target="_blank"><img src="http://blog-imgs-12.fc2.com/t/a/n/tanno10/kuturogu.gif" alt="クツログ" onClick="RankingClick2('<%topentry_title>','5')" border="0" /></a>
ここまで

4 次ががとりぶうが変わる前の最初の絵を貼る場所です。ポイントは同じサイズの絵を6枚用(初期画像+ランキング5分)意すること。サイズが違うと動きません。" name="<%topentry_title>"でファイル名をつけています。この名前がバナー部分と異なると認識しません。

ここから
<img src="http://blog-imgs-34.fc2.com/t/a/n/tanno10/r1tori0.gif" alt="ショートショートとりぶうの読むコントの応援をお願いします。" name="<%topentry_title>">
ここまで

5 最後にプログラムの内容です。外部ファイル化しています。
ファイル名はrankimage1.jsです。私はwordでエンコード化したテキストファイルとして
保存しました。.jsの拡張子がついていれば名前は何でもかまいませんが、
一番最初のsrc="ディレクトリパス/rankimage1.js をあわせてくださいね。

クリックしてくれた個数をカウントしその数に合わせた画像を表示する
プログラムです。同じバナーを何度押しても1回にしかカウントしないようになっています。
リロードせずに画像を切り替えます。



function RankingClick2(imageName,Rno)
{
var r10=Rno;
if ( Rno==1 ) {
r1=1;
}else{
if ( Rno==2 ) {
r2=1;
}else{
if ( Rno==3 ) {
r3=1;
}else{
if ( Rno==4 ) {
r4=1;
}else{
if ( Rno==5 ) {
r5=1;
}}}}}


//r1=1;
ra=r1+r2+r3+r4+r5
// document.write(r10);

//条件分岐
switch(ra){
case 1: document.images[imageName].src='1枚目の画像アドレス(星一個)';
break;
case 2: document.images[imageName].src='2枚目のアドレス(星2個)';
break;
case 3: document.images[imageName].src='3枚目のアドレス';
break;
case 4: document.images[imageName].src='4枚目のアドレス';
break;
case 5: document.images[imageName].src='5枚目のアドレス';
break;
}
}

6 以上です。正直、説明には困りはてました。プログラムを考えるのにも大変苦労しましたが、説明も難しいです。



    またひっそりと隠れたいと思います。ありがとうございました。

P.S.

   クーピーちゃん:いつも優しい言葉ありがとう。(現在研究中のメニューをおおらかに見てくれること)
   のぶちんさん:神の声届いてますよ。(イラストをほめてくれたこと。)
   イノぶたさん:朝のコメントを読むのが楽しみです。

その他の皆さんもありがとう!これからもおおらかに、おおざっぱに見守ってくださいね!バイバイ!

関連記事
スポンサーサイト

少しでも面白かったら、下をクリックで応援よろしくお願いします。とりぶうの絵が踊るよ!
FC2Ranking にほんブログ村 小説ブログ ショートショートへ blogranking 人気ブログランキング【ブログの殿堂】 クツログ
ショートショートとりぶうの読むコントの応援をお願いします。
あしたも、お待ちしております。! ブログパーツ 健康食品

奈良の鹿とマイケル・ジョーダン

テーマ : 日記 ジャンル : 日記
みなさまこんにちは。

土曜日、いかがお過ごしですか?

このあいだから子どもたちがしきりに

『かむ~とニャンニャンニャンニャニャニャニャン~』

と歌っています。

なんじゃそれ?

と思っていたら、CMだったんですね。

わたしが見たバージョンでは、奈良の鹿とともに踊っていました。

うしろには奈良のキャラクター『まんとくん』が。

この時点で、坊さんに角をはやした『せんとくん』の負けははっきりした、ということなんでしょうか?

いまどこをさまよっているの?せんとくん!

せんとくん!腐らずにしっかりせんと~!

というダジャレはどうでもいいとして。

この季節になると、わたしはむしょうに奈良に行きたくなったものです。

大阪に住んでいるとき、年中行事のように毎年10月には奈良に出かけていました。

秋の古都というのは格別の美しさがあります。

鹿も絵になります。

でも、鹿ってけっこう凶暴。

特に角の立派なやつなんかは、えらそうでえらそうで、おだやかな草食動物という風情はないのです。

一度などは、鹿の近くで転んだ息子(当時3歳)が、鹿に踏まれるなんてこともありました。

背中に鹿のフン、おなかに鹿のひづめをつけた息子は、しばらく何が起こったかわからずぼうぜんとしていました。

さて、その鹿ですが。

鳴くのを知っていますか?

ちぃ~~、ちぃ~~、という声で鳴きます。

それを初めて知ったのも、10月の奈良でした。

なにがあったのか知らないけど、セミのように一心に鳴いていました。

それを見たとき、わたしは『似てる』と思ったのです。

そう、夫の『しかちく』に。

目の離れ具合とか。

目と目の間の距離だとか。

目の丸さだとか。

いろんなところが似ていました。(目ばっかりやん!)

それ以来、わたしは『しかちく』と呼んでいます。

ちなみに目が離れているというところで、しかちくはいつも、

「オレは別に目離れてないで」

と泣き言を言います。(泣き言?)

そんなしかちくが、いつの間にかUFOにさらわれて宇宙語をマスター。

パソコンを操れるようになってしまいました。漢字は年々忘れていってるのになあ・・・。

ほんとに宇宙語というくらい、わたしにはわからない記号やら数字やらが並んだプログラム。

ランキングをクリックいただくと、とりぶうの絵がかわるプログラムの解説だそうです。

下の記事にありますので、参考になればさいわいです。



〈しかちくのちょっとした冗談〉

とりぶう「なあ、しかちくは生まれ変わったらだれになりたい?」

しかちく「マイケル・ジョーダン」

これは実話です。
ほんとにマイケル冗談に、あ、ジョーダンになりたいらしいです。
バスケやったことないのになあ。

〈宮古島のおもしろいこと〉

宮古島の小学校の遠足では、ときどきほかの小学校へ行くというのがあります。
行き先は来間島とか池間島とかの、橋でつながった離島なんですが。
そこの学校の生徒がふつうに授業してる横で、グラウンドを走り回る他校の生徒。
不思議な光景だろうなあ。
うるさかったらそこの先生に怒られるらしい。
遠足ではしゃぐなって言われても、という気もします。
ときどき宮古島に小学校はふたつくらいしかないだろう、みたいなことを言われるのですが、ぜんぜんそんなことはありません。
20校ちかくあります。
けっこう大丈夫ですよ。

さて来週はひとりごとからのスタートです。
わたしのあの夏の思い出。
ぜひ読んでくださいね!
では来週もお待ちしてますね~!

とりぶう
関連記事

少しでも面白かったら、下をクリックで応援よろしくお願いします。とりぶうの絵が踊るよ!
FC2Ranking にほんブログ村 小説ブログ ショートショートへ blogranking 人気ブログランキング【ブログの殿堂】 クツログ
ショートショートとりぶうの読むコントの応援をお願いします。
あしたも、お待ちしております。! ブログパーツ 健康食品

     カテゴリ

     登場人物
登場人物 とりぶう 登場人物 しかちく
とりぶう=わたし しかちく=夫 
登場人物 うさQ 登場人物 カメ氏
姉=うさQ 弟=カメ氏 

     最近のコメント

     最新記事

全記事表示


     月別アーカイブ

     携帯でどうぞ
QR

     おかげさまです