一定時間で画像を変化(差し替え)させてそれぞれの画像に
個別のリンクを貼りたいのですが、可能でしょうか?
 一定時間で変化する画像までは出来るのですが、リンクの貼り方がわかりません。ソースを公開しているところはないでしょうか?
宜しく御願い致します。

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

A 回答 (2件)

こんにちはya-ya-さん、xruzです。


>一定時間で変化する画像までは出来るのですが
kana-tanさんの一行を追加するだけなんですが。。。

ひょっとして配列からのセット方法が解らないとかでしょうか?
と言うことで以下にソースサンプルを載せておきます。
(Ie5.5sp2、NN4.75、NN6.1動作確認済み)

<html>
<head>
<title>chghref</title>
</head>
<script language="JavaScript">
<!--
var timeId;
var lnkImg=new Array();
var imgLnk=new Array(
"image1.gif","link1.html",
"image2.gif","link2.html",
"image3.gif","link3.html"
);
function startScript() {
for(var i=0;i<imgLnk.length;i=i+2) {
var lnkData=new Array();
lnkData[0]=imgLnk[i];
lnkData[1]=imgLnk[i+1];
lnkImg[parseInt(i/2)]=lnkData;
}
timeId=setTimeout("chgLink(0)",10);
}
function chgLink(i) {
clearTimeout(timeId);
document.timeImg.src=lnkImg[i][0].toString();
document.links[0].href=lnkImg[i][1].toString();
if(++i==lnkImg.length) i=0;
timeId=setTimeout("chgLink("+eval(i)+")",1000);
}
//-->
</script>
<body onLoad="startScript();">
<a href=""><img name="timeImg" src="" border="0"></a>
</body>
</html>

がんばってくださいね。
    • good
    • 0
この回答へのお礼

ありがとうございました。
出来ました.

お礼日時:2001/10/24 20:54

リンクの変更は



document.links[0].href= "リンク先"

と書きます。

links配列は、<BODY>内の<A><AREA>タグを管理します。
<A>や<AREA>タグがあると、上から順番に0、1、2、…と番号をつけて配列に格納されます。
なので、[0]の部分は変更したいリンクの番号を指定し下さい。

では、参考までに。

この回答への補足

お答えいただき有難うございます
これを使ったサイトがあれば教えてください。

補足日時:2001/10/21 00:40
    • good
    • 0

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

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

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

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

Q一定時に画像を変え、その画像にリンクを貼るというスクリプトを改造したいのですが

こんにちわ。javascriptはほとんどわかりません。既成のものをHTMLにうめこんだり、スクリプトのHTMLタグ部分を変えたりできる程度です。

今回やりたいのは、数分後に画像を変え、その画像にリンクを貼るというものですが、サンプルであったjavascriptは別ウインドウにリンクを出すというものです。これを別ウインドウではなく、そのままのページにリンク先を表示させるには、どう変えたら良いでしょうか?

http://bunjin.com/java/chang_banner2.html

こちらのjavascriptです。

先述したように、初心者です。理論で教えていただいてもわからないので、できれば具体的に教えていただけると大変助かります。あつかましくて申し訳ありませんが、どなたかお助け下さい。よろしくお願いします。

Aベストアンサー

質問者様が見つけてこられたサンプルのJavascriptを、少しだけ書き換えると出来るかもです。

こんな感じでしょうか。

---------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var item = 0;
function change_IMG() {
item += 1;
if (item > 3) item = 0;
if (document.img.complete) {
if (item == 0) {
document.img.src = "yahoo.jpg";
}
if (item == 1) {
document.img.src = "msn.jpg";
}
if (item == 2) {
document.img.src = "google.jpg";
}
if (item == 3) {
document.img.src = "infoseek.jpg";
}
}
changeLINK();
setTimeout("change_IMG()",5000);
}
function changeLINK() {
if (item == 0) {
document.all['myLINK'].href = "http://ヤフー";
}
if (item == 1) {
document.all['myLINK'].href = "http://エムエスエヌ";
}
if (item == 2) {
document.all['myLINK'].href = "http://グーグル";
}
if (item == 3) {
document.all['myLINK'].href = "http://インフォシーク";
}
}
//-->
</SCRIPT>

