Javascriptでランキングクリック時の画像切り替えるショートショートとりぶうの読むコント～宮古島　

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

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

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

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

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

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

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

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

<head>

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

</head>

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

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

<!ChangeImage>
<script type="text/javascript">

</script>
ここまで

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

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

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

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

ここから
<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>
ここまで

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

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

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

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

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='１枚目の画像アドレス（星一個）';
break;
case 2: document.images[imageName].src='２枚目のアドレス（星2個）';
break;
case 3: document.images[imageName].src='３枚目のアドレス';
break;
case 4: document.images[imageName].src='４枚目のアドレス';
break;
case 5: document.images[imageName].src='５枚目のアドレス';
break;
}
}

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

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

P.S.

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

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

少しでも面白かったら、下をクリックで応援よろしくお願いします。とりぶうの絵が踊るよ！

あしたも、お待ちしております。！

i2i無料WEBパーツ

このページのトップへ

前の記事 « ホーム » 過去の記事も見てっ！

トラックバック

この記事にトラックバックする(FC2ブログユーザー)

このページのトップへ

コメントの投稿

このページのトップへ

No title

宮古島の皆さまおはようございます　m(__)m
我が相方さんは　この寒い中　山ほど服を着てまた寒い東北に向かってバイクツーリンングに出かけました　(^O^)／
私は今日はおとなしく家に引きこもり今度会社で発表する資料作りを　使い慣れてないパワーポイントを使って・・・・ってやーめた！！
今日はちょっと遠い喫茶店へお茶しに行こうと思ってます　笑）
しかちくさん　はじめましてm(__)m
私も不思議でした！あのからくり！！　上の説明だけでお腹いっぱいだわー　笑）
難しいですね！！
管理ページ教えますからセッティングしてくださいませ！！　笑）
とりぶうさんの絵大好きです！！
これからも　おじゃまさせていただきます　m(__)m
また　お会いいたしましょう！！　(^O^)／

2009-10-17(06:07) :
イノぶた URL :
編集

すご～い！！

こんにちわ、しかちくさん。。

はじめまして、いつも”とりぶう”さんのブログ、楽しく拝見させてもろてます。
ご説明見てて、なんか高校時代（かなり、すご～く前ですが・・）を思い出しました。
難しい・・・・
高校の数学の教科書を見ているみたい・・・
PCに弱いもので・・・
でも、皆すごいですね。
こうして、自分のブログをメンテしたはるんですもんね。。
いろいろご教授ありがとうございました！！

2009-10-17(11:21) :
さすらいの阿呆鳥 URL :
編集

No title

めがくるくるまわってます！

2009-10-17(18:51) :
miho URL :
編集

シカチクさんありがとう

こんにちは
シカチクさんありがとうございました。
Javascriptはよくわかっていませんが
ＶＢＡみたいなもんですね。
何となくできる気がしています。
頑張ってみます。
これからもお二人で楽しブログ作成お願いします。

2009-10-18(13:20) :
トマト URL :
編集

はじめまして♪

いつもお噂を伺っていましたので、はじめての様な気が
しませんが・・・・・・

説明するのって大変ですよね、何となく出来る事を、
いざ人に教えるとなると凄く苦労しますものねぇ、
お疲れ様でした<(_ _)>

こんなに丁寧に書いてくださっているのに・・・・・
PC音痴の私にはチンプンカンプンでしてヾ(;´▽｀A``アセアセ！

でも、いつの日か出来るようになりたいのでメモさせて
いただきました。
有難うございます。

しかし・・・・はたして・・・出来るようになる日がくるのだろうか？
ヾ(´▽｀;)ゝウヘヘ♪

これからもお二人で頑張ってくださいネ♪

2009-10-18(17:02) :
クーピー URL :
編集

やっぱり

Javascriptを使っていましたか(^o^)
ってソース見たらわかるよね(;^_^A アセアセ・・・

（おお！ならのぶちんもやってみるのか？(^o^)）＜神の声＞

そんな面倒なことはしません(^_^)/

（本当に怠け者なんだ(^_^;)）＜神の声＞

( -_-)フッ
何を今更・・・

しかちくさん。
もうプロフィールにも出てきているんだから
露出を多くしても良いのでは？(^o^)

「しかちくのひとりごと」
とか
「しかちくのつぶやき」
とか
「しかちくから見たとりぶう」
とか作ってみたらいかがでしょう？(^_^)/

（それではのぶちんのブログに
「嫁から見たのぶちん」
ってコーナーを作るか？）＜神の声＞

こ、怖すぎる！
((((;ﾟДﾟ)))ｶﾞｸｶﾞｸﾌﾞﾙﾌﾞﾙ

2009-10-19(20:06) :
のぶちん URL :
編集

トマトさん

見た感じではソース自体の書き方は問題ないようですね。
正常に動かない原因は以下が考えられます。

１・ <%topentry_title>はファイル名として使用していますが、これは、ｆｃ２のタグです。http://utubyou-no-ouji.livedoor.biz/test.html内では、<%topentry_title>の値が存在しない。だから、試験的に別のファイル名をつけて試してみる。

２・　画像のサイズ（縦横）が少しでも違うと作動しません。

３・　ファイルのパスが間違っている。

私もいろいろ試して奇跡的に動いたように思います。ははは。
動いているのが不思議です。
助けにならなかったかも知れませんが、しかちくの能力ではこれぐらいの指摘しかできません。うまくいくといいですね。

2009-10-22(15:24) :
しかちく URL :
編集

このページのトップへ

« 未来へ続くホーム過去へ続く »

このページのトップへ

ショートショート とりぶうの読むコント～宮古島