Advanced Web Development
 
Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
 
User Name:
Password:
Remember me
 
Go Back   Dev Articles Community Forums > Web Design > Advanced Web Development
Reload this Page

How Do I Make A Button

Discuss How Do I Make A Button in the Advanced Web Development forum on Dev Articles.
How Do I Make A Button Advanced Web development forum discussing table-less design, CSS, accessibility, XHTML, and anything relating to web standards. Design better, more standard-compliant websites.

Reply
Add This Thread To:
  Del.icio.us   Digg   Google   Spurl   Blink   Furl   Simpy   Y! MyWeb 
« Previous Thread | Next Thread »  
Thread Tools Search this Thread Display Modes
 
Unread Dev Articles Community Forums Sponsor:
Ajax Application Generator Generate database and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!
  #1  
Old May 31st, 2004, 03:11 PM
Dark Designer Dark Designer is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: May 2004
Posts: 2 Dark Designer User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
How Do I Make A Button
I want to know how to make a button using javascript for my website you know like the start button only i want it to have these features I want it to be like a push down button like when you click on it it looks like you pressed it I want it to be the color 225577 if the size can be changed I would like it to be height="30" width="80". Anyways I don't want a tutorial on java I just want the coding for the button
Reply With Quote
  #2  
Old May 31st, 2004, 03:17 PM
edwinbrains's Avatar
edwinbrains edwinbrains is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2004
Location: UK
Posts: 160 edwinbrains User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 9 h 5 m 50 sec
Reputation Power: 5
You need to create the image of a button in an image editing application. Once you've done this, create another image, similar but slightly differnet (the mouseover image). Then, you'll need code like this to swap the image over when you mouseover:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="JavaScript" 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];}
}
//-->
</script>
</head>

<body onLoad="MM_preloadImages('on.jpg')">
<a href="http://www.google.com" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('myimage','','on.jpg',1)"><img src="off.jpg" alt="Alt Text" name="myimage" width="98" height="36" border="0"></a>
</body>
</html>
Reply With Quote
  #3  
Old May 31st, 2004, 03:20 PM
Dark Designer Dark Designer is offline
Registered User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: May 2004
Posts: 2 Dark Designer User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: < 1 sec
Reputation Power: 0
Sounds like im gonna be working in photo shop all day again yaeeee.
Reply With Quote
  #4  
Old May 31st, 2004, 07:17 PM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
  
Join Date: Aug 2002
Location: Sydney, AU
Posts: 2,058 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 6 m 11 sec
Reputation Power: 8
Send a message via ICQ to stumpy Send a message via MSN to stumpy
CSS?!
Code:
<style type="text/css">
.button {
  background-color : #257;
  border : 2px outset #257;
  width : 30px;
  height : 30px;
}
</style>
<form>
<input type="button" id="button" class="button">
</form>
__________________
DevArticles Moderator
BlueSix - Web Development and Consulting
Reply With Quote
  #5  
Old June 1st, 2004, 12:31 AM
edwinbrains's Avatar
edwinbrains edwinbrains is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2004
Location: UK
Posts: 160 edwinbrains User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 9 h 5 m 50 sec
Reputation Power: 5
I thought he wanted something more advanced than just a standard button:

Quote:
Originally Posted by Dark Designer
...like the start button...
Reply With Quote
  #6  
Old June 1st, 2004, 12:50 AM
stumpy's Avatar
stumpy stumpy is offline
May contain nuts.
Dev Articles Regular (2000 - 2499 posts)
  
Join Date: Aug 2002
Location: Sydney, AU
Posts: 2,058 stumpy User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 5 h 6 m 11 sec
Reputation Power: 8
Send a message via ICQ to stumpy Send a message via MSN to stumpy
yeah - it wasn't clear... u can still use form items, and style using CSS... if that is required. I forgot to mention, most importantly, that you can do away with all the JS rollover code these days, as CSS can handle most hover/focus/visited/etc stuff (cept for f**king IE on non-hyperlinked items)
Code:
<input type="image" class="imageButton">
<style type="text/css">
.imageButton {
  background-image: (pic.jpg);
  /* other attributes here */
}
.imageButton:hover {
  /* hover state here */
}
</style>
Reply With Quote
  #7  
Old June 1st, 2004, 12:53 AM
edwinbrains's Avatar
edwinbrains edwinbrains is offline
Contributing User
Dev Articles Newbie (0 - 499 posts)
  
Join Date: Mar 2004
Location: UK
Posts: 160 edwinbrains User rank is Just a Lowly Private (1 - 20 Reputation Level) 
Time spent in forums: 9 h 5 m 50 sec
Reputation Power: 5
yeah, I'll agree. That CSS is neater than my javascript
Reply With Quote
Reply

Viewing: Dev Articles Community Forums > Web Design > Advanced Web Development > How Do I Make A Button

« Previous Thread | Next Thread »

Thread Tools  Search this Thread 
Search this Thread:

Advanced Search
Display Modes  Rate This Thread 
Linear Mode Linear Mode
Rate This Thread:


Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
vB code is On
Smilies are On
[IMG] code is On
HTML code is Off
View Your Warnings | New Posts | Latest News | Latest Threads | Shoutbox
Forum Jump


Forums: » Register « |  User CP |  Games |  Calendar |  Members |  FAQs |  Sitemap |  Support | 
  
 





© 2003-2008 by Developer Shed. All rights reserved. DS Cluster 5 hosted by Hostway.