Scribd
Unggah
365 tayangan

Membuat File JavaScript Flash Pada Macromedia Dreamweaver 8.

Diunggah oleh

Dicky Sugara
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
365 tayangan

Membuat File JavaScript Flash Pada Macromedia Dreamweaver 8.

Diunggah oleh

Dicky Sugara
Hak Cipta
© Attribution Non-Commercial (BY-NC)
Format Tersedia
Unduh sebagai PDF, TXT atau baca online di Scribd
Anda di halaman 1/ 18

Flash Form

Tutorial: tutorial : 1.Membuat file JavaScript flash pada Macromedia Dreamweaver 8. 2.Menulis kodenya : var flashcolor="red" var flashinterval=1000 //flash interval in miliseconds (1000=1 sec) var formcollect=document.getElementsByTagName? document.getElementsByTagName("FORM") : document.all? document.all.tags("FORM") : new Array() var flashcollect=new Array() for (i=0; i<formcollect.length; i++){ for (e=0; e<formcollect[i].elements.length; e++){ if (formcollect[i].elements[e].className=="flashit") flashcollect[flashcollect.length]=formcollect[i].elements[e] } } function flashelements(){ for (f=0; f<flashcollect.length; f++){ if (flashcollect[f].style.color=='') flashcollect[f].style.color=flashcolor else flashcollect[f].style.color="" } } if (flashcollect.length>0) setInterval("flashelements()",flashinterval) 3.Simpan dengan nama file flash dan format js di local C (data C) di WAMP,pilih WWW,buat folder baru untuk menyimpannya. 4.Membuat file php flashform pada Macromedia Dreamweaver 8. 5.Menulis kodenya <html> <head><title></title> <style type="text/css"> <!-.style1 { font-family: Verdana, Arial, Helvetica, sans-serif;

color: #FF0000; } --> </style> </head> <body bgcolor="#CCCCCC"> <div align="center" class="style1"> <h4>Contoh Flash Form</h4> </div> <form> <input type="submit" value="submit" class="flashit"> <script type="text/javascript" src="flash.js"></script> </form> </body> </html> 6.Simpan dengan nama file flashform dan format php di local C (data C) di WAMP,pilih WWW,buat folder baru untuk menyimpannya.

