Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts

    will this html display a button with images?

    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

  • #2
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Repatilian View Post
    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.
    Attached Images Attached Images    

  • #3
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Repatilian View Post
    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>

  • #4
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Repatilian View Post
    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

  • #5
    New Coder
    Join Date
    Jun 2010
    Location
    The Netherlands
    Posts
    53
    Thanks
    0
    Thanked 6 Times in 6 Posts
    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)
    Last edited by Candan; 07-22-2010 at 05:11 AM.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    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>
    ||||If you are getting paid to do a job, don't ask for help on it!||||

  • Users who have thanked _Aerospace_Eng_ for this post:

    Repatilian (07-22-2010)

  • #7
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    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.

  • #8
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Repatilian View Post
    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.

  • #9
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Repatilian View Post
    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

  • #10
    Regular Coder
    Join Date
    Jul 2010
    Location
    Arizona
    Posts
    111
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Repatilian View Post
    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?

  • #11
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Yes just edit a.about or even better put all of your links in an unordered or ordered list and style the list.
    ||||If you are getting paid to do a job, don't ask for help on it!||||


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •