Skip to main content

Posts

Onclick zoom In-zoom Out code in javascript

<html> <head> <style> #thediv {     margin:0 auto; height:400px; width:400px; overflow:hidden; } img {     position: relative;     left: 50%;     top: 50%; } </style> </head> <body> <input type="button" value ="-" onclick="zoom(0.9)"/> <input type="button" value ="+" onclick="zoom(1.1)"/> <div id="thediv"> <img id="pic" src="http://upload.wikimedia.org/wikipedia/commons/d/de/Nokota_Horses_cropped.jpg"/> </div> <script> window.onload = function(){zoom(1)} function zoom(zm) { img=document.getElementById("pic") wid=img.width ht=img.height img.style.width=(wid*zm)+"px" img.style.height=(ht*zm)+"px"     img.style.marginLeft = -(img.width/2) + "px";     img.style.marginTop = -(img.height/2) + "px"; } </script> </body> </html...
Post a Comment
Read more

simple slideshow code in javascript

<script type="text/javascript"> var i = 0; var image = new Array();   // LIST OF IMAGES image[0] = "php_img.png"; image[1] = "domain.jpg"; image[2] = "1.png";   image[3]="2.jpg"; var k = image.length-1;   var caption = new Array(); // LIST OF CAPTİONS caption[0] = "Caption for the first image"; caption[1] = "Caption for the second image"; caption[2] = "Caption for the third image";   function swapImage(){ var el = document.getElementById("mydiv"); el.innerHTML=caption[i]; var img= document.getElementById("slide"); img.src= image[i]; if(i < k ) { i++;} else  { i = 0; } setTimeout("swapImage()",5000); } function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = function() { if (oldonload) { oldonload(); } func();}}} addLoadEvent(functi...
Post a Comment
Read more

how to prepare layout in html example

(1)write code for  index.html file: <html> <head> <link rel="stylesheet"   type="text/css"  href="style.css"> </head> <body> <div class=header> </div> <div class=container> <div class=section> </div> <div class=article> </div> <div class=aside> </div> </div> <div class=footer> </div> </body> </html> (2 )style.css    file code : .header { height:200px; width:800px; background-color:purple; } .container { float:left; height:500px; width:800px; background-color:yellow; } .section { float:left; height:250px; width:400px; background-color:orange; } .article { float:left; height:250px; width:400px; background-color:lightgreen; clear:left; } .aside { position:relative; float:right; height:500px; width:400px; margin-top:-250px; background-color:blue; } .footer { float:left; h...
1 comment
Read more