匿名質問者
匿名質問者匿名質問者とは「匿名質問」を利用して質問した質問者。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら

ボタンも時間によって画像を変えたいのですが、

どうすればいいのでしょうか。

現在は下記のようにsrcを入れているのですが、
これだと時間判定のif文をどこに入れればいいのかがわからず
どうやって指定すればいいのかがわかりません。
もしよろしければどなたか教えて頂けませんでしょうか。

<ul>
<li><a href="illust.html" id="top_btn1"><img src="img/top/illust_btn_off.jpg" width="70" height="200" alt="Illust" id="illust_btn"/></a></li>
<li><a href="books.html" id="top_btn2"><img src="img/top/story_btn_off.jpg" width="109" height="95" alt="Story" id="story_btn" /></a></li>
</ul>

回答の条件
  • 1人5回まで
  • 13歳以上
  • 登録:2012/08/12 02:20:42
  • 終了:2012/08/13 23:51:15
匿名質問者

質問者から

匿名質問者2012/08/13 12:43:43

分かりにくい書き方をしてしまい申し訳ありませんでした。

ボタンというのはHPのコンテンツのボタンです。
Aboutとか日記とかにリンクを貼る。

そのボタンを昼と夜で別の画像に変えたいと思っているのですが、
時間の判定等をどこで指定すればいいのかなどがわからず質問した次第です。

もしわかることがありましたら教えて頂けると助かります。
お手数ですが何卒よろしくお願い致します。

ベストアンサー

匿名回答1号 No.2

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2012/08/13 17:21:47

少々質問なのですが、これはリターン値が返されるかで昼と夜の表示される画像のどちらかを表示させているのでしょうか。
$( isDay() ? "#dayImg" : "#nightImg" ).show();
上記の部分の指定がよくわからなかったので。

はい。isDay() 関数の戻り値が ture であれば "#dayImg" を、そうでなければ "#nightImg" を表示しています。
「《条件》 ? 《條件が true だった場合に利用される値》 : 《條件が false だった場合に利用される値》」という書式を利用しています。三項演算子と呼ばれるものです。

昼、夕、夜と3段階などにする場合は、こういった感じになります。

<img id="dayImg"     src="昼 に表示される画像ファイル.jpg">
<img id="eveningImg" src="夕方に表示される画像ファイル.jpg">
<img id="nightImg"   src="夜 に表示される画像ファイル.jpg">