Agreement tutorial: 1.Membuat php Agreement pada Macromedia Dreamweaver 8. 2.Menulis kode php Agreement <html> <head><title>FORM AGREEMENT</title> <script> var checkobj function agreesubmit(el){ checkobj=el if (document.all||document.getElementById){ for (i=0;i<checkobj.form.length;i++){//hunt down submit button var tempobj=checkobj.form.elements[i] if(tempobj.type.toLowerCase()=="submit") tempobj.disabled=!checkobj.checked }//--if (tempobj) }//--for }//--if (document) function defaultagree(el){ if (!document.all&&!document.getElementById){ if(window.checkobj&&checkobj.checked) return true

else{ alert("Please read/accept terms to submit form") return false }//--if(window) }//--id(document) }//--function </script> <style type="text/css"> <!-.style1 { font-family: Verdana, Arial, Helvetica, sans-serif; color: #FF0000; } --> </style> </head> <body bgcolor="#CCCCCC"> <h3 align="center" class="style1">Accept agreement</h3> <p> Please read first our term and conditions </p> <p> <form name="agreeform" onSubmit="return defaultagree(this)"> <textarea rows=5 cols=20></textarea> <br> <input name="agreecheck" type="checkbox" onClick="agreesubmit(this)"><b> agree to the above terms </b><br> <input type="Submit" value="Submit!" disabled> </form> </body> </html> 3.Simpan dengan nama agreement dan format php di local C (data C) di WAMP,pilih WWW,buat folder baru untuk menyimpannya

Getcalender

tutorial : 1.Membuat file JavaScript pup date pada Macromedia Dreamweaver 8. 2.Menulis kodenya : /* PopUp Calendar v2.1 PCI, Inc.,2000 Freeware [email protected] +1 (925) 955 1624

Permission granted for unlimited use so far as the copyright notice above remains intact. */ /* Settings. Please read readme.html file for instructions*/ var ppcDF = "m/d/Y"; var ppcMN = new Array("January","February","March","April","May","June","July","August","September" ,"October","November","December"); var ppcWN = new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); var ppcER = new Array(4); ppcER[0] = "Required DHTML functions are not supported in this browser."; ppcER[1] = "Target form field is not assigned or not accessible."; ppcER[2] = "Sorry, the chosen date is not acceptable. Please read instructions on the page."; ppcER[3] = "Unknown error occured while executing this script."; var ppcUC = false; var ppcUX = 4; var ppcUY = 4; /* Do not edit below this line unless you are sure what are you doing! */ var ppcIE=(navigator.appName == "Microsoft Internet Explorer"); var ppcNN=((navigator.appName == "Netscape")&&(document.layers)); var ppcTT="<table width=\"200\" cellspacing=\"1\" cellpadding=\"2\" border=\"1\" bordercolorlight=\"#000000\" bordercolordark=\"#000000\">\n"; var ppcCD=ppcTT;var ppcFT="<font face=\"MS Sans Serif, sans-serif\" size=\"1\" color=\"#000000\">";var ppcFC=true; var ppcTI=false;var ppcSV=null;var ppcRL=null;var ppcXC=null;var ppcYC=null; var ppcML=new Array(31,28,31,30,31,30,31,31,30,31,30,31); var ppcWE=new Array("Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday"); var ppcNow=new Date();var ppcPtr=new Date(); if (ppcNN) { window.captureEvents(Event.RESIZE); window.onresize = restoreLayers; document.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP); document.onmousedown = recordXY; document.onmouseup = confirmXY;} function restoreLayers(e) { if (ppcNN) { with (window.document) { open("text/html"); write("<html><head><title>Restoring the layer structure...</title></head>"); write("<body bgcolor=\"#FFFFFF\" onLoad=\"history.go(-1)\">"); write("</body></html>");

close();}}} function recordXY(e) { if (ppcNN) { ppcXC = e.x; ppcYC = e.y; document.routeEvent(e);}} function confirmXY(e) { if (ppcNN) { ppcXC = (ppcXC == e.x) ? e.x : null; ppcYC = (ppcYC == e.y) ? e.y : null; document.routeEvent(e);}} function getCalendarFor(target,rules) { ppcSV = target; ppcRL = rules; if (ppcFC) {setCalendar();ppcFC = false;} if ((ppcSV != null)&&(ppcSV)) { if (ppcIE) { var obj = document.all['PopUpCalendar']; obj.style.left = document.body.scrollLeft+event.clientX; obj.style.top = document.body.scrollTop+event.clientY; obj.style.visibility = "visible";} else if (ppcNN) { var obj = document.layers['PopUpCalendar']; obj.left = ppcXC obj.top = ppcYC obj.visibility = "show";} else {showError(ppcER[0]);}} else {showError(ppcER[1]);}} function switchMonth(param) { var tmp = param.split("|"); setCalendar(tmp[0],tmp[1]);} function moveMonth(dir) { var obj = null; var limit = false; var tmp,dptrYear,dptrMonth; if (ppcIE) {obj = document.ppcMonthList.sItem;} else if (ppcNN) {obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMont hList.sItem;} else {showError(ppcER[0]);} if (obj != null) { if ((dir.toLowerCase() == "back")&&(obj.selectedIndex > 0)) {obj.selectedIndex--;} else if ((dir.toLowerCase() == "forward")&&(obj.selectedIndex < 12)) {obj.selectedIndex++;} else {limit = true;}} if (!limit) {

tmp = obj.options[obj.selectedIndex].value.split("|"); dptrYear = tmp[0]; dptrMonth = tmp[1]; setCalendar(dptrYear,dptrMonth);} else { if (ppcIE) { obj.style.backgroundColor = "#FF0000"; window.setTimeout("document.ppcMonthList.sItem.style.backgroundColor = '#FFFFFF'",50);}}} function selectDate(param) { var arr = param.split("|"); var year = arr[0]; var month = arr[1]; var date = arr[2]; var ptr = parseInt(date); ppcPtr.setDate(ptr); if ((ppcSV != null)&&(ppcSV)) { if (validDate(date)) {ppcSV.value = dateFormat(year,month,date);hideCalendar();} else {showError(ppcER[2]);if (ppcTI) {clearTimeout(ppcTI);ppcTI = false;}}} else { showError(ppcER[1]); hideCalendar();}} function setCalendar(year,month) { if (year == null) {year = getFullYear(ppcNow);} if (month == null) {month = ppcNow.getMonth();setSelectList(year,month);} if (month == 1) {ppcML[1] = (isLeap(year)) ? 29 : 28;} ppcPtr.setYear(year); ppcPtr.setMonth(month); ppcPtr.setDate(1); updateContent();} function updateContent() { generateContent(); if (ppcIE) {document.all['monthDays'].innerHTML = ppcCD;} else if (ppcNN) { with (document.layers['PopUpCalendar'].document.layers['monthDays'].document) { open("text/html"); write("<html>\n<head>\n<title>DynDoc</title>\n</head>\n<body bgcolor=\"#FFFFFF\">\n"); write(ppcCD); write("</body>\n</html>"); close();}} else {showError(ppcER[0]);} ppcCD = ppcTT;} function generateContent() { var year = getFullYear(ppcPtr); var month = ppcPtr.getMonth();

var date = 1; var day = ppcPtr.getDay(); var len = ppcML[month]; var bgr,cnt,tmp = ""; var j,i = 0; for (j = 0; j < 7; ++j) { if (date > len) {break;} for (i = 0; i < 7; ++i) { bgr = ((i == 0)||(i == 6)) ? "#FFFFCC" : "#FFFFFF"; if (((j == 0)&&(i < day))||(date > len)) {tmp += makeCell(bgr,year,month,0);} else {tmp += makeCell(bgr,year,month,date);++date;}} ppcCD += "<tr align=\"center\">\n" + tmp + "</tr>\n";tmp = "";} ppcCD += "</table>\n";} function makeCell(bgr,year,month,date) { var param = "\'"+year+"|"+month+"|"+date+"\'"; var td1 = "<td width=\"20\" bgcolor=\""+bgr+"\" "; var td2 = (ppcIE) ? "</font></span></td>\n" : "</font></a></td>\n"; var evt = "onMouseOver=\"this.style.backgroundColor=\'#FF0000\'\" onMouseOut=\"this.style.backgroundColor=\'"+bgr+"\'\" onMouseUp=\"selectDate("+param+")\" "; var ext = "<span Style=\"cursor: hand\">"; var lck = "<span Style=\"cursor: default\">"; var lnk = "<a href=\"javascript:selectDate("+param+")\" onMouseOver=\"window.status=\' \';return true;\">"; var cellValue = (date != 0) ? date+"" : "&nbsp;"; if ((ppcNow.getDate() == date)&&(ppcNow.getMonth() == month)&&(getFullYear(ppcNow) == year)) { cellValue = "<b>"+cellValue+"</b>";} var cellCode = ""; if (date == 0) { if (ppcIE) {cellCode = td1+"Style=\"cursor: default\">"+lck+ppcFT+cellValue+td2;} else {cellCode = td1+">"+ppcFT+cellValue+td2;}} else { if (ppcIE) {cellCode = td1+evt+"Style=\"cursor: hand\">"+ext+ppcFT+cellValue+td2;} else { if (date < 10) {cellValue = "&nbsp;" + cellValue + "&nbsp;";} cellCode = td1+">"+lnk+ppcFT+cellValue+td2;}} return cellCode;} function setSelectList(year,month) { var i = 0; var obj = null; if (ppcIE) {obj = document.ppcMonthList.sItem;} else if (ppcNN) {obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMont hList.sItem;} else {/* NOP */}

while (i < 13) { obj.options[i].value = year + "|" + month; obj.options[i].text = year + " " + ppcMN[month]; i++; month++; if (month == 12) {year++;month = 0;}}} function hideCalendar() { if (ppcIE) {document.all['PopUpCalendar'].style.visibility = "hidden";} else if (ppcNN) {document.layers['PopUpCalendar'].visibility = "hide";window.status = " ";} else {/* NOP */} ppcTI = false; setCalendar(); ppcSV = null; if (ppcIE) {var obj = document.ppcMonthList.sItem;} else if (ppcNN) {var obj = document.layers['PopUpCalendar'].document.layers['monthSelector'].document.ppcMont hList.sItem;} else {/* NOP */} obj.selectedIndex = 0;} function showError(message) { window.alert("[ PopUp Calendar ]\n\n" + message);} function isLeap(year) { if ((year%400==0)||((year%4==0)&&(year%100!=0))) {return true;} else {return false;}} function getFullYear(obj) { if (ppcNN) {return obj.getYear() + 1900;} else {return obj.getYear();}} function validDate(date) { var reply = true; if (ppcRL == null) {/* NOP */} else { var arr = ppcRL.split(":"); var mode = arr[0]; var arg = arr[1]; var key = arr[2].charAt(0).toLowerCase(); if (key != "d") { var day = ppcPtr.getDay(); var orn = isEvenOrOdd(date); reply = (mode == "[^]") ? !((day == arg)&&((orn == key)||(key == "a"))) : ((day == arg)&&((orn == key)||(key == "a")));} else {reply = (mode == "[^]") ? (date != arg) : (date == arg);}} return reply;} function isEvenOrOdd(date) { if (date - 21 > 0) {return "e";} else if (date - 14 > 0) {return "o";}

else if (date - 7 > 0) {return "e";} else {return "o";}} function dateFormat(year,month,date) { if (ppcDF == null) {ppcDF = "m/d/Y";} var day = ppcPtr.getDay(); var crt = ""; var str = ""; var chars = ppcDF.length; for (var i = 0; i < chars; ++i) { crt = ppcDF.charAt(i); switch (crt) { case "M": str += ppcMN[month]; break; case "m": str += (month<9) ? ("0"+(++month)) : ++month; break; case "Y": str += year; break; case "y": str += year.substring(2); break; case "d": str += ((ppcDF.indexOf("m")!=-1)&&(date<10)) ? ("0"+date) : date; break; case "W": str += ppcWN[day]; break; default: str += crt;}} return unescape(str);} 3.Simpan dengan nama file pup date dan format js di local C (data C) di WAMP,pilih WWW,buat folder baru untuk menyimpannya. 4.Membuat file php fgetcalender pada Macromedia Dreamweaver 8. 5.Menulis kodenya <html> <head><title>GET CALENDAR</title> <script language="JavaScript" src="pupdate.js"> </script> </head> <body bgcolor="#CCCCCC"> <h3 align="center"><font color="#FF0000">JavaScript Date </font></h3> <h4><font color="#000000">Jika anda ingin menampilkan tanggal klik pada kotak. </font></h4> <p> <input type="text" name="choice1_1" onFocus="getCalendarFor(this)"> <script language="JavaScript"> if (document.all) { document.writeln("<div id=\"PopUpCalendar\" style=\"position:absolute; left:0px; top:0px; z-index:7; width:200px; height:77px; overflow: visible; visibility: hidden; background-color: #FFFFFF; border: 1px none #000000\" onMouseOver=\"if(ppcTI){clearTimeout(ppcTI);ppcTI=false;}\" onMouseOut=\"ppcTI=setTimeout(\'hideCalendar()\',500)\">");

document.writeln("<div id=\"monthSelector\" style=\"position:absolute; left:0px; top:0px; z-index:9; width:181px; height:27px; overflow: visible; visibility:inherit\">");} else if (document.layers) { document.writeln("<layer id=\"PopUpCalendar\" pagex=\"0\" pagey=\"0\" width=\"200\" height=\"200\" z-index=\"100\" visibility=\"hide\" bgcolor=\"#FFFFFF\" onMouseOver=\"if(ppcTI){clearTimeout(ppcTI);ppcTI=false;}\" onMouseOut=\"ppcTI=setTimeout('hideCalendar()',500)\">"); document.writeln("<layer id=\"monthSelector\" left=\"0\" top=\"0\" width=\"181\" height=\"27\" z-index=\"9\" visibility=\"inherit\">");} else { document.writeln("<p><font color=\"#FF0000\"><b>Error ! The current browser is either too old or too modern (usind DOM document structure).</b></font></p>");} </script> </p> <noscript><p><font color="#FF0000"><b>JavaScript is not activated !</b></font></p></noscript> <table border="1" cellspacing="1" cellpadding="2" width="200" bordercolorlight="#000000" bordercolordark="#000000" vspace="0" hspace="0"><form name="ppcMonthList"><tr><td align="center" bgcolor="#CCCCCC"><a href="javascript:moveMonth('Back')" onMouseOver="window.status=' ';return true;"><font face="Arial, Helvetica, sans-serif" size="2" color="#000000"><b>< </b></font></a><font face="MS Sans Serif, sans-serif" size="1"> <select name="sItem" onMouseOut="if(ppcIE){window.event.cancelBubble = true;}" onChange="switchMonth(this.options[this.selectedIndex].value)" style="font-family: 'MS Sans Serif', sans-serif; font-size: 9pt"><option value="0" selected>2000 January</option><option value="1">2000 February</option><option value="2">2000 March</option><option value="3">2000 April</option><option value="4">2000 May</option><option value="5">2000 June</option><option value="6">2000 July</option><option value="7">2000 August</option><option value="8">2000 September</option><option value="9">2000 October</option><option value="10">2000 November</option><option value="11">2000 December</option><option value="0">2001 January</option></select></font><a href="javascript:moveMonth('Forward')" onMouseOver="window.status=' ';return true;"><font face="Arial, Helvetica, sans-serif" size="2" color="#000000"><b> ></b></font></a></td></tr></form></table> <table border="1" cellspacing="1" cellpadding="2" bordercolorlight="#000000" bordercolordark="#000000" width="200" vspace="0" hspace="0"><tr align="center" bgcolor="#CCCCCC"><td width="20" bgcolor="#FFFFCC"><b><font face="MS Sans Serif, sans-serif" size="1">Su</font></b></td><td width="20"><b><font face="MS Sans Serif, sans-serif" size="1">Mo</font></b></td><td width="20"><b><font face="MS Sans Serif, sans-serif" size="1">Tu</font></b></td><td width="20"><b><font face="MS Sans Serif, sans-serif" size="1">We</font></b></td><td width="20"><b><font face="MS Sans Serif, sansserif" size="1">Th</font></b></td><td width="20"><b><font face="MS Sans Serif, sans-serif" size="1">Fr</font></b></td><td width="20" bgcolor="#FFFFCC"><b><font face="MS Sans Serif, sans-serif" size="1">Sa</font></b></td></tr></table>

<script language="JavaScript"> if (document.all) { document.writeln("</div>"); document.writeln("<div id=\"monthDays\" style=\"position:absolute; left:0px; top:52px; z-index:8; width:200px; height:17px; overflow: visible; visibility:inherit; backgroundcolor: #FFFFFF; border: 1px none #000000\"> </div></div>");} else if (document.layers) { document.writeln("</layer>"); document.writeln("<layer id=\"monthDays\" left=\"0\" top=\"52\" width=\"200\" height=\"17\" z-index=\"8\" bgcolor=\"#FFFFFF\" visibility=\"inherit\"> </layer></layer>");} else {/*NOP*/} </script> </body> </html>

Highlight

tutorial : 1.Membuat file JavaScript high pada Macromedia Dreamweaver 8. 2.Menulis kodenya : var highlightcolor="orange" var ns6=document.getElementById&&!document.all var previous='' var eventobj //Regular expression to highlight only form elements var intended=/INPUT|TEXTAREA|SELECT|OPTION/ //Function to check whether element clicked is form element function checkel(which){ if (which.style&&intended.test(which.tagName)){ if (ns6&&eventobj.nodeType==3) eventobj=eventobj.parentNode.parentNode return true } else return false } //Function to highlight form element function highlight(e){ eventobj=ns6? e.target : event.srcElement

if (previous!=''){ if (checkel(previous)) previous.style.backgroundColor='' previous=eventobj if (checkel(eventobj)) eventobj.style.backgroundColor=highlightcolor } else{ if (checkel(eventobj)) eventobj.style.backgroundColor=highlightcolor previous=eventobj } } 3.Simpan dengan nama file flash format js di local C (data C) di WAMP,pilih WWW,buat folder baru untuk menyimpannya. 4.Membuat file php flashform pada Macromedia Dreamweaver 8. 5.Menulis kodenya <html> <head><title></title>

