BloggerAds

2008年8月21日 星期四

[Java Script] 用 Java Script 來作圖片的廣告輪撥

From: Polin Wei

今天工作時, 為了要讓使用者可以看圖片瞭解要公告的事項, 所以改寫了跑馬燈的 Java Script, 程式如下:

<script language="JavaScript">
<!--
var t = 500; // 顯示的時間
var tt = 0;
var ttt = 0;
var isOnPic = false;  => 判斷滑鼠是否在圖片上
var ry= 1;
function random_imglink(){
        var myimages=new Array()
        //以下放置要顯示的圖片.不夠的話自己加上
        myimages[1]="image01.png"
        myimages[2]="image02.png"


        //以下放置圖片相對的網址.不夠的話自己加上
        var imagelinks=new Array()
        imagelinks[1]="http://tw.myblog.yahoo.com/polinwei/"
        imagelinks[2]="http://polinwei.blogspot.com/2008/08/html.html"

        // alt 浮現視窗要顯示的文字
        var imagealt="new" Array()
        imagealt[1]="我與小崴崴的生活日記"
        imagealt[2]="用 HTML 語法讓圖片上也可以作連結"        
        
        var adv=document.getElementById("adv");    
        // 滑鼠若在圖片上時, 則不輪詢
        if (!isOnPic){
            ry=Math.floor(Math.random()*myimages.length);            
        }
        if (ry==0) ry=1

        adv.innerHTML = '<a onmouseover="isOnPic=true;" onmouseout="isOnPic=false;" href='+'"'+imagelinks[ry]+'"'+'target="_blank"><img src="'+myimages[ry]+'" width="530" height="250" border="0" alt=""'+imagealt[ry]+'">" </a>';
        ttt = 5*t;
        tt += ttt;
        setTimeout("random_imglink()", ttt);        
}
//-->
</script>


整個 HTML 檔案如下:



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>資訊公告</title>
<script language="JavaScript">
<!--
var t = 500; // 顯示的時間
var tt = 0;
var ttt = 0;
var isOnPic = false;  => 判斷滑鼠是否在圖片上
var ry= 1;
function random_imglink(){
        var myimages=new Array()
        //以下放置要顯示的圖片.不夠的話自己加上
        myimages[1]="image01.png"
        myimages[2]="image02.png"


        //以下放置圖片相對的網址.不夠的話自己加上
        var imagelinks=new Array()
        imagelinks[1]="http://tw.myblog.yahoo.com/polinwei/"
        imagelinks[2]="http://polinwei.blogspot.com/2008/08/html.html"

        // alt 浮現視窗要顯示的文字
        var imagealt="""new""" Array()
        imagealt[1]="我與小崴崴的生活日記"
        imagealt[2]="用 HTML 語法讓圖片上也可以作連結"       
       
        var adv=document.getElementById("adv");   
        // 滑鼠若在圖片上時, 則不輪詢
        if (!isOnPic){
            ry=Math.floor(Math.random()*myimages.length);           
        }
        if (ry==0) ry=1

        adv.innerHTML = '<a onmouseover="isOnPic=true;" onmouseout="isOnPic=false;" href='+'"'+imagelinks[ry]+'"'+'target="_blank"><img src="'+myimages[ry]+'" width="530" height="250" border="0" alt=""""'+imagealt[ry]+'">""" </a>';
        ttt = 5*t;
        tt += ttt;
        setTimeout("random_imglink()", ttt);       
}
//-->
</script>
</head>

<body>

<div name="adv" id="adv">
    <script>
        random_imglink();
    </script>
</div>
</p>
</body>
</html>





沒有留言:

張貼留言