※ ChatGPTを利用し、要約された質問です(原文:javascriptで画像の切替えとCSSの指定)
javascriptで画像の切替えとCSSの指定
このQ&Aのポイント
javascriptを使用して画像の切り替えとCSSの指定を行いたいです。
画像の切り替えについて、最初の画像の切り替わり時間を5秒に変更したいです。
また、CSSで指定した画像を表示させる方法が分かりません。
javascriptで画像の切替えとCSSの指定でわかりません
以前、以下のhtmlを雑誌を見ながらやってみたのですが、わからないことが2点あります。
回答を頂ければ大変助かります。
1つ目の質問です。最初の画像が切り替わるのに10秒かかってしまうのですが、これを最初の画像とともにすべての画像の切替を5秒にしたいのですがわかりません。
2つ目の質問です。CSSで指定してある画像にあてはめたいのですが、書き方がわかりません。
以下のimgs[0] = "http://www.●.com/●1.jpg"; この部分に <div id="▲img"></div> を付けていいものなのか、
別な書き方があるのかがわかりません。
CSS側→ #▲img {
background-image: url(..●1.jpg);
}
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<HTML>
<HEAD>
<script type="text/javascript">
var imgs = new Array();
var links= new Array();
imgs[0] = "http://www.●.com/●1.jpg";
imgs[1] = "http://www.●.com/●2.jpg";
links[0]="http://www.■.co.jp"
links[1]="http://www.■.co.jp"
i = 0;
function Blend(){
document.getElementById("imgframe").filters.blendTrans.apply();
document.all.item("imgframe").src = imgs[i++];
document.getElementById("imgframe").filters.blendTrans.play();
document.getElementById("link").href=links[i];
if(i>=imgs.length) i=0;
}
onload = function(){setInterval(Blend,5*1000)}
</script>
<META name="GENERATOR" content="IBM WebSphere Studio Homepage Builder Version 12.0.0.0 for Windows">
<META http-equiv="Content-Type" content="text/html; charset=ISO-2022-JP">
<META http-equiv="Content-Style-Type" content="text/css">
<META name="IBM:HPB-Input-Mode" content="mode/flm; pagewidth=750; pageheight=900">
<TITLE></TITLE>
</HEAD>
<BODY>
<a href="http://www.■.co.jp" id=link>
<img src="http://www.●.com/●1.jpg" id="imgframe" style="filter:blendTrans(duration=2);"></img>
</a>
</BODY>
</HTML>
以上です。
何卒よろしくお願い致します。