<script type="text/javascript" src="high.js"> </script> <style type="text/css"> <!-.style1 { font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 18px; color: #FF0000; } --> </style> </head> <body bgcolor="#CCCCCC"> <div align="center" class="style1">Highlight Form</div> <form onKeyUp="highlight(event)" onClick="highlight(event)"> <table width=400> <tr> <td> <b>Username:</b> </td> <td> <input type="text" > </td></tr>

<td> <b>Password:</b> </td><td> <input type="password"> </td> </tr> </table> </form> </body> </html> 6.Simpan dengan nama file highlight dan format php di local C (data C) di WAMP,pilih WWW,buat folder baru untuk menyimpannya. Hint

tutorial: 1.Membuat file JavaScript showhint pada Macromedia Dreamweaver 8. 2.Menulis kodenya : var horizontal_offset="9px" //horizontal offset of hint box from anchor link var vertical_offset="0" var ie=document.all var ns6=document.getElementById&&!document.all function getposOffset(what, offsettype){ var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop; var parentEl=what.offsetParent; while (parentEl!=null){ totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop; parentEl=parentEl.offsetParent; } return totaloffset; } function iecompattest(){ return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body } function clearbrowseredge(obj, whichedge){ var edgeoffset=(whichedge=="rightedge")? parseInt(horizontal_offset)*-1 : parseInt(vertical_offset)*-1 if (whichedge=="rightedge"){

var windowedge=ie && !window.opera? iecompattest().scrollLeft+iecompattest().clientWidth-30 : window.pageXOffset+window.innerWidth-40 dropmenuobj.contentmeasure=dropmenuobj.offsetWidth if (windowedge-dropmenuobj.x < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure+obj.offsetWidth+parseInt(horizontal_offset) } else{ var windowedge=ie && !window.opera? iecompattest().scrollTop+iecompattest().clientHeight-15 : window.pageYOffset+window.innerHeight-18 dropmenuobj.contentmeasure=dropmenuobj.offsetHeight if (windowedge-dropmenuobj.y < dropmenuobj.contentmeasure) edgeoffset=dropmenuobj.contentmeasure-obj.offsetHeight } return edgeoffset } function showhint(menucontents, obj, e, tipwidth){ if ((ie||ns6) && document.getElementById("hintbox")){ dropmenuobj=document.getElementById("hintbox") dropmenuobj.innerHTML=menucontents dropmenuobj.style.left=dropmenuobj.style.top=-500 if (tipwidth!=""){ dropmenuobj.widthobj=dropmenuobj.style dropmenuobj.widthobj.width=tipwidth } dropmenuobj.x=getposOffset(obj, "left") dropmenuobj.y=getposOffset(obj, "top") dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge(obj, "rightedge")+obj.offsetWidth+"px" dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge(obj, "bottomedge")+"px" dropmenuobj.style.visibility="visible" obj.onmouseout=hidetip } } function hidetip(e){ dropmenuobj.style.visibility="hidden" dropmenuobj.style.left="-500px" } function createhintbox(){ var divblock=document.createElement("div") divblock.setAttribute("id", "hintbox") document.body.appendChild(divblock)

} if (window.addEventListener) window.addEventListener("load", createhintbox, false) else if (window.attachEvent) window.attachEvent("onload", createhintbox) else if (document.getElementById) window.onload=createhintbox 3.Simpan dengan nama file showhint format js di local C (data C) di WAMP,pilih WWW,buat folder baru untuk menyimpannya. 4.Membuat file php hint pada Macromedia Dreamweaver 8. 5.Menulis kodenya <html> <head><title></title> <style type="text/css"> #hintbox{ /*CSS for pop up hint box */ position:absolute; top :0; background-color: lightyellow; width: 150px; /*Default width of hint.*/ padding: 3px; border:1px solid black; font:normal 11px verdana; line-height:18px; z-index:100; border-right: 3px solid black; border-bottom: 3px solid black; visibility: hidden; } .hintanchor{ /*Css for link that shows hint onmouseover*/ font-weight: bold; color: navy; margin: 3px 8px; } .style2 {color: #FF0000} </style> <script type="text/javascript" src="showhint.js"></script> </head> <body bgcolor="#CCCCCC"> <h3 align="center" class="style2">Show Hint </h3> <form> <table width=400>

