Adding properties to a button

i want to have a clickable button, but id like it to look nice, like a button thats been made in photoshop or something, i can prolly get someone to make the image but what would be the code needed?

thanks

 

The basic code would be the img tag with an onclidk attribute, although some browsers like you to use the a tag, like this:

Code:

<a href=...><img src=picture.gif></a>

If you want the button to go to another page, this is the probably the way to go, except that it will put a highlight around the image. To avoid that, use this code:

Code:

<a href=...><img src=picture.gif border="0"></a>

If you have an OK and a Cancel button, you could allow the border around the recommended button. If you use a larger number for the border, such as 10, it will make a wider border around the picture.

 

Sorry about the typo in the last message. I tried to edit, but didn't work. I meant onclick, not onclidk attribute:

Code:

<img src="picture.gif" onclick="location.href='page.htm'">

 

sadly it did not work, what i was looking for is, is when someone clicks it, it is like a normal button and u see it mashed in, here is what i have so far

would it need to have 2 images for that?

 

Yes, you will need a regular image, and an image for the "mashed in" look. You can also have a third image for just hovering the mouse over it. To do that, you need to name the image, which is basically just giving it a name attribute like: name="imgname". The ID attribute is preferred in modern browsers, but name works better for me. Then, use the following properties in either the a or img tag: onclick (for when someone clicks it), onmouseover (for when the mouse hovers over it), onmouseout (normal).
Each will take the following format:
property="document.imgname.src='picture.gif'"
If you use the ID attribute, you may have to use this code instead:
property="document.getElementById('imgname').src='picture.gif'"
The onclick attribute would include the extra code to do when it is clicked (unless you are using the a element to jump to another page.)
So, here is example code: (Will display picture.gif when mouse is off the image, onpicture.gif when mouse is on the image, mashedpicture.gif when clicked, and will also go to url.htm when clicked)

Code:

Using A tag and name attribute (I often use this way, though not as modern.):
<a href="url.htm"
onclick="document.mybutton.src='mashedpicture.gif'"
onmouseover="document.mybutton.src='onpicture.gif'"
onmouseout="document.mybutton.src='picture.gif'"
><img src=picture.gif name=mybutton border=0></a>


Using id attribute with only img tag:
<img id=theimg src=picture.gif border=0
onmouseout="document.getElementById('theimg').src='picture.gif'"
onmouseover="document.getElementById('theimg').src='onpicture.gif'"
onclick="document.getElementById('theimg').src='mashedpicture.gif';location.href='url.htm'"
>

 

this is the code i used

Code:

<a href="http://www.wickedgifs.com/upgrade.html" target="_blank"
onclick="document.mybutton.src='./images/green_button_click.jpg'"
onmouseover="document.mybutton.src='./images/green_button_hover.jpg'"
onmouseout="document.mybutton.src='./images/green_button.jpg'"
><img src=./images/green_button.jpg name=mybutton border=0></a>

the button shows up but mouse over it and it starts acting crazy, click it and u dont get the mashed button, everything is named right so im lost

 

It will go crazy if the images are different sizes. You can avoid that by using the width and height attributes of the img tag, or make the normal image smaller. If the mouseover image is smaller, it will alternatively flash the normal one and the mouseover one unless you have the mouse in the top left corner of the button.

If the images are large, it may also help to preload them (using javascript) so that they are already loaded when the mouse moves over the button:

Code:

<script language="JavaScript" type="text/javascript"><!--
i=new Image();i.src='./images/green_button_click.jpg';
j=new Image();j.src='./images/green_button_hover.jpg';
//--></script>

You don't need to preload the main image because the browser will already load it right away.

 

all images are the same size, can u fivw rgw wbruew hv xode?

thnka

 

nevermind it was cuz i was using zoon text

its fine

 

wow, buttons are so easy in Turing (the only language I know, unfortunately :cry).

 

Turing is a pretty good language. It's a bit like VB. I don't think browsers can understand it, though, so it can't be used for web developement without at least a library or something to generate the code for the browser. HTML wasn't designed for easy dynamic image buttons, like these. DHTML adds this on.

 

Re: 2

It works for me, and I think Keyser got it working.

 

uhh .why not just use css sliding windows?
soooo much easier:
http://www.komodomedia.com/blog/2008/09/css-sliding-sprite-windows/

 

Good suggestion, Kodo! I don't use them because they tend to mess up the data in older browsers. I do like the method you gave, but you need to map the heights of the pictures in the span's CSS code. I would rather change a url than resize a map, because enlarging a picture other than the last one more than allotted would mean moving at least one picture farther down, requiring more code editing. There is the advantage of preloading images, which the way I gave requires more code, and a second copy of the url to do, but it can be merged into the code to require only one url edit:

Code:

<a href="url.htm"
onclick="document.mybutton.src=button.click.src"
onmouseover="document.mybutton.src=button.hover.src"
onmouseout="document.mybutton.src=button.default.src"
><img src=green_button.gif name=mybutton border=0></a><script language="JavaScript" type="text/javascript"><!--
button=new Object;
button.default=new Image();button.default.src=document.mybutton.src;
button.hover=new Image();button.hover.src='./images/green_button_hover.gif';
button.click=new Image();button.click.src='./images/green_button_click.gif';
//--></script>

