1. Computer problem? Tech Support Guy is completely free -- paid for by advertisers and donations. Click here to join today! If you're new to Tech Support Guy, we highly recommend that you visit our Guide for New Members.

adding mouseover image to my navigation text

Discussion in 'Web Design & Development' started by inferlogic, Nov 11, 2007.

Thread Status:
Not open for further replies.
Advertisement
  1. inferlogic

    inferlogic Thread Starter

    Joined:
    Jul 22, 2004
    Messages:
    197
    Hi All I am desiging a website in dreamweaver and I have a navigation bar on the left hand side of my page. The links are just text but I want to add a small image to the left side of my text when the mouse hovers the link. i was hoping someone could tell me where I can add this in my CSS page and what i would do on my HTML page. this is the image [​IMG]

    This is my page

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .style3 {font-family: Arial, Helvetica, sans-serif; font-size: large; color: #F3D4E4; }
    .style5 {font-family: Arial, Helvetica, sans-serif; font-size: large; color: #FFFFFF; }
    .style6 {color: #FFFFFF}
    -->
    </style>
    <link href="link.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    <!--
    .style8 {font-size: medium}
    -->
    </style>
    </head>

    <body>
    <table width="650" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td height="175" colspan="2" background="levidabanner.jpg">&nbsp;</td>
    </tr>
    <tr>
    <td width="150" height="30" bgcolor="#F3D4E4"><div align="center"><a STYLE="text-decoration: none" href="home.html" span class="style5">Home</a></span></div></td>
    <td rowspan="5" background="file:///H|/Levida/bgimage.gif">&nbsp;</td>
    </tr>
    <tr>
    <td height="30" bgcolor="#F3D4E4"><div align="center"><span class="style5"><a STYLE="text-decoration: none" href="home.html" span class="style5">About Us</a></span></div></td>
    </tr>
    <tr>
    <td height="30" bgcolor="#F3D4E4"><div align="center"><span class="style5"><a STYLE="text-decoration: none" href="home.html" span class="style5">Services</a></span></div></td>
    </tr>
    <tr>
    <td height="30" bgcolor="#F3D4E4"><div align="center" class="style3"><span class="style6"><a STYLE="text-decoration: none" href="home.html" span class="style5">Contact Us</a></span></div></td>
    </tr>
    <tr>
    <td height="245" bgcolor="#F3D4E4">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#F3D4E4">&nbsp;</td>
    <td bgcolor="#F3D4E4"><div align="center"><span class="style6 style8">&copy; copyright Levida 2007</span></div></td>
    </tr>
    </table>
    </body>
    </html>
     
  2. deepdiver01

    deepdiver01

    Joined:
    Dec 22, 2004
    Messages:
    721
    The best way that I know of is to have an image move on hover.

    To do this create an image twice the height of your nav box. On the top half of that image give it the color you want the box to be when it is not being used. On the bottom half of the image, place the background you want when you hover over the button.

    Now, say the navigation cell has a height of 30px. Your image will be 60px high.

    Here is the CSS.

    .nav a {
    margin: 0;
    padding: 0;
    border: none;
    background: #F3D4E4 url(images/nav.gif) 0 0;
    display: block;
    width: 150px;
    height: 30px;
    }

    .nav a:hover, .nav a:active {
    background-position: 0 -30px;
    }

    Then, in the div or td for the nav button just add class="nav" and that should sort it.

    You can also clean up a lot of the unnecessary code now as well as it can be placed in the CSS.
     
  3. inferlogic

    inferlogic Thread Starter

    Joined:
    Jul 22, 2004
    Messages:
    197
    I cant see that this is the solution to my problem? Im not syre you know what i mean.... forgive me if i am being stupid and you have answerd myquestion but i didnt really understand what you wrote as I have limited CSS knowlege lol.

    I have a nav bar on the left of my page going down the page it has 4 links. the links are just text (not buttons). As it is at the moment I have the text to change colour on mouse over hover but what I am trying to achieve is a small heart to appear on the left of my links as you hover them.

    If you have already explained the solution to me i apologies, maybe you could explain it more simply for me lol (I sound thick)

    Thanks for your help.
     
  4. Fyzbo

    Fyzbo

    Joined:
    Feb 6, 2002
    Messages:
    1,683
    The solution provided is if you want to have an image change on hover, like a button that lights up as you mouse over it. If you want it to go from no image to an image it is a similar approach.

    .nav a {
    margin: 0;
    padding: 0px 0px 0px 30px; /*30px represents the width of the heart */
    border: none;
    background-image:none;
    display: block;
    width: 150px;
    height: 30px;
    }

    .nav a:hover, .nav a:active {
    background: #FFFFFF url(heart.gif) 0 0;
    }
     
  5. deepdiver01

    deepdiver01

    Joined:
    Dec 22, 2004
    Messages:
    721
    I have always been taught to try to avoid replacing images on mouseover because the first time someone hovers over the cell, there is a lag and they get a blank cell.

    Have knocked up a test file for you to try and see how it works.

    Put the image file attached in an images folder in the same directory as the html file. Sorry it is a junky heart. Rushing it.



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .style6 {color: #FFFFFF}
    
    .style8 {font-size: medium}
    
    .nav a {
    margin: 0;
    padding-top: 3px;
    border: none;
    background: #F3D4E4 url(images/nav.gif) 0 0;
    display: block;
    width: 150px;
    height: 30px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    font-weight: bold;
    color: #FFFFFF;
    text-align: center;
    text-decoration: none;
    }
    
    .nav a:hover, .nav a:active {
    background-position: 0 -30px;
    text-decoration: none;
    }
    
    -->
    </style>
    <link href="link.css" rel="stylesheet" type="text/css" />
    
    
    </head>
    
    <body>
    <table width="650" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td height="175" colspan="2" background="levidabanner.jpg">&nbsp;</td>
      </tr>
      <tr>
        <td class="nav"><a href="home.html">Home</a></td>
      </tr>
      <tr>
        <td class="nav"><a href="home.html">About Us</a></td>
      </tr>
      <tr>
        <td class="nav"><a href="home.html">Services</a></td>
      </tr>
      <tr>
        <td class="nav"><a href="home.html">Contact Us</a></td>
      </tr>
      <tr>
        <td height="245" bgcolor="#F3D4E4">&nbsp;</td>
      </tr>
      <tr>
        <td bgcolor="#F3D4E4">&nbsp;</td>
        <td bgcolor="#F3D4E4"><div align="center"><span class="style6 style8">&copy; copyright Levida 2007</span></div></td>
      </tr>
    </table>
    </body>
    </html>
    As you can also see, it cleans up your code as well.

    Hope this helps.
     

    Attached Files:

    • nav.gif
      nav.gif
      File size:
      491 bytes
      Views:
      32
  6. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    This can be avoided by loading images using JavaScript when the page loads using "onload()".

    Peace...
     
  7. inferlogic

    inferlogic Thread Starter

    Joined:
    Jul 22, 2004
    Messages:
    197
    Hi deepdiver, thanks for all your help but I think i may be doing something wrong, i have attached the txt file of the html i coppied from you, the page doesnt seem right the hearts seem to fill up the nav cells an the page layout seems different? what hav I done wrong?
     

    Attached Files:

  8. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Here is some HTML which does what you want by simply swapping out the background of the anchor:
    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Document</title>
      <style type="text/css">
    .style6 {
      color: #ffffff;
    }
    .style8 {
      font-size: medium;
    }
    .nav a {
      border: 1px solid red;
      margin: 0;
      background: #f3d4e4 url(nav-back.gif) no-repeat scroll left top;
      padding-top: 3px;
      display: block;
      width: 150px;
      height: 30px;
      font-family: Arial,Helvetica,sans-serif;
      font-size: 18px;
      font-weight: bold;
      color: #ffffff;
      text-align: center;
      text-decoration: none;
    }
    .nav a:hover, .nav a:active {
      text-decoration: none;
      background-image: url(nav-back-over.gif);
      background-repeat: no-repeat;
      background-position: left top;
    }
    
      </style>
      <link href="link.css" rel="stylesheet" type="text/css" />
    
    
    
    
    </head>
    
    
    <body>
    
    <table border="0" cellpadding="0" cellspacing="0" width="650">
    
      <tbody>
        <tr>
    
        <td colspan="2" background="http://i15.photobucket.com/albums/a362/MsStressy/levidabanner.jpg" height="175">&nbsp;</td>
    
      </tr>
    
      <tr>
    
        <td class="nav"><a href="home.html">Home</a></td>
    
      </tr>
    
      <tr>
    
        <td class="nav"><a href="home.html">About Us</a></td>
    
      </tr>
    
      <tr>
    
        <td class="nav"><a href="home.html">Services</a></td>
    
      </tr>
    
      <tr>
    
        <td class="nav"><a href="home.html">Contact Us</a></td>
    
      </tr>
    
      <tr>
    
        <td bgcolor="#f3d4e4" height="245">&nbsp;</td>
    
      </tr>
    
      <tr>
    
        <td bgcolor="#f3d4e4">&nbsp;</td>
    
        <td bgcolor="#f3d4e4">
          <div align="center"><span class="style6 style8">© copyright Levida 2007</span></div>
          </td>
    
      </tr>
    
      </tbody>
    
    </table>
    
    </body>
    </html>
    
    
    Basically, what I did was create a 100x30 transparent GIF background for the anchors of class "nav". Then, when the mouse hovers over them, the background is replaced with a transparent GIF with a heart on the left side. Attached is the "heart" background and a screenshot.
     

    Attached Files:

  9. Gibbs

    Gibbs

    Joined:
    Feb 28, 2005
    Messages:
    609
    Or you can pre-load them dynamically (with whatever) using CSS's hidden attributes.
     
  10. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Put the images in hidden DIVs or elements or something? Neat idea. :)

    Peace...
     
  11. inferlogic

    inferlogic Thread Starter

    Joined:
    Jul 22, 2004
    Messages:
    197
    This is whats happenening when I use the CSS that you have given to me! the whole cell is filled with the image. how do i make it so that it just appears to the left of the link?

    Thanks
     

    Attached Files:

  12. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Are you using deepdiver's CSS? Can you post the current HTML and CSS you're using, so we're all on the same page?

    Peace...
     
  13. inferlogic

    inferlogic Thread Starter

    Joined:
    Jul 22, 2004
    Messages:
    197
    I think Im using a bit of everyones CSS!!! lol

    html text below!

    thanks



    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style type="text/css">
    <!--
    .style3 {font-family: Arial, Helvetica, sans-serif; font-size: large; color: #F3D4E4; }
    .style5 {font-family: Arial, Helvetica, sans-serif; font-size: large; color: #FFFFFF; }
    .style6 {color: #FFFFFF}

    .nav a {
    margin: 0;
    padding: 0px 0px 0px 30px;
    border: none;
    background-image:none;
    display: block;
    width: 150px;
    height: 30px;
    background-repeat:no-repeat;
    }

    .nav a:hover, .nav a:active {
    background: #FFFFFF url(heart-mouseover.gif) 0 0;



    -->
    ;
    </style>

    <style type="text/css">
    <!--
    .style8 {font-size: medium}
    -->
    </style>
    <link href="link.css" rel="stylesheet" type="text/css" />
    <script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
    </head>

    <body>
    <table width="650" border="0" cellspacing="0" cellpadding="0">
    <tr>
    <td height="175" colspan="2" background="levidabanner.jpg">&nbsp;</td>
    </tr>
    <tr>
    <td width="150" height="30" bgcolor="#F3D4E4"><div align="center"><a STYLE="text-decoration: none"href="home.html" span class="style5">Home</a></span></div></td>
    <td rowspan="5" background="bgimage.gif">&nbsp;</td>
    </tr>
    <tr>
    <td height="30" bgcolor="#F3D4E4"><div align="center"><span><a href="home.html" span class="style5, nav">About Us</a></span></div></td>
    </tr>
    <tr>
    <td height="30" bgcolor="#F3D4E4"><div align="center"><span class="style5"><a STYLE="text-decoration: none" href="home.html" span class="style5">Services</a></span></div></td>
    </tr>
    <tr>
    <td height="30" bgcolor="#F3D4E4"><div align="center" class="style3"><span class="style6"><a STYLE="text-decoration: none" href="home.html" span class="style5">Contact Us</a></span></div></td>
    </tr>
    <tr>
    <td height="245" bgcolor="#F3D4E4">&nbsp;</td>
    </tr>
    <tr>
    <td bgcolor="#F3D4E4">&nbsp;</td>
    <td bgcolor="#F3D4E4"><div align="center"><span class="style6 style8">&copy; copyright Levida 2007</span></div></td>
    </tr>
    </table>
    </body>
    </html>
     
  14. tomdkat

    tomdkat Retired Trusted Advisor

    Joined:
    May 6, 2006
    Messages:
    7,148
    Thanks. Where can I get your "heart-mouseover.gif" image?

    Peace...
     
  15. inferlogic

    inferlogic Thread Starter

    Joined:
    Jul 22, 2004
    Messages:
    197
  16. Sponsor

As Seen On
As Seen On...

Welcome to Tech Support Guy!

Are you looking for the solution to your computer problem? Join our site today to ask your question. This site is completely free -- paid for by advertisers and donations.

If you're not already familiar with forums, watch our Welcome Guide to get started.

Join over 733,556 other people just like you!

Loading...
Thread Status:
Not open for further replies.

Short URL to this thread: https://techguy.org/650712

  1. This site uses cookies to help personalise content, tailor your experience and to keep you logged in if you register.
    By continuing to use this site, you are consenting to our use of cookies.
    Dismiss Notice