classNameを使いスタイルの切り換え ２
クリックした文字列のスタイルが変化します。ページの他の場所をクリックすれば、止まります。
Kodayan HP
OSAKA DOS/V
Dynamic HTML
Java Applet
Java Script
VB Script
Sample Source......................................................................>>>
<style TYPE="text/css"><!--
span {width:250;font:14pt 'Arial Black';
text-align:center;cursor:hand}
.st1
{color:red;background-color:lightblue;
border:thin solid green}
.st2
{color:blue;background-color:pink;
border:thin solid navy}
.st3
{color:maroon;background-color:white;
border:thin solid magenta}
.st4
{color:lime;background-color:gray;
border:thin solid red}
.st5
{color:white;background-color:black;
border:thin solid gray}
.st6
{color:magenta;background-color:greenyellow;
border:thin solid blue}
--></style>
<script language="JavaScript"><!--
var ElemID; //現在の要素
var oldElemID = null; //1つ前の要素を記憶しておく
function Start(evt){ //文字列がクリックされると
//タイマーが動いている場合は止め、変化していた文字列の
//classNameを元に戻す
if(timerID != null)clearTimeout(timerID);
if(oldElemID != null)document.getElementById(oldElemID).className
= "st5";
evt = (evt) ? evt : ((window.event) ? window.event : null);
if(evt){
var Elem = (evt.srcElement) ? evt.srcElement
: evt.target;
ElemID = Elem.id; //クリックされた要素のIDを取得
}
oldElemID = ElemID; //このIDを記憶しておく
ChangeST();
//bodytタグのonclickイベントが生じるのを防ぐ
window.event.cancelBubble = true;
}
var st = new Array("st1","st2","st3","st4","st5","st6");
var n = 0;
var timerID = null;
function ChangeST(){
document.getElementById(ElemID).className = st[n];
n ++;
if(n > 5)n = 0;
timerID = setTimeout("ChangeST()",1000);
}
--></script>
</head>
<body onclick="if(timerID != null)clearTimeout(timerID);">
<div style="width:250" onclick="Start();">
<span id="sp1" class="st5">Kodayan HP </span><br>
<span id="sp2" class="st5">OSAKA DOS/V </span><br>
<span id="sp3" class="st5">Dynamic HTML </span><br>
<span id="sp4" class="st5">Java Applet </span><br>
<span id="sp5" class="st5">Java Script </span><br>
<span id="sp6" class="st5">VB Script </span>
</div>