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 9 of 9
  1. #1
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    HTML Buttons help please

    Hello I am fairly new at this and seem to be stuck on custom buttons.

    This is what I want. I have made a number of text png.s in X-3D. I want to use these as buttons. No border, invis. background. And use these as buttons that link to various information within my site. I believe I understand how to link them, but that is not my issue.

    What I am looking for is these buttons visually doing what one would expect any button to do.

    I have 3 images for each button.

    Basic view image
    Mouse over image
    Click image

    How do I make these work? I have looked everywhere for information on this and have come up dry. Keep in mind that I am VERY green with HTML. Any soul kind enough to try and help would pretty much have to spell it out line for line. I'm sorry

    I thank the person willing to lend a hand.

    DJ

  • #2
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Use the CSS :link, :hover and :active pseudoclasses. Alternatively, you can use JavaScript onmouseover, onmouseout and onmousedown events, but the first option is cleaner and works in every browser which supports CSS.

  • #3
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Ok one thing more

    I think I understand the properties now.

    a:link
    {
    background-color: red;
    color: white;
    font-family: Arial;
    font-size: .8em;
    }
    a:visited
    {
    background-color: red;
    color: white;
    font-family: Arial;
    font-size: .8em;
    }
    a:hover
    {
    background-color: cyan;
    color: blue;
    font-family: Arial;
    font-size: .8em;
    }

    This would be a basic use. Since I am not going to be working with typed text, backgroud colors or fonts but a alternative images for each psudo where would I place that? Can you show me by perhaps tossing in a mock of what it would look like.

    a:hover
    {
    background-color: clear;
    "source image code here"
    image-size: .8em;
    }

    Im a pain. I hate having to bother people.

  • #4
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Ok one thing more

    I think I understand the properties now.

    a:link
    {
    background-color: red;
    color: white;
    font-family: Arial;
    font-size: .8em;
    }
    a:visited
    {
    background-color: red;
    color: white;
    font-family: Arial;
    font-size: .8em;
    }
    a:hover
    {
    background-color: cyan;
    color: blue;
    font-family: Arial;
    font-size: .8em;
    }

    This would be a basic use. Since I am not going to be working with typed text, backgroud colors or fonts but alternative png images for each psudo where would I place that information? Can you show me by perhaps tossing in a mock of what it would look like.

    a:hover
    {
    background-color: clear;
    "source image code here"
    image-size: .8em;
    }

    Im a pain. I hate having to bother people.

  • #5
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,861
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Are you looking for the background-image property?
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #6
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    I'll do an example (:
    Code:
    
    <!doctype html>
    <html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <title>Buttons</title>
        <meta http-equiv="Content-Type"
          content="application/xml; charset=utf-8"/>
        <meta http-equiv="X-UA-Compatible"
          content="ie=7"/>
        <style type="text/css">
    * {
      margin: 0;
      padding: 0;
      border: 0;
      color: #000;
      background: transparent;
      text-decoration: none;
    }
    html {
      font: .8125em/1.8 'lucida grande', 'lucida sans unicode', sans-serif;
    }
    body {
      background: #fff;
      padding: 1em;
    }
    a.button {
      padding: .35em .5em;
    }
    .home {
      background: #39f;
    }
    a.home:hover {
      background: #06c;
    }
    a.home:active {
      background: #306;
      color: #fff;
    }
    .about {
      background: #f60;
    }
    a.about:hover {
      background: #c00;
    }
    a.about:active {
      background: #600;
      color: #fff;
    }
        </style>
      </head>
      <body>
        <a href="http://example.com/" class="button home">Example Homepage</a>
        <a href="http://example.org/" class="button about">Example About Page</a>
      </body>
    </html>
    
    Save that as a HTML file. Is it kind of what you want (except for colors, there'd be images?) Have a look at the source to see how it's done.

  • Users who have thanked Apostropartheid for this post:

    Nataliah (06-16-2009)

  • #7
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Big thanks...Take a peek. I want your Op.

    That's awsome Cyan. Thanks a bunch! I'm sorry for having been such a pest but going it alone when all you have had leaning wise is basic can be a hard step.

    I'm a graphic artist. I'm also a MMORPG'er. When the best game I have ever seen reared it's head I had to not only take part but use my many years of raid guild/legion leadership as well. I formed a guild and decided that when you had one of those, you also needed a place for those members to go. Like I said, I had practicly no webpage experience and knew it would be rought. It's people like you who take the time that help's people who would be stunted by their limits to be able to join fully into our technical world. Thank you much. I intend to stay here and help other members as I can and suggest this site to others who may be of more help then I as I meet them.

    If you or anyone else here is interested in peeking at my project and lending any advice I would love the extra eyes! I really want something that feels more a work of art and a world in it's self then a simple webpage, and will take any advice anyone is willing to give...That includes negitive feedback.

    Here is the information:

    The game in question - www.aionsourse.com
    My Legion/Guild website (under construction but navagatable)
    www.crimson-tide.org

    Thank you all again! I look forward to learning more!

  • #8
    New to the CF scene
    Join Date
    Jun 2009
    Posts
    5
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Cyan

    If you would find a place to sticky this message I would like to help others in the field I know. Graphics.

    If anyone is looking for anything graphical, computer or otherwise, and I mean literaly anything. Please feel free to contact me (eq2nataliah@gmail.com) with your graphical requests or questions.

    My main fields of experience are: PS latest ed (Prof. User), X-3D, Fireworks, Dreamweaver. I do computer generated art but most of what I do is hand drawn then later computer inhanced and colored.

    Thank you and best wishes

  • #9
    The Apostate Apostropartheid's Avatar
    Join Date
    Oct 2007
    Posts
    3,215
    Thanks
    16
    Thanked 265 Times in 263 Posts
    Nataliah,
    Whilst I understand that you may be looking for work, a thread where you're requesting help probably isn't the best place for it =P We have a dedicated forum in the marketplace for advertisements.


  •  

    Posting Permissions

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