Board logo

標題: [分享] 製作網頁圖片廣告連結 [打印本頁]
作者: 小誌    時間: 2010-6-4 01:42     標題: 製作網頁圖片廣告連結

用途
設置於網頁中進行廣告輪播

說明
□什麼是廣告輪播？就是在你的網頁中放置一個固定的廣告版位, 而廣告版位的廣告則每隔一段時就更換一個新的內容。

□如果瀏覽者對我們廣告版位內的廣告內容有興趣, 則他可在廣告出現後, 直接以滑鼠點選該廣告, 而連結至該廣告的網頁。

□本案例為圖片式的廣告輪播, 以陣列方式為廣告圖片與廣告鏈結進行配對, 可無限制增加輪播的項目。廣告圖片切換方式為【載入廣告圖片, 圖片由小到大/圖片由大到小/載入下一項廣告圖片, 圖片由小到大/】。鏈結特效則為：播出/滑鼠移出時, 圖片加上 100% 透明度的 Alpha 濾鏡效果（原圖顯示）；滑鼠移入時, 圖片加上 50% 透明度的 Alpha 濾鏡效果。

範例

網頁文件載入時（OnLoad）呼叫「imgStretch」函數開始配置第 1 組廣告, 並將廣告圖片由小到大進行漸變, 當廣告圖片到達指定的寬度與長度時, 依指定的停留時間顯示該廣告圖片。達到指定的廣告圖停留顯示時間後, 呼叫「imgShirk」函數開始縮小廣告圖片。當圖片寬度與長度小於等於0時, 呼叫「imgIni」函數指定下 1 組輪播的廣告。
[attach]1106[/attach][attach]1107[/attach][attach]1108[/attach]

範例原始碼
  1. <html>
  2. <head>
  3. <title>圖片廣告連結</title>
  4. <SCRIPT language="JavaScript">
  5. imgwidth=400 //圖片高度
  6. imgheight=250 //圖片寬度
  7. imgPauseTime=5000 //圖片停留時間
  8. imgSpeed=20 //圖片特效速度
  9. chgLoop=0
  10. imgCount=0
  11. doChg=true
  12. //廣告圖片來源
  13. imgSrc=new Array()
  14. imgSrc[0]="img/p000.jpg"
  15. imgSrc[1]="img/p001.jpg"
  16. imgSrc[2]="img/p002.jpg"
  17. imgSrc[3]="img/p003.jpg"
  18. imgSrc[4]="img/p004.jpg"
  19. //廣告圖片的超鏈結
  20. imgURL=new Array()
  21. imgURL[0]="http://www..twbts.com"
  22. imgURL[1]="http://gb.twbts.com"
  23. imgURL[2]="http://www..twbts.com"
  24. imgURL[3]="http://gb.twbts.com"
  25. imgURL[4]="http://www..twbts.com"
  26. //建立影像物件陣列, 並將圖片檔案預先儲存物件內
  27. imgArray=new Array()
  28. for (x=0;x<=imgSrc.length-1;x++) {
  29. imgArray[x]=new Image()
  30. imgArray[x].src=imgSrc[x]
  31. }

  33. //圖片設定
  34. function imgIni() {
  35. doChg=true
  36. imgCount++
  37. if (imgCount>=imgSrc.length){
  38. imgCount=0
  39. }
  40. imgStretch()
  41. }

  43. //圖片放大效果
  44. function imgStretch() {
  45. if(doChg){
  46. if (chgLoop<=100) {
  47. if (document.all) {
  48. imgArea.innerHTML="<a href='"+imgURL[imgCount] +
  49. "' target='_blank'><img name='myPic' width='" + chgLoop*imgwidth/100 +
  50. "' height='"+chgLoop*imgheight/100+"' src='" + imgArray[imgCount].src + "' border='0'></a>"
  51. }
  52. chgLoop+=10
  53. timer=setTimeout("imgStretch()", imgSpeed)
  54. }
  55. else {
  56. chgLoop=100
  57. clearTimeout(timer)
  58. imgArea.innerHTML="<a href='"+imgURL[imgCount] +
  59. "' target='_blank'><img name='myPic' src='" + imgArray[imgCount].src + "' border='0'></a>"
  60. timer=setTimeout("imgShirk()", imgPauseTime)
  61. }
  62. }
  63. }

  65. //圖片縮小效果
  66. function imgShirk() {
  67. if(doChg){
  68. if (chgLoop>=0) {
  69. if (document.all) {
  70. imgArea.innerHTML="<a href='"+imgURL[imgCount] +
  71. "' target='_blank'><img name='myPic' width='" + chgLoop*imgwidth/100 +
  72. "' height='" + chgLoop*imgheight/100 + "' src='" + imgArray[imgCount].src + "' border='0'></a>"
  73. }
  74. chgLoop-=10
  75. timer=setTimeout("imgShirk()", imgSpeed)
  76. }
  77. else {
  78. chgLoop=0
  79. clearTimeout(timer)
  80. imgIni()
  81. }
  82. }
  83. }

  85. //滑鼠指標移入時
  86. function mouse_in() {
  87. document.myPic.style.filter="Alpha(Opacity=50)"
  88. doChg=false
  89. }

  91. //滑鼠指標移出時
  92. function mouse_out() {
  93. document.myPic.style.filter="Alpha(Opacity=100)"
  94. doChg=true
  95. clearTimeout(timer)
  96. imgStretch()
  97. }
  98. </SCRIPT>

  100. </head>
  101. <body bgcolor="#FFFFFF" onLoad="imgStretch()">
  102. <center>
  103. <table cellspacing="0" cellpadding="0">
  104. <tr><td>
  105. <img border="0" src="img/topc.gif"></td></tr>
  106. <tr><td>
  107. <div id="imgArea" bgcolor="#FFFFFF" onMouseOver="mouse_in()" onMouseOut="mouse_out()"></div>
  108. </td></tr><tr><td>
  109. <img border="0" src="img/buttomc.gif"></td>
  110. </tr></table>
  111. </body>
  112. </html>
複製代碼
JavaScript 精緻範例辭典

不管您是設計動態網頁，或是要用最新的 Ajax 技術，Javascript 都佔了相當吃重的角色. 但是就算學過 Javascript，也不一定都會記得各式各樣的語法，因此一本隨時可以查閱的範例辭典就非常需要。
1.簡易的Javascript 語法入門及基礎觀念，幫助您快速了解JavaScript的使用方式。
2.搭配圖文解說及精美範例示範，讓您不但看得懂，還能馬上知道要怎麼用，是您在設計網頁時最方便的參考書。
3.最後加入 10 個精選綜合範例，讓您了解這些語法是如何實際運用在網頁中。
4.清楚標示適用的各種瀏覽器種類與版本，符合實際需求。
5.光碟中收錄完整的範例網頁檔案，方便您直接取用和修改再運用。




歡迎光臨 麻辣家族討論版版 (http://forum.twbts.com/)