返回列表 上一主題 發帖

[分享] 製作網頁圖片廣告連結

[分享] 製作網頁圖片廣告連結

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

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

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

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

範例

網頁文件載入時(OnLoad)呼叫「imgStretch」函數開始配置第 1 組廣告, 並將廣告圖片由小到大進行漸變, 當廣告圖片到達指定的寬度與長度時, 依指定的停留時間顯示該廣告圖片。達到指定的廣告圖停留顯示時間後, 呼叫「imgShirk」函數開始縮小廣告圖片。當圖片寬度與長度小於等於0時, 呼叫「imgIni」函數指定下 1 組輪播的廣告。
F6491_1_a.jpg
2010-6-4 01:40
F6491_1_b.jpg
2010-6-4 01:40
F6491_1_c.jpg
2010-6-4 01:41


範例原始碼
  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. }

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

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

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

  81. //滑鼠指標移入時
  82. function mouse_in() {
  83. document.myPic.style.filter="Alpha(Opacity=50)"
  84. doChg=false
  85. }

  86. //滑鼠指標移出時
  87. function mouse_out() {
  88. document.myPic.style.filter="Alpha(Opacity=100)"
  89. doChg=true
  90. clearTimeout(timer)
  91. imgStretch()
  92. }
  93. </SCRIPT>

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

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

        靜思自在 : 唯其尊重自己的人,才更勇於縮小自己。
返回列表 上一主題