</HEAD>
<BODY onLoad="change_IMG();">
<a id="myLINK" href="http://ヤフー">
<img src="yahoo.jpg" NAME="img" border="0">
</A>
</BODY>
</HTML>
---------------


setTimeout("change_IMG()",5000);
↑この部分は、5秒後に change_IMG() を実行するということです。
1秒 = 1000 なので、もし、1分経過するたびに画像とリンク先を変更したいのであれば、
5000 を 60000 に書き換えます。

質問者様が見つけてこられたサンプルのJavascriptを、少しだけ書き換えると出来るかもです。

こんな感じでしょうか。

---------------
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!--
var item = 0;
function change_IMG() {
item += 1;
if (item > 3) item = 0;
if (document.img.complete) {
if (item == 0) {
document.img.src = "yahoo.jpg";
}
if (item == 1) {
document.img.src = "msn.jpg";
}
if (item == 2) {
document.img.sr...続きを読む

Qリンク画像をランダム表示して一定時間でランダムにリンク画像切り替えするには?

「複数のリンク画像を一定時間で(各リンク先も)切り替えるには?」で画像表示を一定時間で切り替えることがわかりましたが、ページを開いたときにリンク画像がランダムで表示されその後、一定時間でランダムにリンク画像を切り替えをする場合、どうすればいいのでしょうか?よろしくお願いします。

Aベストアンサー

そうでした^^;大切な部分が抜けてましたね。

<!-- これを画像を張りたい位置に挿入。<body>~</body>内 -->
<script type="text/javascript">
/* 設定部分 */
var interval = 2000; //切り替わる時間(1000=1秒)
var imgs = new Array(); var hrefs = new Array();
imgs[0] = new Image(); imgs[0].src = "a001ani.gif"; hrefs[0] = "リンク先1";
imgs[1] = new Image(); imgs[1].src = "a002ani.gif"; hrefs[1] = "リンク先2";
imgs[2] = new Image(); imgs[2].src = "a003ani.gif"; hrefs[2] = "リンク先3";

/* プログラム部分 */
var num = Math.floor(Math.random()*imgs.length);
document.write('<a href="'+hrefs[num]+'" id="cth"><img src="'+imgs[num].src+'" id="cti" style="border:0" /></a>');
var cti = document.getElementById("cti"); var cth = document.getElementById("cth");
setInterval(function(){
num += Math.floor(Math.random()*(imgs.length-1))+1;
if(num>=imgs.length) num -= imgs.length;
cti.src = imgs[num].src; cth.href = hrefs[num];
},interval);
</script>
<!-- ここまで -->

そうでした^^;大切な部分が抜けてましたね。

<!-- これを画像を張りたい位置に挿入。<body>~</body>内 -->
<script type="text/javascript">
/* 設定部分 */
var interval = 2000; //切り替わる時間(1000=1秒)
var imgs = new Array(); var hrefs = new Array();
imgs[0] = new Image(); imgs[0].src = "a001ani.gif"; hrefs[0] = "リンク先1";
imgs[1] = new Image(); imgs[1].src = "a002ani.gif"; hrefs[1] = "リンク先2";
imgs[2] = new Image(); imgs[2].src = "a003ani.gif"; hrefs[2] = ...続きを読む

Q複数のリンク画像を一定時間で(各リンク先も)切り替えるには?

画像表示を一定時間で切り替え、同時にそれぞれの画像に別のリンク先を指定したいのです。JavaScriptかスタイルシート、その両方の組み合わせなどの応用になるのではないかと思うのですが、なるべくシンプルな方法をご存知の方、よろしくお願いいたします。

Aベストアンサー

<html>
<head>
<script type="text/javascript">
window.onload = function(){
var num = 1;
setInterval(function(){
document.getElementById('link' + num).style.display = 'none';
num = document.getElementById('link' + (num+1))? ++num : 1;
document.getElementById('link' + num).style.display = 'block';
},5000);
}
</script>
<style type="text/css">
.banner { display:none; }
</style>
</head>

<body>

<div id="link1"> ここにリンク&画像の普通のタグ1 </div>
<div id="link2" class="banner"> ここにリンク&画像の普通のタグ2 </div>
<div id="link3" class="banner"> ここにリンク&画像の普通のタグ3 </div>
<div id="link4" class="banner"> ここにリンク&画像の普通のタグ4 </div>
<div id="link5" class="banner"> ここにリンク&画像の普通のタグ5 </div>

</body>
</html>

色んな方法ありますがHTMLさえ書ければリストの記述ミスが無い方法ならこれかな?

各 画像リンクは、それぞれをDIVで囲んで link1~ (link + 連続した数値)のIDを付ける。
1個目以外は classやstyle=""で初期非表示にしておく。(サンプルの通り)
あとは勝手に順番に表示して最後まで行くとループします。
5000の所が秒数 5000=5秒。

1ページに1個で考えてるサンプルなのでsetInterval()を使っています。
複数使う場合はsetTimeout()を使った方が良いので、わからなければ補足で。

広告バナーなどの自動表示切替 と同じ事ですから、
ネット上に結構サンプルもあるんじゃないかと思います。

<html>
<head>
<script type="text/javascript">
window.onload = function(){
var num = 1;
setInterval(function(){
document.getElementById('link' + num).style.display = 'none';
num = document.getElementById('link' + (num+1))? ++num : 1;
document.getElementById('link' + num).style.display = 'block';
},5000);
}
</script>
<style type="text/css">
.banner { display:none; }
</style>
</head>

<body>

<div id="link1"> ここにリンク&画像の普通のタグ1 </div>
<div id...続きを読む

Qサムネイル画像をオンマウスで拡大表示してそれぞれの画像にリンクを指定する記述について

お世話になります。
JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。
下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。

記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。

フリーソースを応用しようとしすぎて、遠回りな記述になっているかもしれませんが、もし分かる方がいらっしゃったら教えて頂けないでしょうか?

■記述1(html)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<SCRIPT language="JavaScript" type ="text/javascript" src="http://test.com/00.js">
</SCRIPT>
</head>
<body>
<table width="400">
<a href="#" target="_blank">
<img src="http://test.com/img/01.jpg" name="imgSample"></a>
<div>
<div>
<script language="JavaScript" type ="text/javascript" src="http://test.com/01.js">
</script>
</body>
</html>

■記述2(js00)
//画像の名前を配列に代入していきます。
strPictureName = new Array("http://test.com/img/01.jpg","http://test.com/img/02.jpg","http://test.com/img/03.jpg","http://test.com/img/04.jpg","http://test.com/img/05.jpg","http://test.com/img/06.jpg","http://test.com/img/07.jpg","http://test.com/img/08.jpg");
function SetPicture(nVal)
{
document.imgSample.src = strPictureName[nVal];
}

■記述3(js01)
//サムネイル画像をオンマウスで拡大表示
img_num="8";
if( img_num == "" ){img_num='5';}
for ( cnt = 1 ; cnt <= img_num ; cnt++ ) {
cnt2 = cnt-1;
document.write( "<a href=\"#\" onMouseOver=\"SetPicture("+cnt2+");\" class=\"menu\"><img src=\""http://test.com/0"+cnt+".jpg\" width=\"100\" height=\"86\"></a>" ) ;
}

■記述4(js02)

// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://www.yahoo.co.jp/";
jmp[1] = "http://bb.yahoo.co.jp/";
jmp[2] = "http://www.yahoo.co.jp/";
jmp[3] = "http://auctions.yahoo.co.jp/";
jmp[4] = "http://aeu.jp/cs/";
jmp[5] = "http://google.com/";
jmp[6] = "http://google.co.jp/";
jmp[7] = "http://news.yahoo.co.jp/";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "http://test.com/01.jpg";
img[1] = "http://test.com/02.jpg";
img[2] = "http://test.com/03.jpg";
img[3] = "http://test.com/04.jpg";
img[4] = "http://test.com/05.jpg";
img[5] = "http://test.com/06.jpg";
img[6] = "http://test.com/07.jpg";
img[7] = "http://test.com/08.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");


■完成イメージ

  | ̄ ̄ ̄ ̄ ̄ ̄ ̄|
  |  拡大画像  |
  |_______|
  | ̄|| ̄|| ̄|| ̄|
  |_||_||_||_|←サムネイル

・サムネイル画像をオンマウスで拡大画像を表示
・サムネイル画像、拡大画像それぞれに指定リンクを入れる
・可能であればリンクページは target="_blank" で開きたい


以上がご質問内容です。
初心者で大変恐縮ですが、どうぞよろしくお願いいたします。

お世話になります。
JavaScript初心者ですが、フリーソースなどを見つつ勉強しております。
下記のようなhtmlに【js00】と【js01】を読み込んでサムネイル画像をオンマウス時に上部に拡大表示させているのですが、サムネイル画像と拡大表示画像の両方に指定リンクをつけようとしています。

記述4の【js02】のような画像をランダム表示して指定リンクをつけるScriptは発見できたのですが、これを記述1+2+3と組み合わせられず、作業が進まなくなってしまいました…。

フリーソースを応用しようとしすぎて...続きを読む

Aベストアンサー

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
.smlimg{ width:120px; height:80px; }
#bigimg{ width:600px; height:400px; }
#a{ width:600px; height:100px; overflow:auto; }
</style>

<div><img src="" id="bigimg"></div>
<div id="a"><div id="b"></div></div>

<script type="text/javascript">
//@cc_on
var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var jmpurl = 'htp:/test.xxx0.com htp:/test.xxx1.com htp:/test.xxx2.com htp:/test.xxx3.com htp:/test.xxx4.com htp:/test.xxx5.com '.split(' ');
var bufimg = [];

addEvent( window, 'load', init);
addEvent( 'b', 'mouseover', chgimg );
addEvent( document.body, 'click', chgurl );

function init(){
var w=0,r = Math.random()*i|0,image,p;
for(var i in simage){
bufimg[i] = new Image; bufimg[i].src = bimage[i]; image = document.createElement('img');
with( image ){ src = simage[i]; alt = bimage[i];title = jmpurl[i]; className = 'smlimg'; }
p = document.getElementById('b').appendChild( image ); w+=p.offsetWidth;
}
document.getElementById('b').style.width=w+'px'; setbimg( bufimg[r].src, jmpurl[r] );
}
function chgimg( evt ){
var obj = evt.target || evt.srcElement;
if( obj.className && obj.className == 'smlimg') setbimg( obj.alt, obj.title );
}
function chgurl( evt ){
var obj = evt.target || evt.srcElement;
if( obj.className == 'smlimg' || obj.id == 'bigimg' ) window.open( obj.title );
}
function setbimg(s,t){with( document.getElementById('bigimg')){src=alt=s;title=t}}
function addEvent(elementId, evt, eventHandler, flag){
var element = ( typeof( elementId ) == 'string' )? document.getElementById( elementId ): elementId;
element./*@if(1)attachEvent('on'+ @else @*/addEventListener(/*@end@*/evt, eventHandler, flag);
}
</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<title>TEST</title>
<style type="text/css">
.smlimg{ width:120px; height:80px; }
#bigimg{ width:600px; height:400px; }
#a{ width:600px; height:100px; overflow:auto; }
</style>

<div><img src="" id="bigimg"></div>
<div id="a"><div id="b"></div></div>

<script type="text/javascript">
//@cc_on
var simage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p5.jpg'.split(' ');
var bimage = 'p0.jpg p1.jpg p2.jpg p3.jpg p4.jpg p...続きを読む

QJAVAで画像をボタンで切り替え表示し、さらにそれぞれの画像をそれぞれ

JAVAで画像をボタンで切り替え表示し、さらにそれぞれの画像をそれぞれ別のURL(.html)へリンクをつける方法について教えて下さい。

<html>
<head>
<script language="JavaScript"> <!--
var i_index=-1;

var arrImgs = [ '絵1.jpg', '絵2.jpg', '絵3.jpg', '絵4.jpg' ];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}

function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
img1.src=arrImgs[getGazou()].src;
img1.filters[0].Play();
}

function getGazou(){
var i= Math.floor(Math.random()*arrImgs.length);
if ( i==i_index ) {
if (i_index==arrImgs.length-1) {
i=0;
} else {
i++;
}
}
i_index=i;
return i
}
//-->
</script>
</head>

<body text="#000000">
<center>
<img id="img1" src="絵0.jpg">
</center>

<form name="fm">
<table align="center" border=1 bgcolor="#FFFFCC">
<tr>
<td colspan=2 align="right">
<input type="button" value="絵のランダム切り替え(フィルタ付)" onClick="flt1()">
</td>
</tr>
</table>
</form>
</body>
</html>

上記の内容で、各画像ごとにそれぞれ別のホームページURLへリンクさせたいのですが、どのようにすれば良いか分かりません。

下の方にある
<img id="img1" src="絵0.jpg">
の前に<a href=" ">を加えるとどの画像にもこのURLしかリンクされません。当然ですが…

http://oshiete.goo.ne.jp/qa/3786377.html
で回答されている方の内容にリンクを加える形になります。

色々と検索して探していますが、これらが組み合わさったソースが見当たらず解決できず先に進めません。

どうかご回答よろしくお願いいたします。

JAVAで画像をボタンで切り替え表示し、さらにそれぞれの画像をそれぞれ別のURL(.html)へリンクをつける方法について教えて下さい。

<html>
<head>
<script language="JavaScript"> <!--
var i_index=-1;

var arrImgs = [ '絵1.jpg', '絵2.jpg', '絵3.jpg', '絵4.jpg' ];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}