<tr> <td> <b>Username:</b> </td> <td> <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Please choos e a username. Should consist of alphanumeric characters only.', this, event, '150px')">[?]</a> </td></tr> <td> <b>Password:</b> </td><td> <input type="text" class="test" /> <a href="#" class="hintanchor" onMouseover="showhint('Enter the desired password. <b>Must</b> be 8 characters or langer.', this, event, '200px')">[?]</a> </td> </tr> </form> </body> </html> 6.Simpan dengan nama file hint dan format php di local C (data C) di WAMP,pilih WWW,buat folder baru untuk menyimpannya. Rollover Image

tutorial : 1.Membuat button pada adobe photoshop 7.0 dengan format "jpg" dengan dua nama file yang berbeda.contoh yani1.jpg dan yani.jpg. 2.Buka Macromedia Dreamweaver MX,pilih file,pilih new,pilih Dinamic page,pilih PHP dan create. 3. Klik Design untuk menampilkan gambar yang telah dibuat. 4. Klik Insert,pilih Images Object ,pilih Rollover Image. 5. Simpan dengan nama rollover dan format PHP di local C (data C) di WAMP,pilih WWW,buat folder baru untuk menyimpannya. 6. JIka ingin melihat hasilnya,aktfkan wampserver dan broswser pada localhost.

