読者が選択するブログを作ってみる
昨日投稿した「ねこがあらわれた。どうする?」で、実際に選択できたらもっと良かったかなぁ・・・と思ったので作ってみました。
選択肢(リンク風の何か)をクリックすると結果が表示されます。
------------------------------
こんなの簡単だろ?と思いつきで作り始めたのですが、思ったよりも苦戦しました・・・
はてなブログの投稿画面が勝手にHTML書き換えるんだもん・・・。
HTMLやJavaScriptの知識がちょっとあれば簡単にできるのですが、
知識の無い人がみたら「おぉ!?」って思うかも知れません?
(思わないかも知れませんw 「ふ~ん。で?」みたいなw)
とりあえずコード全文です。(はてなブログの仕様により一部書き換えています)
<p><img class="hatena-fotolife" title="画像タイトル" src="画像URL" width="349" /></p>
<div id="select1" style="color: blue; text-decoration: underline; cursor: pointer;">みつめる</div>
<div id="select2" style="color: blue; text-decoration: underline; cursor: pointer;">手を差し出す</div>
<div id="results1" style="display: none;"> <img class="hatena-fotolife" title="画像タイトル" src="画像URL" width="193" /><div>仲間になりたそうにこちらを見ている</div>
<div>仲間にしますか?</div>
<div id="select3" style="color: blue; text-decoration: underline; cursor: pointer;">はい</div>
<div id="select4" style="color: blue; text-decoration: underline; cursor: pointer;">もちろん</div>
<div id="select5" style="color: blue; text-decoration: underline; cursor: pointer;">仲間にする</div>
</div>
<div id="results2" style="display: none;">ねこは逃げ出した!</div>
<div id="results3" style="display: none;">ねこは仲間になった!</div>
<p>
<script>// <![CDATA[
var select1 = document.getElementById("select1");
select1.onclick = function() {
document.getElementById("results1").style.display="block";
document.getElementById("results2").style.display="none";
}
var select2 = document.getElementById("select2");
select2.onclick = function() {
document.getElementById("results1").style.display="none";
document.getElementById("results2").style.display="block";
}
var select3 = document.getElementById("select3");
select3.onclick = function() {
document.getElementById("results3").style.display="block";
}
var select4 = document.getElementById("select4");
select4.onclick = function() {
document.getElementById("results3").style.display="block";
}
var select5 = document.getElementById("select5");
select5.onclick = function() {
document.getElementById("results3").style.display="block";
}
// ]]></script>
</p>
選択肢がAタグでなくDIVなのは、Aタグだと勝手に書き換えられるからです。
(id入れた途端、文字を外に出します。意味がわかりません。)
例)
<a id="select1">みつめる</a> → <a id="select1"></a>みつめる
Aタグに直接onclickを記述するとonclickが削除されます。
これは多分、悪質なScriptの実行を防ぐためじゃないかなと思います。
そこで、DIVタグ をCSSでAタグ風に変更、JavaScriptでonclickイベントを定義しています。(穴があって助かったよ)
(divのstyleは外に定義したほうが良かったかな・・・。まぁいいか。)
「みんなもやってみよう!」みたいなノリで書こうと思ったんですが
はてなブログの仕様で、なんかグダグダになっていきました・・・(´~`;)
(ヤダー!はてなブログのばかー!って思ったんだけど、このまま諦めるのも癪だから穴をみつけて強引に実装してやる!と思ったw)
その気になれば戦闘もJavaScriptで実装できます。
(○○のダメージを与えた!倒した!とかそんな感じ。
僕はメンドクサイからやらないですよ!)
それでは皆さんの楽しい作品をお待ちしております!
(あれ?誰もやらない?そうですか・・そうですよね・・・(笑)
僕ももうやりたくないです(w))
※はてなブログの仕様変更で今後、できなくなったりするかもしれません。
本来できないこと(リンク(っぽいdiv)にJavaScriptを埋め込む)とか強引にやっちゃってるんで。