マンガでよめる痔のこと・薬のこと

トップページで月ごとに写真画像を入替えたいんです。
12枚ある写真画像が、毎月勝手に替わるためのjavascriptを教えてください。
(参考になるサイトでも構いません。)
javascriptに関しては転用することしかできません。
よろしくお願いいたします。

このQ&Aに関連する最新のQ&A

A 回答 (5件)

たびたびすんません。


↓ちょっち修正です。

function changeImage3(){
imageArray = new Array( 31 );

imageArray[0] = "ne.jpg";
imageArray[1] = "ushi.jpg";
imageArray[2] = "tora.jpg";
imageArray[3] = "u.jpg";
imageArray[4] = "tatu.jpg";
imageArray[5] = "mi.jpg";
imageArray[6] = "uma.jpg";
imageArray[7] = "hituji.jpg";
imageArray[8] = "saru.jpg";
imageArray[9] = "tori.jpg";
imageArray[10] = "inu.jpg";
imageArray[11] = "i.jpg";
/*------------- 中略 -------------*/
imageArray[30] = "Hoge.jpg";


dd = new Date();
document.write( "<IMG SRC='", imageArray[ dd.getDate() - 1 ], "'>" );
}

12枚の画像だけで実現する場合、

function changeImage4(){
imageArray = new Array( 31 );

imageArray[0] = "ne.jpg";
imageArray[1] = "ushi.jpg";
imageArray[2] = "tora.jpg";
imageArray[3] = "u.jpg";
imageArray[4] = "tatu.jpg";
imageArray[5] = "mi.jpg";
imageArray[6] = "uma.jpg";
imageArray[7] = "hituji.jpg";
imageArray[8] = "saru.jpg";
imageArray[9] = "tori.jpg";
imageArray[10] = "inu.jpg";
imageArray[11] = "i.jpg";

dd = new Date();
da = dd.getDate() - 1;

if( da >= 24 ){
da -= 24;
}else if( da >= 12){
da -= 12;
}

document.write( "<IMG SRC='", imageArray[ da ], "'>" );
}

です。
それと、関数名がそれぞれ微妙に違っていることに注意してくださいね。

changeImage3() と changeImage4() です。
適宜読み替えて使ってください。
    • good
    • 0
この回答へのお礼

感謝、、、感謝します。
さっそくやってみま~す!

お礼日時:2002/09/18 14:32

>画像入替えを例えば1日ごとにして、


>テストしてみたいのですが、、、
>それも教えていただけないでしょうか?!
では、

img.src=ig[d.getMonth()+1];

この行を

var no = d.getDate()%13;
img.src=ig[no];
img.insertAdjacentHTML("afterEnd",no+":"+ig[no]);

こうするといいですよ。
    • good
    • 0

すいません。


言葉がちょっと足りなかったみたいですね。

ちょいと補足します。
<BODY> ~ </BODY> 内で、

<SCRIPT LANGUAGE="javascript">
<!--

changeImage2();

//-->
</SCRIPT>

と記述すると、記述した場所に画像が貼られます。

毎日画像を変えるテスト、

function changeImage3(){
imageArray = new Array( 31 );

imageArray[0] = "ne.jpg";
imageArray[1] = "ushi.jpg";
imageArray[2] = "tora.jpg";
imageArray[3] = "u.jpg";
imageArray[4] = "tatu.jpg";
imageArray[5] = "mi.jpg";
imageArray[6] = "uma.jpg";
imageArray[7] = "hituji.jpg";
imageArray[8] = "saru.jpg";
imageArray[9] = "tori.jpg";
imageArray[10] = "inu.jpg";
imageArray[11] = "i.jpg";
/*------------- 中略 -------------*/
imageArray[30] = "Hoge.jpg";


dd = new Date();
document.write( "<IMG SRC='", imageArray[ dd.getDate() ], "'>" );
}

とする方法があります。
ただ、これだと月によっては表示されない画像が出てきますが、、、

あるいは、12枚の画像だけで実現する場合、