Example

tutorial : <html>

<head><title>Auto Selects</title> <script language="javascript" src="chainedselects.js"></script> <script language="javascript" src="exampleconfig.js"></script> </head> <body onload="initListGroup('vehicles', document.forms[0].make,document.forms[0].type, document.forms[0].model)"> <center><h2>Contoh Form Kendaraan</h2></center> <table align="center" cellpadding="0" cellspacing="0" border="0" width="90%"><tr><td> <form> <table align="center"><tr> <td>Pilih Kendaraan:&nbsp;</td> <td><select name="make"></selcet></td> <td><select name="type"></selcet></td> <td><select name="model"></selcet></td> </tr> </table> </form> </body> </html>

Form validasi

tutorial : <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script language="javascript"> function validasi() { if (document.test.nama.value=='') {alert('Nama Tidak Boleh Kosong'); return false;} if (document.test.alamat.value=='') {alert('Alamat Tidak Boleh Kosong'); return false;}

if (document.test.telf.value=='') {alert('Telepon Tidak Boleh Kosong'); return false;} if (document.test.mail.value=='') {alert('E-mail Tidak Boleh Kosong'); return false;} } </script> </head> <body> <center> <form name="test" method="post" onSubmit="return validasi()";> <table border="1" width="300"> <tr> <td>Nama</td><td><input type="text" name="nama"</td> </tr> <tr> <td>Alamat</td><td><input type="text" name="alamat"</td> </tr> <tr> <td>Telepon</td><td><input type="text" name="telf"</td> </tr> <tr> <td>E-mail</td><td><input type="text" name="mail"</td> </tr> <tr> <td>&nbsp;</td><td><input type="submit" value="kirim"</td> </tr> </table> </form> </center> </body> </html>

Anda mungkin juga menyukai