<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META name="DESCRIPTION" content="JavaScriptでできる技が多数あります。「あっ」と驚いてください。"> 
<META name="keywords" content="JavaScript,DHTML,DynamicHTML,rollover,ロールオーバー">
<meta http-equiv="Content-Type" content="text/html; charset=SHIFT_JIS">
<meta http-equiv="Content-Style-Type" content="text/css">
<title>あっと驚くJavaScript〜ロールオーバー</title>
<script LANGUAGE=JavaScript SRC="../script.js" type=text/javascript></script>
<LINK rel="stylesheet" href="../javascript.css" type="text/css">
<script language='JavaScript' src='../../flashitoben.js'></script>
<script type="text/javascript" src="../jkl-parsexml.js"></script>
<script>
<!--

//プログレスバー
var bar

//メイン関数
function xmlRead(url)
{
	//プログレスバー開始
	document.getElementById('out1').innerHTML = 'pre loading...'
	bar = setInterval('progressbar()')

	// JKL.ParseXMLオブジェクトを生成
	var xml = new JKL.ParseXML( url );  
	var func = function ( data )        // 呼び出し先関数を定義する
	{  
		onloaded1( data );              //コールバック
	}
	xml.async( func );                  // 呼び出し先関数を指定する
	xml.parse();                        // ダウンロード〜解析〜関数呼び出しする
}


//XMLを受信時に起動するコールバック関数
function onloaded1(xml)
{
	var data = ""
  
	//books要素以下のbook要素を順番に処理
	for(i in xml["ListingInfo"].ItemInfo)
	{
	

		//出力用HTMLを作る
		data += '<div class="xml_waku">'
		data += '<a href="http://ad0.a20.jp/bin/clk?ui=24261&pi=102&ti=ITM&ii='
		data += xml["ListingInfo"].ItemInfo[i].ItemNo
		data += '" target="_blank">'
		data += '<img class="xml_image" src="'
		data += xml["ListingInfo"].ItemInfo[i].ImageUrl
		data += '" border="0">'
		data += '</a>'
		data += '<div class="xml_title">'
		data += '<a href="http://ad0.a20.jp/bin/clk?ui=24261&pi=102&ti=ITM&ii='
		data += xml["ListingInfo"].ItemInfo[i].ItemNo
		data += '" target="_blank">'
		data += xml["ListingInfo"].ItemInfo[i].ItemName
		data += '</a>'
		data += '</div>'
		data += '<div class="xml_maker">発売元：'
		data += xml["ListingInfo"].ItemInfo[i].Tag2
		data += '<br>著者：'
		data += xml["ListingInfo"].ItemInfo[i].Tag3
		data += '</div><div class="xml_teika">定価：<span class="xml_price">'
		data += xml["ListingInfo"].ItemInfo[i].ItemPrice
		data += '円</span>'
		data += '</div>'
		data += '<div class="xml_dammy">-</div></div>'
		
	}
	//プログレスバー停止
	clearInterval(bar)
	//出力
	document.getElementById('out1').innerHTML = data
}

//プログレスバー
function progressbar()
{
	document.getElementById('out1').innerHTML = '<p><img src="../indicator2.gif" /></p>'
}



//-->
</script>
</head>
<BASE target=_blank>
<body onLoad="xmlRead('001.php')">

        <div id="sitemap_waku">
        <div id="pankuzu">
         <a id="sitemaplink" href="http://www.vis-ta.com/" target="_parent">トップ</a> ＞ あっと驚くJavaScript
        </div>
        <div id="sitemap">
         <a id="sitemaplink" href="http://shop.vis-ta.com/">shopインデックス</a> | <a id="sitemaplink" href="http://shop.vis-ta.com/sitemap/">お問い合わせ・サイトマップ</a> 
        </div>
        </div>


<div align="center">
<script language='JavaScript'>
<!--
writeFlashHTML2('_swf=./menu_rollover.swf','_height=80','_width=750','_quality=high') 
//-->
</script>
</div>
<div id="container">
<!-- ヘッダー・イメージ↓ -->
<div id="header">
<p>
<IMG SRC="rollover.gif" WIDTH="700" HEIGHT="30">
</p>
</div>
<!-- ヘッダー・イメージ↑ -->
<div id="contents">

<!-- ★縦長バナー↓ -->
<div class="left_title">
JavaScript-登録日順
</div>
<div id="side_left">

<div id="out1"></div>


</div>
<!-- ★縦長バナー↑ -->