function changeImage4(){
imageArray = new Array( 31 );

imageArray[0] = "ne.jpg";
imageArray[1] = "ushi.jpg";
imageArray[2] = "tora.jpg";
imageArray[3] = "u.jpg";
imageArray[4] = "tatu.jpg";
imageArray[5] = "mi.jpg";
imageArray[6] = "uma.jpg";
imageArray[7] = "hituji.jpg";
imageArray[8] = "saru.jpg";
imageArray[9] = "tori.jpg";
imageArray[10] = "inu.jpg";
imageArray[11] = "i.jpg";

dd = new Date();
da = dd.getDate();

if( da >= 24 ){
da -= 24;
}else if( da >= 12){
da -= 12;
}

document.write( "<IMG SRC='", imageArray[ da ], "'>" );
}

として、<HEAD> ~ </HEAD> 内に入れ、先に述べた方法で <BODY> 内で呼び出してください。
    • good
    • 0

<HTML>


<HEAD>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<TITLE></TITLE>
<SCRIPT LANGUAGE=javascript>
<!--
var ig = new Array();
ig[1]="thmimg1.jpg";
ig[2]="thmimg2.jpg";
ig[3]="thmimg3.jpg";
ig[4]="thmimg4.jpg";
ig[5]="thmimg5.jpg";
ig[6]="thmimg6.jpg";
ig[7]="thmimg7.jpg";
ig[8]="thmimg8.jpg";
ig[9]="thmimg9.jpg";
ig[10]="thmimg10.jpg";
ig[11]="thmimg11.jpg";
ig[12]="thmimg12.jpg";
function window_onload() {
var d = new Date();

img = document.getElementById("img");
window.status=d.getMonth()+1 + "/"+d.getDate() + "/"+ d.getYear();
img.src=ig[d.getMonth()+1];
}
//-->
</SCRIPT>
</HEAD>
<BODY LANGUAGE=javascript onload="return window_onload()">

<P><IMG id=img alt="画像"></P>
</BODY>
</HTML>

どうでしょうか。

window.status=・・・・
ステータスウィンドウに日付を表示させています。

<IMG id=img alt="画像">
これをページの好きなところへ置いてね。

この回答への補足

感謝いたします。
で、補足になって申し訳ありませんが、画像入替えを例えば1日ごとにして、
テストしてみたいのですが、、、それも教えていただけないでしょうか?!

補足日時:2002/09/18 11:25
    • good
    • 0

1.jpg ~ 12.jpg を用意する場合、



<script language="javascript">
<!--

function changeImage1(){
dd = new Date();
document.write( "<IMG SRC='", dd.getMonth() + 1, ".jpg'>" );
}

//-->
</script>

を <HEAD> ~ </HEAD> に入れて <BODY> 内で changeImage() を呼び出す。

ファイル名が月ごとに違う場合、

<script language="javascript">
<!--

function changeImage2(){
imageArray = new Array( 12 );

imageArray[0] = "ne.jpg";
imageArray[1] = "ushi.jpg";
imageArray[2] = "tora.jpg";
imageArray[3] = "u.jpg";
imageArray[4] = "tatu.jpg";
imageArray[5] = "mi.jpg";
imageArray[6] = "uma.jpg";
imageArray[7] = "hituji.jpg";
imageArray[8] = "saru.jpg";
imageArray[9] = "tori.jpg";
imageArray[10] = "inu.jpg";
imageArray[11] = "i.jpg";

dd = new Date();
document.write( "<IMG SRC='", imageArray[ dd.getMonth() ], "'>" );
}

//-->
</script>

を <HEAD> ~ </HEAD> に入れて <BODY> 内で changeImage() を呼び出す。
とか。

この回答への補足

感謝いたします。

画像名が月ごとに違うので、下記でテストしてみます。
で、なんでも聞いちゃいますが、
<BODY> 内で changeImage() を、、、、
が判りません。(ごめんなしゃい)

と、テストするのに毎月というわけにもいかないので、
とりあえず1日づつ(毎日)変わるようにしてみたいんですけど、
その場合の修正箇所も教えてください。

補足日時:2002/09/18 11:39
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QJavascriptで指定した日付と時間に画像を入れ替える方法

Javascriptで指定した日付と時間に画像を入れ替える方法

WEBページ上のある画像を、指定した日付と時間に画像を入れ替える方法がわかりません。
ちなみに日付と時間はサーバー上のデータを取得したいと考えています。

例えば、10:00に「画像A」から「画像B」に切り替える。という感じです。

どのように書けばいいのか、ご指導よろしくお願い致します。

Aベストアンサー