<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script>
$(function(){
	$("#dayImg,#eveningImg,#nightImg").hide();
	$( getNowTimeImageId() ).show();
});
function getNowTimeElementId() {
	var now = new Date();
	if (6  <= now.getHours() && now.getHours() < 17) {
		return "#dayImg";
	else if (17 <= now.getHours() && now.getHours() < 20) {
		return "#eveningImg"
	} else {
		return "#nightImg"
	}
}
</script>

その他の回答(2件)

匿名回答1号 No.1

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2012/08/13 09:27:16

追加の情報を書いていただいた今でも、質問に書かれたhtmlがいったい何の意図でつけられたものなのか理解できていませんが、以下のように書けば昼夜で別の画像が表示されます。

<img id="dayImg"   src="昼に表示される画像ファイル.jpg">
<img id="nightImg" src="夜に表示される画像ファイル.jpg">

<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script>
$(function(){
	$("#dayImg,#nightImg").hide();
	$( isDay() ? "#dayImg" : "#nightImg" ).show();
});
function isDay() {
	var now = new Date();
	return (6 <= now.getHours() && now.getHours() <= 17);
}
</script>
匿名質問者

質問者から

匿名質問者2012/08/13 17:48:10

>匿名回答1号 様

ご回答ありがとうございました。
質問に書いたhtmlは現在はliタグでこういうのを置いていますが、
このimg src="img/top/illust_btn_off.jpgに条件で
時間判定を入れるとかなのかなと思って一応いれたものでした。
よけいややこしくなっただけで申し訳ありませんでした。

少々質問なのですが、これはリターン値が返されるかで昼と夜の表示される画像のどちらかを表示させているのでしょうか。
$( isDay() ? "#dayImg" : "#nightImg" ).show();
上記の部分の指定がよくわからなかったので。
無知で申し訳ありません。

また、もし昼、夕、夜と3段階などにする場合はどうしたらよろしいでしょうか。
お手間をお掛けしてしまい申し訳ありませんが、
もしよろしければ教えて頂けませんでしょうか。
お手数ですが何卒よろしくお願い致します。

匿名回答1号 No.2

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2012/08/13 17:21:47ここでベストアンサー

少々質問なのですが、これはリターン値が返されるかで昼と夜の表示される画像のどちらかを表示させているのでしょうか。
$( isDay() ? "#dayImg" : "#nightImg" ).show();
上記の部分の指定がよくわからなかったので。

はい。isDay() 関数の戻り値が ture であれば "#dayImg" を、そうでなければ "#nightImg" を表示しています。
「《条件》 ? 《條件が true だった場合に利用される値》 : 《條件が false だった場合に利用される値》」という書式を利用しています。三項演算子と呼ばれるものです。

昼、夕、夜と3段階などにする場合は、こういった感じになります。

<img id="dayImg"     src="昼 に表示される画像ファイル.jpg">
<img id="eveningImg" src="夕方に表示される画像ファイル.jpg">
<img id="nightImg"   src="夜 に表示される画像ファイル.jpg">

<script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script>
<script>
$(function(){
	$("#dayImg,#eveningImg,#nightImg").hide();
	$( getNowTimeImageId() ).show();
});
function getNowTimeElementId() {
	var now = new Date();
	if (6  <= now.getHours() && now.getHours() < 17) {
		return "#dayImg";
	else if (17 <= now.getHours() && now.getHours() < 20) {
		return "#eveningImg"
	} else {
		return "#nightImg"
	}
}
</script>
匿名質問者

質問者から

匿名質問者2012/08/13 22:31:09

ご丁寧な回答ありがとうございました。
大変わかりやすかったです。

こちらで試させて頂いての質問を少々よろしいでしょうか。

とりえず現状のHTMLでは下記のようにulタグまるごとを時間ごとのidでまとめる感じにしてみました。
---------------------------------------

    ←昼用のボタンまとめです。
  • Illust

  • Story



    ←夕用のボタンまとめです。
  • Illust

  • Story



    ←夜用のボタンまとめです。
  • Illust

  • Story


---------------------------------------
これにJavaScript上で教えて頂いた関数を使わせて頂きました。

---------------------------------------
$( function () {

$("#dayImg_Btn,#eveningImg_Btn,#nightImg_Btn").hide();
$( getNowTimeImageId() ).show();

function getNowTimeElementId() {

var now = new Date();
if (4 <= now.getHours() && now.getHours() < 16) {

return "#dayImg_Btn";
}
else if (16 <= now.getHours() && now.getHours() < 19) {

return "#eveningImg_Btn";
}
else {

return "#nightImg_Btn";
}
}
---------------------------------------
ただ、.hide();と.show();だけなら大丈夫なのですが、
function getNowTimeElementId() 以降を書くと
他のJavaScriptも反応しなくなってしまいます。

.hide();と.show();だけだと
時間の画像は表示されるのですが、
そのボタンのロールオーバーが反応しなくなってしまうようです。
下記がロールオーバー用に書いてみたJavaScriptです。
---------------------------------------
$( '#top_btn1' ).hover(
function() {

if*1 {
document.images["illust_btn"].src = "img/top/illust_btn_on.jpg";
$("#mess_top").html(top_mess[1]);
}
else if*2 {
document.images["illust_btn"].src = "img/top/illust_btn_on2.jpg";
$("#mess_top").html(top_mess[1]);
}
else if*3 {
document.images["illust_btn"].src = "img/top/illust_btn_on3.jpg";
$("#mess_top").html(top_mess[1]);
}

}, function() {

if*4 {
document.images["illust_btn"].src = "img/top/illust_btn_off.jpg";
$("#mess_top").html(top_mess[0]);
}
else if*5 {
document.images["illust_btn"].src = "img/top/illust_btn_off2.jpg";
$("#mess_top").html(top_mess[0]);
}
else if*6 {
document.images["illust_btn"].src = "img/top/illust_btn_off3.jpg";
$("#mess_top").html(top_mess[0]);
}

});
---------------------------------------

何が悪いのかわからないのですが、
何かお気づきになる点などありましたら
アドバイス頂けると幸いです。

何度も申し訳ありませんが何卒よろしくお願い致します。

*1:myHours >= 4)&&(myHours <= 15

*2:myHours >= 16)&&(myHours <= 17

*3:myHours >= 18)&&(myHours <= 23)||(myHours >= 0)&&(myHours <= 3

*4:myHours >= 4)&&(myHours <= 15

*5:myHours >= 16)&&(myHours <= 17

*6:myHours >= 18)&&(myHours <= 23)||(myHours >= 0)&&(myHours <= 3

匿名回答1号 No.3

匿名回答1号「匿名質問」を利用した質問に回答すると「匿名回答○号」と匿名で表示されます。
「匿名質問」では、ユーザー名を公開せずに匿名の質問ができます。
詳しくはこちら
2012/08/13 23:24:41

括弧の対応が取れていないのではないでしょうか?
最初の「$( function () {」に対する閉じ括弧「});」が存在しないようです。

$( function () {
	$("#dayImg_Btn,#eveningImg_Btn,#nightImg_Btn").hide();
	$( getNowTimeImageId() ).show();

function getNowTimeElementId() {
	var now = new Date();
	if (4 <= now.getHours() && now.getHours() < 16) {
		return "#dayImg_Btn";
	} else if (16 <= now.getHours() && now.getHours() < 19) {
		return "#eveningImg_Btn";
	} else {
		return "#nightImg_Btn";
	}
}

※人力検索はてなでは、ソースのテキストを『>|html|』と『||<』で囲むと上記のように綺麗に表示してくれます。

ブラウザが出すjavascriptのエラーメッセージを確認することで、何が原因で動かなくなっているのかをある程度推測することができますので、確認してみるとよいかと思います。
javascriptのエラーメッセージ確認方法はブラウザごとに異なるのでここでは詳しく説明しません。
以下の様な感じで検索してみてください。
http://www.google.co.jp/search?q=ie9+javascript+%E3%82%A8%E3%83%A9%E3%83%BC%E7%A2%BA%E8%AA%8D

匿名質問者

質問者から

匿名質問者2012/08/14 00:10:46

なるほど、エラーメッセージの確認ですか!
アドバイスありがとうございます。
早速試してみますね!

長々と何回も質問してしまい申し訳ありませんでした。
本当にありがとうございました!

  • 匿名回答1号
    匿名回答1号 2012/08/12 22:37:39
    質問の意味が分からない。
    『ボタンも』っていきなり何を言ってるんだ?匿名質問なんだから、前回お前さんが質問した内容は、誰も見ることはできないんだけど。

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません