สนับสนุนโดย

การใช้ JavaScript ร่วมกับ FrontPage (6)

ทำข้อความหรือภาพเลื่อนแนวตั้ง

ตัวอย่าง

โค้ด

<SCRIPT LANGUAGE="JavaScript1.2"> // configure the below five variables to change the style of the scroller var scrollerwidth=150 var scrollerheight=120 var scrollerbgcolor='lightyellow' // set below to '' if you don't wish to use a background image var scrollerbackground='scrollerback.gif' // configure the below variable to change the contents of the scroller var messages=new Array() messages[0]='<a href="http://url0">message 0</a>' messages[1]='<a href="http://url1">message 1</a>' messages[2]='<a href="http://url2">message 2</a>' messages[3]='<a href="http://url3">message 3</a>' messages[4]='<a href="http://url4">message 4</a>' ///////Do not edit pass this line/////////////////////// if (messages.length>1) i=2 else i=0 function move1(whichlayer){ tlayer=eval(whichlayer) if (tlayer.top>0&&tlayer.top<=5){ tlayer.top=0 setTimeout("move1(tlayer)",3000) setTimeout("move2(document.main.document.second)",3000) return } if (tlayer.top>=tlayer.document.height*-1){ tlayer.top-=5 setTimeout("move1(tlayer)",100) } else{ tlayer.top=scrollerheight tlayer.document.write(messages[i]) tlayer.document.close() if (i==messages.length-1) i=0 else i++ } } function move2(whichlayer){ tlayer2=eval(whichlayer) if (tlayer2.top>0&&tlayer2.top<=5){ tlayer2.top=0 setTimeout("move2(tlayer2)",3000) setTimeout("move1(document.main.document.first)",3000) return } if (tlayer2.top>=tlayer2.document.height*-1){ tlayer2.top-=5 setTimeout("move2(tlayer2)",100) } else{ tlayer2.top=scrollerheight tlayer2.document.write(messages[i]) tlayer2.document.close() if (i==messages.length-1) i=0 else i++ } } function move3(whichdiv){ tdiv=eval(whichdiv) if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){ tdiv.style.pixelTop=0 setTimeout("move3(tdiv)",3000) setTimeout("move4(second2)",3000) return } if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){ tdiv.style.pixelTop-=5 setTimeout("move3(tdiv)",100) } else{ tdiv.style.pixelTop=scrollerheight tdiv.innerHTML=messages[i] if (i==messages.length-1) i=0 else i++ } } function move4(whichdiv){ tdiv2=eval(whichdiv) if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){ tdiv2.style.pixelTop=0 setTimeout("move4(tdiv2)",3000) setTimeout("move3(first2)",3000) return } if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){ tdiv2.style.pixelTop-=5 setTimeout("move4(second2)",100) } else{ tdiv2.style.pixelTop=scrollerheight tdiv2.innerHTML=messages[i] if (i==messages.length-1) i=0 else i++ } } function startscroll(){ if (document.all){ move3(first2) second2.style.top=scrollerheight second2.style.visibility='visible' } else if (document.layers){ document.main.visibility='show' move1(document.main.document.first) document.main.document.second.top=scrollerheight+5 document.main.document.second.visibility='show' } } window.onload=startscroll </SCRIPT> <ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; background=&{scrollerbackground}; visibility=hide> <layer id="first" left=0 top=1 width=&{scrollerwidth};> <SCRIPT LANGUAGE="JavaScript1.2"> if (document.layers) document.write(messages[0]) </SCRIPT> </layer> <layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide> <SCRIPT LANGUAGE="JavaScript1.2"> if (document.layers) document.write(messages[1]) </SCRIPT> </layer> </ilayer> <SCRIPT LANGUAGE="JavaScript1.2"> if (document.all){ document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+' ;background-image:url('+scrollerbackground+')">') document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">') document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">') document.write(messages[0]) document.writeln('</div>') document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0;visibility:hidden">') document.write(messages[1]) document.writeln('</div>') document.writeln('</div>') document.writeln('</span>') } </SCRIPT>

วิธีใช้

1. ก๊อปปี้โค้ดข้างต้นไปใส่ใน Notepad

2. แก้ไขค่าตัวแปรเพื่อปรับแต่งการทำงาน โดย

scrollerwidth     ใช้ระบุความกว้างของบริเวณที่จะให้รูปเลื่อน หน่วยเป็นพิกเซล

scrollerheight   ใช้ระบุความสูงของบริเวณที่จะให้รูปเลื่อน

scrollerbgcolor  กำหนดสีพื้น ถ้าไม่ต้องการให้มีสี (คือโปร่งใส) ให้ลบชื่อสีออกจนเหลือเพียง ''

scrollerbackground  กำหนดรูปพื้น ถ้าไม่ต้องการให้มีพื้น  ให้ลบชื่อไฟล์รูปออกจนเหลือเพียง ''

3. แก้ไขค่าตัวแปร messages[0] เพื่อกำหนดโค้ด HTML ที่จะใช้แสดงข้อความ รูป และไฮเปอร์ลิงค์ เช่น จากโค้ดเดิม

'<a href="http://url0">message 0</a>'

แก้ไขเป็น

'<p><a href="http://www.provision.co.th/new_book.htm" target="_blank"><img border="0" src="images/images_ad/hotweb_2001s.gif" align="left" hspace="10" width="54" height="75"><br>Hot Web 2001</a><br>(4 สีตลอดเล่ม)</p>'

4. แก้ไขค่า messages[  ] ตัวที่ 1, 2, 3 และ 4 ให้เป็นโค้ดชุดอื่นๆ อีกตามต้องการ ถ้าไม่เพียงพอ ก็สามารถเพิ่มค่าที่ 5, 6, ... ไปได้เรื่อยๆ หรือถ้ามากเกินไป ก็ลบตัวแปรส่วนที่เกินออกได้ (ลบทั้งบรรทัด)

5. ก๊อปปี้โค้ดจาก Notepad ไปแทรกในเว็บเพจ ตรงตำแหน่งที่จะแสดงเอฟเฟ็คท์  โดยทำในแท็บ Normal โดยใช้คำสั่ง Insert Advanced HTML

คุณสามารถใช้ FrontPage ช่วยสร้างโค้ด HTML สำหรับนำมาใส่ในตัวแปร messages ข้างต้นได้ โดยการจัดรูปแบบของข้อความ รูปภาพ และสร้างไฮเปอร์ลิงค์ในเว็บเพจตามปกติ จากนั้นก็คลิกแท็บ HTML แล้วก๊อปปี้โค้ดเฉพาะส่วนที่ต้องการมาใช้

เมนูแบบ Drop-Down

เป็นการสร้างเมนู เพื่อใช้สำหรับเปิดไปยังเว็บเพจหน้าต่างๆ เมนูประเภทนี้ มีประโยชน์ตรงประหยัดเนื้อที่ เพราะใช้เพียงบรรทัดเดียว ก็สามารถลิงค์ไปยังเว็บเพจนับสิบๆ หน้าได้

ตัวอย่าง 

โค้ด

<form name="jumpy"> <p><select name="example" size="1" onChange="gone()"> <option value="http://www.cnet.com">Cnet</option> <option value="http://www.cnn.com">CNN</option> <option value="http://www.geocities.com">Geocities</option> </select> </form> <SCRIPT LANGUAGE="javascript"> <!-- function gone() { location=document.jumpy.example.options[document.jumpy.example.selectedIndex].value } //--> </SCRIPT>

วิธีใช้

1. ก๊อปปี้โค้ดข้างต้นไปใส่ใน Notepad

2. กำหนดจำนวนบรรทัดของเมนู โดยแก้ไขค่า size="1" เช่น ถ้าจะให้มี 4 บรรทัดก็แก้เป็น size="4"

3. กำหนดข้อความและลิงค์ของแต่ละออปชั่น เช่น ถ้าต้องการใช้ข้อความว่า "โฮมเพจ" ลิงค์ไปยัง "http://www.pvinter.com/fp2000" ดังนั้นจากโค้ดเดิม

   <option value="http://www.cnet.com">Cnet</option>

   ก็แก้ไขเป็น

   <option value="http://www.pvinter.com/fp2000">โฮมเพจ</option>

4. กำหนดออปชั่นอื่นๆ ในทำนองเดียวกัน โดยสามารถเพิ่มบรรทัดของแท็ก <option> ขึ้นมาได้ไม่จำกัด

5. ก๊อปปี้โค้ดจาก Notepad ไปแทรกในเว็บเพจ ตรงตำแหน่งที่ต้องการให้เป็นเมนู โดยทำในแท็บ Normal โดยใช้คำสั่ง Insert Advanced HTML

ตัวอย่างนี้แสดงให้เห็นรูปแบบหนึ่ง ขอการใช้งาน JavaScript ร่วมกับองค์ประกอบของแบบฟอร์มในเว็บเพจ ซึ่งการทำงานร่วมกันลักษณะนี้ สามารถนำไปใช้สร้างเอฟเฟ็ค์ หรือคุณสมบัติอื่นๆ ได้อีกมาก เราสามารถดัดแปลงเมนูแบบ drop-down ให้มีคุณสมบัติปลีกย่อยที่แตกต่างกันออกไป ได้อีกหลายแบบ หากคุณต้องการใช้เมนูลักษณะอื่น ก็ก๊อปปี้โค้ดฟรีได้จาก Combo Box Scripts

Copyright © 2000-2003, Creative Ideas.  All rights reserved.
Webmaster : webmaster@provision.co.th