人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

ボタンも時間によって画像を変えたいのですが、
どうすればいいのでしょうか。

現在は下記のように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>

●質問者: 匿名質問者
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 3/3件

▽最新の回答へ

質問者から

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

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

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

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


1 ● 匿名回答1号

追加の情報を書いていただいた今でも、質問に書かれた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>

質問者から

>匿名回答1号 様

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

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

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


2 ● 匿名回答1号
ベストアンサー

少々質問なのですが、これはリターン値が返されるかで昼と夜の表示される画像のどちらかを表示させているのでしょうか。
$( 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>

質問者から

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

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

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






---------------------------------------
これに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-5件表示/7件
4.前の5件|次5件6.
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