<script type="text/javascript"> var imageclock=new Object() //Enter path to clock digit images here, in order of 0-9, then "am/pm", then colon image: imageclock.digits=["c0.gif", "c1.gif", "c2.gif", "c3.gif", "c4.gif", "c5.gif", "c6.gif", "c7.gif", "c8.gif", "c9.gif", "cam.gif", "cpm.gif", "colon.gif"] imageclock.instances=0 var preloadimages=[] for (var i=0; i<imageclock.digits.length; i++){ //preload images preloadimages[i]=new Image() preloadimages[i].src=imageclock.digits[i] } imageclock.imageHTML=function(timestring){ //return timestring (ie: 1:56:38) into string of images instead var sections=timestring.split(":") if (sections[0]=="0") //If hour field is 0 (aka 12 AM) sections[0]="12" else if (sections[0]>=13) sections[0]=sections[0]-12+"" for (var i=0; i<sections.length; i++){ if (sections[i].length==1) sections[i]='<img src="'+imageclock.digits[0]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i])]+'" />' else sections[i]='<img src="'+imageclock.digits[parseInt(sections[i].charAt(0))]+'" />'+'<img src="'+imageclock.digits[parseInt(sections[i].charAt(1))]+'" />' } return sections[0]+'<img src="'+imageclock.digits[12]+'" />'+sections[1]+'<img src="'+imageclock.digits[12]+'" />'+sections[2] } imageclock.display=function(){ var clockinstance=this this.spanid="clockspan"+(imageclock.instances++) dcidcidocument.write('<span id="'+this.spanid+'"></span>') this.update() setInterval(function(){clockinstance.update()}, 1000) } imageclock.display.prototype.update=function(){ var dateobj=new Date() var currenttime=dateobj.getHours()+":"+dateobj.getMinutes()+":"+dateobj.getSeconds() //create time string var currenttimeHTML=imageclock.imageHTML(currenttime)+'<img src="'+((dateobj.getHours()>=12)? imageclock.digits[11] : imageclock.digits[10])+'" />' dcidcidocument.getElementById(this.spanid).innerHTML=currenttimeHTML } </script>
<script type="text/javascript"> new imageclock.display() </script>
<BODY onLoad="alert('مرحبـــاً');"onUnload="alert('مع السلامة ')">
<style type="text/css"> .shadow{ border:1px solid silver; font:10pt arial; position:relative; display:inline; background:white; z-index:100 } .shadow_inner{ overflow:hidden; position:absolute; top: -1000px; filter:alpha(Opacity=10); /*modify to change the shade solidity/opacity, same as below*/ opacity:0.1; /*firefox 1.5 opacity*/ -moz-opacity:0.1; /*mozilla opacity*/ -khtml-opacity:0.1; /*opacity*/ z-index:10 } </style> <script type="text/javascript"> var gradientshadow={} gradientshadow.depth=6 //Depth of shadow in pixels gradientshadow.containers=[] gradientshadow.create=function(){ var a = dcidocument.all ? dcidocument.all : dcidocument.getElementsByTagName('*') for (var i = 0;i < a.length;i++) { if (a[i].className == "shadow") { for (var x=0; x<gradientshadow.depth; x++){ var newSd = dcidocument.createElement("DIV") newSd.className = "shadow_inner" newSd.id="shadow"+gradientshadow.containers.length+"_"+x //Each shadow DIV has an id of "shadowL_X" (L=index of target element, X=index of shadow (depth) if (a[i].getAttribute("rel")) newSd.style.background = a[i].getAttribute("rel") else newSd.style.background = "black" //default shadow color if none specified dcidocument.body.appendChild(newSd) } gradientshadow.containers[gradientshadow.containers.length]=a[i] } } gradientshadow.position() window.onresize=function(){ gradientshadow.position() } } gradientshadow.position=function(){ if (gradientshadow.containers.length>0){ for (var i=0; i<gradientshadow.containers.length; i++){ for (var x=0; x<gradientshadow.depth; x++){ var shadowdiv=dcidocument.getElementById("shadow"+i+"_"+x) shadowdiv.style.width = gradientshadow.containers[i].offsetWidth + "px" shadowdiv.style.height = gradientshadow.containers[i].offsetHeight + "px" shadowdiv.style.left = gradientshadow.containers[i].offsetLeft + x + "px" shadowdiv.style.top = gradientshadow.containers[i].offsetTop + x + "px" } } } } if (window.addEventListener) window.addEventListener("load", gradientshadow.create, false) else if (window.attachEvent) window.attachEvent("onload", gradientshadow.create) else if (dcidocument.getElementById) window.onload=gradientshadow.create </script>
<p class="shadow" style="display: block" rel="red">هذا مثال على الكوديستخدم هذا الكود مزيج من الcss &جافا سكربتاستمتع بتقنيات الويب 2 مع الويب العربى.</p> <img src="http://www.arabwebtalk.com/filestore/example/css/10.jpg" class="shadow" rel="blue" /> <p><a href="http://www.arabwebtalk.com" class="shadow" rel="green"> الويـــب العربى</a></p>
<style type="text/css"> /* remove the margin and bullets, set the padding for this demo only*/ .neon {margin:0 0 50px 0; padding:25px 0 100px 15px; list-style:none; background:#000; width:720px;} /* display the list items inline with a right margin to space the buttons. Use this to pre-load the hover image */ .neon li {display:inline; float:left; background:url(http://www.cssplay.co.uk/menus/neon_on.gif);} /* style the links and place the background image to start from left edge */ .neon li a {display:block; height:32px; float:left; background:url(http://www.cssplay.co.uk/menus/neon_off.gif); text-decoration:none; font-size:10px; font-family:arial, sans-serif; letter-spacing:1px; line-height:36px;} /* style the b element to posiition it to the right by 20 pixels and even out the text with 20 pixel right padding */ .neon li a b {margin:0 0 0 40px; display:inline; float:left; height:32px; background:url(neon_off.gif) right top; padding:0 40px 0 0; color:#fff;} /* style the link hover and the link hover b to replace the background image - border:0 needed for IE6 to work */ .neon li a:hover, .neon li a:hover b {border:0; background-image:url(neon_on.gif); cursor:pointer; color:#000;} .neon li a.current, .neon li a.current b, .neon li a.current:hover , .neon li a.current:hover b {background-image:url(neon_on.gif); color:#000; cursor:default;} </style>
<h3>قائمة نيون مضيئة</h3> <ul class="neon"> <li><a href="#nogo"><b>الرئيسية</b></a></li> <li><a href="#nogo"><b>حول الموقع</b></a></li> <li><a href="#nogo"><b>سجل الزوار</b></a></li> <li><a href="#nogo" class="current"><b>اتصل بنا</b></a></li> <li><a href="#nogo"><b>مواقع هامة</b></a></li> </ul>
- صحيفة الويب الإلكترونية - الأرشيف - للأعلى
صحيفة متخصصة في متابعة أخبار وجديد الإنترنت العربي والحوارات الصحفية ومعلومات تقنية متنوعة .
للتواصل مع فريق عمل الويب العربي يمكنك ذالك من خلال مركز الدعم والمساندة.
تسجيل دخول
ملاحظة