function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[...続きを読む

Aベストアンサー

もとプログラムががぜんぜんだめすすが、そのレベルで
そのまま改造すると
<script type="text/javascript">
<!--
var i_index=-1;

var arrImgs=['絵1.jpg','絵2.jpg','絵3.jpg','絵4.jpg'];
var arrUrls=['1.html','2.html','3.html','4.html'];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}

function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
var index=getGazou();
link1.href=arrUrls[index];
img1.src=arrImgs[index].src;
img1.alt="絵"+(index+1);
img1.filters[0].Play();
}

function getGazou(){
var i= Math.floor(Math.random()*arrImgs.length);
if ( i==i_index ) {
if (i_index==arrImgs.length-1) {
i=0;
} else {
i++;
}
}
i_index=i;
return i
}
//-->
</script>
</head>
<body text="#000000">
<center>
<a id="link1" href="/0.html"><img id="img1" src="絵0.jpg" alt="絵0"></a>
</center>
<form name="fm">
<table align="center" border=1 bgcolor="#FFFFCC">
<tr>
<td colspan=2 align="right">
<input type="button" value="絵のランダム切り替え(フィルタ付)" onClick="flt1()">
</td>
</tr>
</table>
</form>
</body>

もとプログラムががぜんぜんだめすすが、そのレベルで
そのまま改造すると
<script type="text/javascript">
<!--
var i_index=-1;

var arrImgs=['絵1.jpg','絵2.jpg','絵3.jpg','絵4.jpg'];
var arrUrls=['1.html','2.html','3.html','4.html'];
var tmp;
for (j=0; j<arrImgs.length ;j++){
tmp = new Image(); tmp.src = arrImgs[j]; arrImgs[j] = tmp;
}

function flt1(){
img1.style.filter="";
img1.style.filter="revealTrans(duration=1.500,transition=23)";
img1.filters[0].Apply();
var index=g...続きを読む


人気Q&Aランキング

おすすめ情報