...

View Full Version : 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
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
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
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:

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

CSS:


#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.

<!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
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
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
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.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum