過去ログ NO.1157352996
□ N [2006年08月21日16時24分]こんばんは!上手く説明が出来ないのですがたまにリンク集で見られるサイト名(文字)にオンマウスで四角で囲ってあった場所にバナーが表示されるというモノの方法をどうしてもマスターしたくて書き込み失礼します!
勝手にとあるサイト様のリンク集のソース拝見した所(←ごめんなさい；
下のような感じになるのかな?と思うのですがくわしく説明してるサイト様も見つけられずタグ音痴なもので数時間ムムー。と頑張っても自力でマスター出来ませんでした;;
くわしく説明してるサイト様のリンクを貼って頂けるか
直接気長に説明していただける心優しき方がいましたら
お助け願いますｍ(ｘｘ)ｍペコリ
<script language="JavaScript">
<!--
image = new Array();
image[0] = new Image();
image[0].src = "バナーのURL";
image[1] = new Image();
image[1].src = "バナーのURL";
・
・
・
image[9] = new Image();
image[9].src = "バナーのURL";
function Img_2(n){
if(document.images){
document.link.src=image[n-1].src;}}
-->
</script>
□ NXer [2006年08月23日16時17分]
はじめまして。NXerです。
>四角で囲ってあった場所にバナーが表示される
類似のウェブページを以下のように作成してみました。コピー・
ペーストして自由に変更してみてください。しかし、その結果
報告を求めるものではありません。
javascriptはだれでも中身をみることができますから、オープン・
ソースです。
このページは、javascript言語の初心レベル、配列が使える中級レ
ベルを対象としています。また、バナー画像のダウンロード、保存な
どFTPソフトウェアを使って、ウィンドウズやサーバにフォルダを作
成して画像が転送できることを前提としています（下段参照）。しか
し、すべての点で初心者の方でも、説明の通りにすれば、画面内最適
の位置に、バナー表示ができることを願って投稿します。
--------------------------------------------------------
<TITLE>javascript_banner_display by nxer summer '06</TITLE>
<SCRIPT language="JavaScript">
<!--
// image オブジェクト変数、配列化と.srcで画像自動取り込み
// 各サイトのバナーを自サイト画像フォルダに保存する、gif画像ok。
image = new Array();
image[0] = new Image();
image[0].src = "http://127.0.0.1/~user/banner/img1.jpg";
image[1] = new Image();
image[1].src = "http://127.0.0.1/~user/banner/img2.jpg";
image[2] = new Image();
image[2].src = "http://127.0.0.1/~user/banner/img3.jpg";
image[3] = new Image();
image[3].src = "http://127.0.0.1/~user/banner/img4.jpg";
image[4] = new Image();
image[4].src = "http://127.0.0.1/~user/banner/img5.jpg";
//画像src関数 n またはnum, numberなど画像番号
function Img_1(n){
if(document.images){
document.link.src=image[n-1].src;}}
-->
</SCRIPT> </HEAD>
<BODY>
<P>
<A href="index1.html" onmouseover="Img_1(1)" onmouseout="Img_1(4)">banner1</A><BR>
<A href="index2.html" onmouseover="Img_1(2)" onmouseout="Img_1(4)">banner2</A><BR>
<A href="index3.html" onmouseover="Img_1(3)" onmouseout="Img_1(4)">banner3</A><BR>
</P>
<TABLE border="1">
<TBODY>
<TR>
<TH height="53" width="89"></TH>
</TR>
<TR>
<TD height="57" width="89"></TD>
</TR>
<TR>
<TD height="33" width="89"></TD>
</TR>
<TR>
<TD height="102" width="89" align="center" bgcolor="#ffffc8"><IMG src="http://127.0.0.1/~user/banner/img4.jpg" width="64" height="38" border="0" name="link"></TD>
</TR>
</TBODY>
</TABLE>
<BR>
<BR>
<BR>
</HTML>
----------------------------------------------------------------------
作成上の注意点：
perlなどのウェブ・プログラミングでは、配列は、0,1,2,3,,,nとします。
画像番号をimg0.jpg/gifからはじめる時は、image[n-1]は[n]です。
バナーの位置指定には、ご質問が四角の中ということからテーブルを使っています。
四角の中には、最初から、適当な画像を表示しておきます。その画像を、マウスが
離れたときの画像に使っています。利用者が戸惑わないようにリンク先バナーと一目
で分かるような画像がよいと思います。
テーブルを使わないときは
<SPAN id="Img_1()">〜</SPAN> で画面の任意の位置に表示できます。
---------------------------------------------------------------例
<SPAN id="Img_2()"><IMG src="http://127.0.0.1/~user/banner/img4.jpg" width="64" height="38" border="0" name="link"> </SPAN>
-----------------------------------------------------------
name="link" はimg のプロパティです。document.link.src と連動します。
リンクサイトの種別（例、映画サイト、音楽サイトなど）にあわせて
document.movie.src
document.music.src
のようにnameを変えると、常に発展するサイトや新鮮さを保つ上でメンテ
（保守）性は向上します。
<SPAN id="Img_1()">〜</SPAN>
タグで、スタイルシートを指定することができますから、html, javascript,css
を使った面白いウェブサイトの構築が可能になります。
Nさんが参考にされた、javascriptを記述されました、とあるサイト様に
感謝申し上げます。Nさん、ご希望のウェブページの参考になることができれ
ば幸いです。
参考サイト：
http://net-hp.log.thebbs.jp/1123074474.html
onmouseoverを使ったＨＰ作成の質問。他にもスクリプトが同一の質問が
他のサイト（2005/11/23 16:58（椿））にありました。回答は不明でした。
http://www.partnershipwithchildrennyc.org/about/index.html
このサイトを参考にさせていただきました。感謝申し上げます。
Thanks to Partnership with Children NYC for its javascript.
**********参考例 サーバのディレクトリ構成図**********
/public_html/
.....|-index.html このページに上のスクリプトを記述します。
.....|-/banner/
..........|-img1.jpg/gif
..........|-img2.jpg/gif 画像はjpgやgifなど
この構成の場合
--------------------------------------------
image[0].src = "http://abc.ne.jp/~user/banner/img1.jpg";
のようにhttp://で始まるＵＲＬを書きます。
image[0].src = "./banner/img1.jpg";
のようにドット. スラッシュ/で指定することもできます。
すえぽんさんには、貴重なリソースをいつものようにお借りしました。
ありがとうございます。
|
|