サーバ時刻については既に回答があるみたいなので…

ローカル時刻で実行するサンプルを。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<div>
<img id="target" src="A.jpg" alt="A">
</div>
<div id="res"></div>

<script type="text/javascript">
<!--
(function() {
var schedule = "10:00"; // ←指定時刻
var target = "target" // ←対象の画像要素のid
var targetSrc = "B.jpg"; // ←取替え後の画像アドレス
var interval = 10 * 1000; // ←確認する時間のピッチ(10秒)

var now = new Date();
schedule = schedule.split(":");
var h = +schedule[0] || 0;
var m = +schedule[1] || 0;
var s = +schedule[2] || 0;
now.setHours(h), now.setMinutes(m), now.setSeconds(s);
(function R(){
if ((new Date()) - now > 0) {
document.getElementById("target").src = targetSrc;
} else {
setTimeout(R, interval);
}
})();
})();
//-->
</script>
</body>
</html>

サーバ時刻については既に回答があるみたいなので…

ローカル時刻で実行するサンプルを。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="ja">
<head><title>test</title>
<meta http-equiv="Content-Script-Type" content="text/javascript">
</head>
<body>
<div>
<img id="target" src="A.jpg" alt="A">
</div>
<div id="res"></div>

<script type="text/javascript">
<!--
(function() {
var schedule = "10:00"; // ←指定時刻
var target = "target" // ←対象の画像要素のid
var targe...続きを読む

Q指定した日付で画像を切り替え

タイトルどおり…。
日付で画像を切り替えしようと思っています。
それで、ソースは下記のものです。

<!--//
//
function fncGraphicChangerByDate() {
vari;
varmonth;
varday;
vartoday;
varmaxFile = 4;
vardate = new Date();
vargraphics_data = new Array(maxFile);
vargraphics_path = new Array(maxFile);

if ((month = (date.getMonth() + 1)) < 10) {
month = "0" + month;
}
else {
month += "";
}

if ((day = date.getDate()) < 10) {
day = "0" + day;
}
else {
day += "";
}

today = month + day;

graphics_data[0] = "0301";
graphics_path[0] = "images/7.jpg";
graphics_data[1] = "0601";
graphics_path[1] = "images/8.jpg";
graphics_data[2] = "0901";
graphics_path[2] = "images/9.jpg";
graphics_data[3] = "1201";
graphics_path[3] = ".images/73.jpg";


for (i = 0; i < maxFile; i++) {
if (graphics_data[i] > today) {
if (i == 0) {
i = maxFile;
}
break;
}
}
i--;

document.write("<IMG SRC=\"" + graphics_path[i] + "\">");

}
//-->
</SCRIPT>

実は、画像のサイズを指定したいのですが…。
どこに何を入れたらいいのか分かりません。
何か、イイ方法はありませんか?

タイトルどおり…。
日付で画像を切り替えしようと思っています。
それで、ソースは下記のものです。

<!--//
//
function fncGraphicChangerByDate() {
vari;
varmonth;
varday;
vartoday;
varmaxFile = 4;
vardate = new Date();
vargraphics_data = new Array(maxFile);
vargraphics_path = new Array(maxFile);

if ((month = (date.getMonth() + 1)) < 10) {
month = "0" + month;
}
else {
month += "";
}

if ((day = date.getDate()) < 10...続きを読む

Aベストアンサー

こんにちは

>実は、画像のサイズを指定したいのですが…。
全画像同一指定ですか?

でしたら
document.write("<IMG SRC='" + graphics_path[i] + "' width='100px' height='100px' borde='0'>");

でできると思います

Q日付によって画像を変える

日付によって画像を変える方法、記述はありますでしょうか?
8/1はA
8/2はB
といった具合にです。
phpに関しては初心者なので分かりやすく教えていただけたら幸いです。
よろしくお願いいたします。

Aベストアンサー

こんにちは、

画像ファイルの名前を1から31まで、1.jpg 2.jpg というように変更します。

それらのファイルを、8月なら、8という名前のホルダに保存します。

次に、phpスクリプトで、今日の日付のファイル名で、自動的にアクセスできるスクリプトを書きます。

例えば、
<?php
$month = date("n");
$date = date("j");
$url = "http://......これは8というホルダまでのURL最後は/で終わる事";

$result = $url.$month.'/'.$date.'.jpg';
//必ずシングルクウォートを使ってください。
?>
<html>
<head><!--…略…--></head>
<body>
<img src="<?php echo $result;?>" alt="image" width="300" height="200">
</body>
</html>
という風に書くと、毎日違う画像を表示できます。

初心者です。と強調してあるので、余計なことを書きます。
画像を変更することは、PHPだけが出来ることではありません。
日ごとに画像を変更するだけなら、javascript等でも簡単に出来ます。

PHPを使う楽しみは、画像を合成するとか、例えば、画像に日付を合成して、実際にその画像を作ってしまうとかたくさんあります。
そのステップにされるつもりなら、ぜひがんばってみてください。

上に、回答したスクリプトは、簡単なものですが、実際に動作を確認してありますから、ちゃんと表示できるので安心してやってみてください。

こんにちは、

画像ファイルの名前を1から31まで、1.jpg 2.jpg というように変更します。

それらのファイルを、8月なら、8という名前のホルダに保存します。

次に、phpスクリプトで、今日の日付のファイル名で、自動的にアクセスできるスクリプトを書きます。

例えば、
<?php
$month = date("n");
$date = date("j");
$url = "http://......これは8というホルダまでのURL最後は/で終わる事";

$result = $url.$month.'/'.$date.'.jpg';
//必ずシングルクウォートを使ってください。
?>
<ht...続きを読む

QJavaScript - 月ごとに画像変化

<script type="text/javascript">
<!--
var myimg = new Array();

myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">';
myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">';
myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">';
myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">';
myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">';
myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">';
myimg[6] = '<img src="g.jpg" alt="g.jpg" width="477" height="33">';
myimg[7] = '<img src="h.gif" alt="h.jpg" width="477" height="33">';
myimg[8] = '<img src="i.jpg" alt="i.jpg" width="477" height="33">';
myimg[9] = '<img src="j.jpg" alt="j.jpg" width="477" height="33">';
myimg[10] = '<img src="k.jpg" alt="k.jpg" width="477" height="33">';
myimg[11] = '<img src="l.jpg" alt="l.jpg" width="477" height="33">';

var mynow = new Date();
var mymonth = mynow.getMonth();
document.write("<center><img 'src="+myimg[mymonth ]+"'></center>");
//
--></script>

このようなものをHTML属性のBODY内に入れて、月ごとに画像を変化させるということを実現しています。
画像の変化自体はうまくいってますが、ブラウザの多くは

[a.jpg]'>

("["と"]"は画像の端)という風に、右端に文字が出てしまいます。
試しに、2つの"'"を消せば

[]>

という風に、画像が見つからない×印がついて表示も出来ません。
文字が出ないようにするにはどう対応するのでしょうか。
詳しい方アドバイスお願いします。

ちなみにJavascriptにこだわらず、月ごとに画像が変化できれば何でもいいです。

<script type="text/javascript">
<!--
var myimg = new Array();

myimg[0] = '<img src="a.jpg" alt="a.jpg" width="477" height="33">';
myimg[1] = '<img src="b.jpg" alt="b.jpg" width="477" height="33">';
myimg[2] = '<img src="c.jpg" alt="c.jpg" width="477" height="33">';
myimg[3] = '<img src="d.jpg" alt="d.jpg" width="477" height="33">';
myimg[4] = '<img src="e.jpg" alt="e.jpg" width="477" height="33">';
myimg[5] = '<img src="f.jpg" alt="f.jpg" width="477" height="33">';
myimg...続きを読む

Aベストアンサー

>IEでは逆に表示されなくなりましたが、それ以外は何とかいけました。
試してみましたが、私の環境ではちゃんと表示されました。

ひとつひとつIMGタグを入れると間違っても気づきづらいですし、
無駄に記憶領域が増えてしまうので、以下のようにしたほうが
間違いも少なくなると思いますよ。

var myimg = ["a","b","c","d","e","f","g","h","i","j","k","l"];
var mynow = new Date();
var mymonth = mynow.getMonth();
document.write("<center><img src=\""+myimg[mymonth]+".jpg\" alt=\""+myimg[mymonth]+".jpg\" width=\"477\" height=\"33\"></center>");

さらにwidthとhightをCSSで指定してあげればもっとシンプルになります。


人気Q&Aランキング