読者が選択するブログを作ってみる

昨日投稿した「ねこがあらわれた。どうする？」で、実際に選択できたらもっと良かったかなぁ・・・と思ったので作ってみました。

選択肢（リンク風の何か）をクリックすると結果が表示されます。

f:id:emija:20140718200057j:plain

みつめる

手を差し出す

------------------------------

こんなの簡単だろ？と思いつきで作り始めたのですが、思ったよりも苦戦しました・・・

はてなブログの投稿画面が勝手にHTML書き換えるんだもん・・・。

HTMLやJavaScriptの知識がちょっとあれば簡単にできるのですが、

知識の無い人がみたら「おぉ！？」って思うかも知れません？

（思わないかも知れませんｗ　「ふ～ん。で？」みたいなｗ）

とりあえずコード全文です。(はてなブログの仕様により一部書き換えています）

<p><img class="hatena-fotolife" title="画像タイトル" src="画像ＵＲＬ" 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="画像ＵＲＬ" 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>