<!-- コンテンツ↓ -->
<div id="main">
<p>
<TABLE cellPadding=0 cellSpacing=0 border=0>
<TBODY>
<!-- 対応ブラウザ↓ -->
<TR>
<TD></TD>
<TD><IMG SRC="../iof_ok.gif"></TD></TR>
<!-- 対応ブラウザ↑ -->
<TR>
<TD>
<DIV class=current id=d3><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/001t-change.htm" 
onclick="showElement('d3')">ロールオーバー・ロールアウトでテキストの色が変化する</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d4><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/002_bg.htm" 
onclick="showElement('d4')">ロールオーバーでテキストの背景があらわれる</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d5><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/003_bg.htm" 
onclick="showElement('d5')">ロールオーバー・ロールアウトでテキストの背景色が変化する</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d6><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/004_bg.htm" 
onclick="showElement('d6')">テキストの背景色の変化をロールオーバーのみで指定</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d7><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/005_bg.htm" 
onclick="showElement('d7')">ロールオーバーで別のテキストの背景色が変化する</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d8><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/006_big.htm" 
onclick="showElement('d8')">ロールオーバーでテキストが拡大する</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d9><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/007_small.htm" 
onclick="showElement('d9')">ロールオーバーでテキストが縮小する</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d10><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/008_hidden.htm" 
onclick="showElement('d10')">文字列が消えて領域が残る</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d11><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/009_hidden.htm" 
onclick="showElement('d11')">文字列が消えて領域も消える</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d12><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/010_hidden.htm" 
onclick="showElement('d12')">文字列が消えたり現れたり，領域は残る（別の文字列を指定する）</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d13><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/011_hidden.htm" 
onclick="showElement('d13')">文字列が消えたり現れたり，領域も消える（別の文字列を指定する）</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d14><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/012_clickhidden.htm" 
onclick="showElement('d14')">クリックで消えたり現れたり，領域は残る（別の文字列を指定する）</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d15><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/013_clickhidden.htm" 
onclick="showElement('d15')">クリックで消えたり現れたり，領域も消える（別の文字列を指定する）</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d16><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/014_font.htm" 
onclick="showElement('d16')">フォントの種類を変える</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d17><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/015_text.htm" 
onclick="showElement('d17')">テキストそのものを変える</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d18><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/016_logobig.htm" 
onclick="showElement('d18')">イメージが拡大，拡大率は自由に設定</A></TD></TR>
<TR>
<TD>
<DIV class=current id=d19><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/017_button.htm" 
onclick="showElement('d19')">スタイルシートでボタンをつくる</A></TD></TR>
<TR>
<TD><DIV class=current id=d20><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/018_button.htm"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
onclick="showElement('d20')">３つのイメージを使用したロールオーバーボタン</A></TD></TR>
<TR>
<TD><DIV class=current id=d21><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/019_frame.htm"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
onclick="showElement('d21')">フレーム間でロールオーバーを実行，別フレームにテキスト表示</A></TD></TR>
<!-- 対応ブラウザ↓ -->
<TR>
<TD></TD>
<TD><IMG SRC="../io_ok.gif"></TD></TR>
<!-- 対応ブラウザ↑ -->
<TR>
<TD><DIV class=current id=d24><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/022_message.htm"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
onclick="showElement('d24')">テキストに触れると，別の位置にコメント表示</A></TD></TR>
<TR>
<TD><DIV class=current id=d25><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/023_displaytext.htm"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
onclick="showElement('d25')">イメージに触れると，別の位置にコメント表示</A></TD></TR>
<TR>
<TD><DIV class=current id=d26><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/024_slide.htm"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
onclick="showElement('d26')">スライドしながらコメントを表示する</A></TD></TR>
<TR>
<TD><DIV class=current id=d27><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/025_changetext.htm"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
onclick="showElement('d27')">テキストをチェンジする</A></TD></TR>
<!-- 対応ブラウザ↓ -->
<TR>
<TD></TD>
<TD><IMG SRC="../i_ok.gif"></TD></TR>
<!-- 対応ブラウザ↑ -->
<TR>
<TD><DIV class=current id=d28><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/020_status.htm"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
onclick="showElement('d22')">コメントをステータスバーに表示する</A></TD></TR>
<TR>
<TD><DIV class=current id=d29><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/021_alt.htm"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
onclick="showElement('d23')">代替テキスト風，大げさ表示</A></TD></TR>
<TR>
<TD><DIV class=current id=d30><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/026_image1-4.htm"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
onclick="showElement('d22')">1つのイメージを４つに分割して表示する。</A></TD></TR>
<TR>
<TD><DIV class=current id=d31><IMG SRC="../show.gif"></DIV></TD>
<TD><A href="htm/027_tooltip.htm"　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　
onclick="showElement('d23')">ツールチップス４つのパターン</A></TD></TR>
</TABLE>

</p>
<br><br>
<div class="google">
<script type="text/javascript"><!--
google_ad_client = "pub-2036785234916464";
google_ad_width = 468;
google_ad_height = 60;
google_ad_format = "468x60_as";
google_ad_type = "text_image";
google_ad_channel ="";
google_color_border = "F0F0FF";
google_color_link = "2BA94F";
google_color_bg = "F0F0FF";
google_color_text = "6C82B5";
google_color_url = "2BA94F";
//--></script>

<script type="text/javascript"
  src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

</div>
<!-- コンテンツ↑ -->

</div>

<!-- ★横バナー↓ -->
<div id="footer">
<p>
<div align="center" style="color:#555555; font-size:12px;">Copyright（C)1997.　itoben style.　All Rights Reserved.&nbsp;<!--#exec cgi="./counter/imDCSSI/im_dcssi.pl"--></div>
</p>
</div>
<!-- ★横バナー↑ -->
</div>


</body>
</html>
