will this html display a button with images?

Repatilian · 07-21-2010, 08:26 AM

Hey i have this html for my website. I just used button.gif, buttonover.gif, etc. for examples. I want to make a button with images that when gone over with mouse and different image displays and when clicked another image.

<a href="http//www.mysite.html"><img ="button.gif" onclick="buttonover.gif" onmouseover="buttonclick.gif" height="36" width="100"></a>

thanks

Repatilian · 07-22-2010, 03:39 AM

Quote:

Originally Posted by Repatilian

Hey i have this html for my website. I just used button.gif, buttonover.gif, etc. for examples. I want to make a button with images that when gone over with mouse and different image displays and when clicked another image.

<a href="http//www.mysite.html"><img ="button.gif" onclick="buttonover.gif" onmouseover="buttonclick.gif" height="36" width="100"></a>

thanks

i made a mistake on the onclick="buttonover.gif" part. I meant to say onclick="buttonclick.gif". That's for the onmouseover too. Basically i have three images of the same button just different shades. I can make them anything and i can make them all the same size and interlaced and transparent. I need to get it to work in most browsers if possible. I need it in explorer. I also have photoshop elements 2.0. I just want a button i'll attach the images.

Repatilian · 07-22-2010, 04:32 AM

Quote:

Originally Posted by Repatilian

i made a mistake on the onclick="buttonover.gif" part. I meant to say onclick="buttonclick.gif". That's for the onmouseover too. Basically i have three images of the same button just different shades. I can make them anything and i can make them all the same size and interlaced and transparent. I need to get it to work in most browsers if possible. I need it in explorer. I also have photoshop elements 2.0. I just want a button i'll attach the images.

would this work?
<a href="http//www.example.htm"><img src="button99.png" onmouseover="overbutton.png" onclick="clickbutton.png"></a>

Repatilian · 07-22-2010, 04:32 AM

Quote:

Originally Posted by Repatilian

would this work?
<a href="http//www.example.htm"><img src="button99.png" onmouseover="overbutton.png" onclick="clickbutton.png"></a>

i tried to use .png's
didn't work

Candan · 07-22-2010, 05:06 AM

Your best bet would be with CSS.

HTML:

Code:

<a href="http://google.com" id="google_link"></a>

CSS:

Code:

#google_link{
width:100px;
height:36px;
background:url('images/button.gif');
display:block;
}

#google_link:hover{
background:url('images/button_hover.gif');
}

I'd say go with GIF's if you're going to add transparency, because not all browsers support PNG's transparency (IE6 and such)

_Aerospace_Eng_ · 07-22-2010, 05:11 AM

Wow. Okay you are doing this all wrong. First off you don't need javascript. If you were going to use javascript you aren't doing it right. You need to use this.src however I don't recommend javascript for this.

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
a.about { /* repeat the following giving each link a different class or id and changing the width and height */
	height:34px;
	background:url(button9943.gif) center;
	width:100px;
	display:block;
	outline:0;
	text-indent:-999em; /* use this to hide the text but make it show when using a screen reader */
}
a.about:hover {
	background:url(button99233over.gif) center;
}
a.about:active, a.about:focus {
	background:url(button99233push.gif) center;
}
</style>
</head>

<body>
<a href="http//www.mysite.html" class="about">About</a>
</body>
</html>

Repatilian · 07-22-2010, 06:03 AM

ok it worked almost when the mouse whent over the image it went to just a white area where the image was. Then when clicked it worked good. The link worked. I guess the only question i can think of would be should i of saved the image in corel draw as a style? I'm sure this will work though.

Repatilian · 07-22-2010, 06:10 AM

Quote:

Originally Posted by Repatilian

ok it worked almost when the mouse whent over the image it went to just a white area where the image was. Then when clicked it worked good. The link worked. I guess the only question i can think of would be should i of saved the image in corel draw as a style? I'm sure this will work though.

ok i got it to work the pixels where 36x100. one question though is there a way to get the image to reset to the first image, the one i have as button9943.gif, when someone navigates back to the page that the link originated from while they're visiting my site? Thank you. It works good. I really appreciate it.

Repatilian · 07-22-2010, 06:15 AM

Quote:

Originally Posted by Repatilian

ok i got it to work the pixels where 36x100. one question though is there a way to get the image to reset to the first image, the one i have as button9943.gif, when someone navigates back to the page that the link originated from while they're visiting my site? Thank you. It works good. I really appreciate it.

nevermind it works perfectly thank you

Repatilian · 07-22-2010, 08:22 AM

Quote:

Originally Posted by Repatilian

ok i got it to work the pixels where 36x100. one question though is there a way to get the image to reset to the first image, the one i have as button9943.gif, when someone navigates back to the page that the link originated from while they're visiting my site? Thank you. It works good. I really appreciate it.

ok my only other question is can i position that anywhere on the screen?

_Aerospace_Eng_ · 07-22-2010, 03:38 PM

Yes just edit a.about or even better put all of your links in an unordered or ordered list and style the list.