In this way, you can keep the code in close proximity (the way I like it) rather than part here and part in the head. I do think that CSS is great, and those sprites are great, especially for a button you don't plan to resize larger. This is just a matter of preference, I guess. If you don't want to use JavaScript, your way is, of course, better. If sprites are better in other ways that I haven't thought of, please say so.

 

.button{
height:20px;
width:150px;
}

<div class="button></div>

really? that's way less code and if you need to resize it for some reason, and since you like javascript, use it to adjust the style on the div dynamically.

 

I think you could use the CSS background property to set a single background picture for each state just like you could set an img tag's src attribute using JavaScript. You wouldn't need to set up positions for the different images, as in a sliding element, just change the background image. You would just need to resize the link to the same dimensions as the picture. You also would still need to preload the images for best performance, but a separate hidden element (with {display: none}) may work for this? This would be the closest equivalent to my JavaScript method that I have thought of, unless there is CSS to set an img element's url. You wouldn't need to make a special image; you could just use premade button images. As a bonus, I think other properties like background-attachment, style or tiling could give these buttons special effects. (These can all be set in the same background property.) Older browsers still wouldn't recognize the CSS and display hidden stuff. Not all browsers know or use JavaScript, either, but it would just keep the button from changing the picture, instead of messing up the page. To avoid messing up the page, JavaScript could be used for preloading, and a transparent image with an alt attribute for the button could be in the button element.

To Kodo:
I wasn't really talking about resizing the button element itself. I meant mapping an image to a position in the sliding element (canvas) image, to reference it in a top property assignment for each state. Although, I guess if enough space were allowed between the images, they could expand without changing the code. Since most buttons don't get that big, this is workable. This canvas method is used for icons of a certain size for many applications in which resizing isn't an option. I like keeping my pages as dynamic-friendly as I can, because I find it easier to update later, and it can make possible some unusual effects.

 

Correction: When I said transparent image in my last post, I meant using style="visibility:hidden" or "display:none" in the img tag.

Here is an example of my version of the css way without preloading:

Code:

<html><head><title>CSS button</title>
<style><!--
#button0{
display:block;
position:relative;
overflow: hidden;
}
#button0{
width:100px;
height:120px;
background: url(button.gif) 0 0 no-repeat;
}
#button0:hover{
width:100px;
height:120px;
background: url(hover_button.gif) 0 0 no-repeat;
}
#button0:active,#button0:focus{
width:100px;
height:120px;
background: url(click_button.gif) 0 0 no-repeat;
}
#mybutton0{visibility:hidden;}
--></style>
</head><body>
<a href=# id=button0><img src=button.gif alt="Click me!" id=mybutton0></a>
</body></html>

And here's an example of a hybrid that preloads if JavaScript is enabled:

Code:

<html><head><title></title>
<noscript>
<style><!--
#button0{display:block;position:relative;overflow:hidden;}
#button0{width:100px;height:120px;background:url(button.gif) 0 0 no-repeat;}
#button0:hover{
width:100px;height:120px;background: url(hover_button.gif) 0 0 no-repeat;
}
#button0:active,#button0:focus{
width:100px;height:120px;background: url(click_button.gif) 0 0 no-repeat;
}
#mybutton0{display:none;}
--></style>
</noscript>
</head><body>
<a href=# id=button0
onclick="document.mybutton.src=button.click.src"
onmouseover="document.mybutton.src=button.hover.src"
onmouseout="document.mybutton.src=button.default.src"
><img src=button.gif name=mybutton border=0 id=mybutton0></a><script language="JavaScript" type="text/javascript"><!--
button=new Object;
button.default=new Image();button.default.src=document.mybutton.src;
button.hover=new Image();button.hover.src='hover_button.gif';
button.click=new Image();button.click.src='click_button.gif';
//--></script>
</body></html>

This uses JavaScript by default.
If JavaScript is not enabled, it uses CSS.
If CSS doesn't work, it displays the main button image.
If it can't show the main image, it shows the ALT text.

You need to type each image url twice. If you added a CSS preloader, you would need to type each 3 times. You could tweak it to use CSS by default, by removing the noscript tags. If it's not too complicated, you could have JavaScript check to see if CSS is working (although it generally wouldn't hurt much to have JavaScript still working on the hidden element.)

 

I err on the side of not using javascript. CSS is always on

Besides, if you if you go with sliding doors/windows then the css is ~75% of what you posted.

one class (mulitple state refs) to define the size and background image and 2 others to define the position of the background. No need to make 3 calls to 3 sep images thus reducing the load time for requests.

Guess it's preference.

 

Yes, for myself I will probably use combinations of all these and change them to get more features.

For someone who doesn't mind making the image (or using one already made) and mapping it, won't resize it in the future, (or doesn't mind the necessary changes,) and doesn't care about supporting archaic browsers, I would surely recommend the sliding CSS. There are clear advantages in this case.

Otherwise, if they already have separate images and don't want to merge them together and map, I would recommend the first code of my previous post (CSS only) or the purely JavaScript way depending on which they are more experienced with.

And I think I would recommend the hybrid approach of my previous post to give as many visitors as possible as much of the functionality as possible, if that is wanted. (Although, I forgot to include ALT text in the hybrid example, which should be added to the IMG tag for browsers that can't display or can't find the picture.)