View Full Version : How to make Slide Button

11-03-2010, 11:54 PM
Hello all.
I'm going to create my Online Apple Store.

I have created a small intro page with some information.
To aproove my terms and enter my site visitors need slide my button.
How to do this?

I have created that button but I can't make that he will run.

Please look at my web page.


Here is my code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Apple Bay</title>
<style type="text/css">
body {
background-image: url(BG/AppleEnterHome2.JPG);
background-repeat: no-repeat;
background-position: center top;
width: 1280px;
margin-top: 0px;
margin-right: auto;
margin-bottom: 0px;
margin-left: auto;
background-color: #000;
background-attachment: scroll;
height: 800px;
#text2 {
width: 400px;
margin-top: 240px;
margin-left: 440px;
padding-left: 20px;
color: #FFF;
font-size: 35px;
font-weight: 900;
font-family: "Myriad Apple";
text-align: center;
#text1 {
width: 230px;
margin-top: 20px;
font-weight: bold;
margin-left: 1000px;
#text1 strong {
font-family: "Myriad Apple";
font-size: 30px;
color: #FFF;
font-weight: 900;
<script type="text/javascript">
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

<body onload="MM_preloadImages('BG/demo2.PNG')">
<div id="text1"><a href="demo.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','BG/demo2.PNG',1)"><img src="BG/demo.PNG" name="Image2" width="253" height="91" border="0" id="Image2" /></a></div>
<div id="text2">Soon there will be electronical Apple Store... Which offers same products as your local Apple Shop. We do our best to satisfy you. Cheap prices, fast service, high quality is our trademark.</div><embed src="http://www.youtube.com/v/O1BlakAsa4Q;feature=related&amp;hl=en&amp;fs=1&amp;rel=0&amp;autop lay=1&amp;loop= true" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="false" width="1" height="1">

Thanks for all comments.

11-04-2010, 09:33 PM
You can do this with jQuery. Check out some tutorials. This would just be a simple slide animation.