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 10 of 10
  1. #1
    New Coder
    Join Date
    Mar 2011
    Location
    Manchester U.K
    Posts
    30
    Thanks
    14
    Thanked 0 Times in 0 Posts

    Hover over button not working

    Hi there, I can't seem to get one of my hover links to work properly I have a full menu bar and all the images on the bar have hover images which just changes the color of the lettering but for some reason one doesn't work and I can't see why. The site is:

    http://www.williammorrismusic.com/index.asp

    The button labelled friends won't work.

    Here is my code:

    Code:
    <tr>
        <td height="36" align="center" valign="middle" bgcolor="#666666">
        <a href="../index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','../images/Home Button Down.jpg',1)"><img src="../images/Home Button Up.jpg" alt="Home" name="home" width="98" height="25" border="0" id="home" /></a>
        <a href="../video.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('video','','../images/Video Button Down.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/Video Button Up.jpg" alt="Video" name="video" width="98" height="25" border="0" id="video" /></a>
        <a href="../audio.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('audio','','../images/Audio Button Down.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/Audio Button Up.jpg" alt="Audio" name="audio" width="98" height="25" border="0" id="audio" /></a>
        <a href="../credits.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('credits','','../images/credits button down.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/credits button up.jpg" alt="Credits" name="credits" width="98" height="25" border="0" id="credits" /></a>
        <a href="../contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/Contact Button Down.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/Contact Button Up.jpg" alt="Contact" name="contact" width="98" height="25" border="0" id="contact" /></a>
        <a href="../links.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('friends','','../images/friends button down.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/friends button up.jpg" alt="links" name="links" width="98" height="25" border="0" id="links" /></a>
        <a href="../login_db_nav/login_db_nav.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('clientlogin','','../images/clientlogin Button Down.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/clientlogin button up.jpg" alt="clientlogin" name="clientlogin" width="150" height="25" border="0" id="clientlogin" /></a>    
        </td>
      </tr>
    Can anyone see any issues? The code is part of a template that all the pages on my site read from so it happens on every page. I think it started to not working when I added the client section button on the end. Any pointers would be most appreciated.

  • #2
    New Coder
    Join Date
    Mar 2011
    Posts
    38
    Thanks
    0
    Thanked 3 Times in 3 Posts
    Get rid of the spaces in between the image names, like 'Home Button Down', and re-name it to like 'homebtd', then see if it works.

  • #3
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Navagations should really be in lists. Then you wouldn't need all those non-breaking spaces to space each link out. Ideally margins and paddings are made for that.
    Last edited by teedoff; 03-18-2011 at 01:45 AM.
    Teed

  • #4
    New Coder
    Join Date
    Mar 2011
    Location
    Manchester U.K
    Posts
    30
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Append View Post
    Get rid of the spaces in between the image names, like 'Home Button Down', and re-name it to like 'homebtd', then see if it works.
    It worked before with the spaces but I shall give it a go.

  • #5
    New Coder
    Join Date
    Mar 2011
    Location
    Manchester U.K
    Posts
    30
    Thanks
    14
    Thanked 0 Times in 0 Posts
    O.k tried renaming but no joy, any other ideas?

    New code is:

    Code:
    </tr>
      <tr>
        <td height="36" align="center" valign="middle" bgcolor="#666666">
        <a href="../index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','../images/homebuttond.jpg',1)"><img src="../images/homebuttonu.jpg" alt="Home" name="home" width="98" height="25" border="0" id="home" /></a>
        <a href="../video.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('video','','../images/videobuttond.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/videobuttonu.jpg" alt="Video" name="video" width="98" height="25" border="0" id="video" /></a>
        <a href="../audio.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('audio','','../images/audiobuttond.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/Audiobuttonu.jpg" alt="Audio" name="audio" width="98" height="25" border="0" id="audio" /></a>
        <a href="../credits.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('credits','','../images/creditsbuttond.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/creditsbuttonu.jpg" alt="Credits" name="credits" width="98" height="25" border="0" id="credits" /></a>
        <a href="../contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/contactbuttond.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/contactbuttonu.jpg" alt="Contact" name="contact" width="98" height="25" border="0" id="contact" /></a>
        <a href="../links.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('friends','','../images/friendsbuttond.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/friendsbuttonu.jpg" alt="links" name="links" width="98" height="25" border="0" id="links" /></a>
        <a href="../login_db_nav/login_db_nav.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('clientlogin','','../images/clientloginbuttond.jpg',1)">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<img src="../images/clientloginbuttonu.jpg" alt="clientlogin" name="clientlogin" width="150" height="25" border="0" id="clientlogin" /></a>    
        </td>
      </tr>

  • #6
    New Coder
    Join Date
    May 2008
    Location
    Sydney, Australia
    Posts
    45
    Thanks
    0
    Thanked 8 Times in 8 Posts
    I'd recommend putting your navigation into a list format (not using tables) and use plain text instead of images and just put the hover code in the CSS. The code below is to get you started.

    Code:
    <ul id="nav">
    	<li><a href="#">home</a></li>
    	<li><a href="#">video</a></li>
    	<li><a href="#">audio</a></li>
    	<li><a href="#">credits</a></li>
    	<li><a href="#">contact</a></li>
    	<li><a href="#">friends</a></li>
    	<li><a href="#">client login</a></li>
    </ul>
    Code:
    #nav li a {
    	color:#02CC9C;
    }
    #nav li a:hover {
    	color:#FFFE35;
    }
    In fact, you should be using plain HTML and not images for all your text. Might also be a good idea to look into how to do tableless design.

  • #7
    New Coder
    Join Date
    Mar 2011
    Location
    Manchester U.K
    Posts
    30
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Hi, I appreciate there are benefits to using plain text and not images for my links etc but I really like the look of the images as they fit with the rest of the site. When you say use a list format, does this just mean the way the code is laid out or is it something else?

    I'm just trying to figure out how to make the friends link hover properly like the rest do.

  • #8
    Regular Coder
    Join Date
    Feb 2011
    Posts
    109
    Thanks
    6
    Thanked 1 Time in 1 Post
    No. It means using the <ul> and <li> tags instead of <td>. See Lochlan's code for an example of this. I'm sure you will agree that it is much less complex than what you have produced.

    Read up on CSS pseudo classes and creating rollover buttons in CSS. With just a few CSS lines you can target your <a> tags in your <li> to do different things (change colours, change images etc, move position etc.) depending on how you interact with the <a> tag. For example, if you used the following CSS code the link (<a> tag) would set the initial colour of the link and what colour it changes to when clicked, hovered over and when it is activated.

    Code:
    a:link {color:#FF0000;}      /* unvisited link */
    a:visited {color:#00FF00;}  /* visited link */
    a:hover {color:#FF00FF;}  /* mouse over link */
    a:active {color:#0000FF;}  /* selected link */
    Please note that you can use images and plain text with this method.
    Last edited by garabildi; 03-19-2011 at 02:55 PM.

  • #9
    Senior Coder
    Join Date
    Aug 2010
    Location
    High Point, NC
    Posts
    3,332
    Thanks
    5
    Thanked 363 Times in 360 Posts
    Quote Originally Posted by Lochlan View Post
    I'd recommend putting your navigation into a list format (not using tables) and use plain text instead of images and just put the hover code in the CSS. The code below is to get you started.

    Code:
    <ul id="nav">
    	<li><a href="#">home</a></li>
    	<li><a href="#">video</a></li>
    	<li><a href="#">audio</a></li>
    	<li><a href="#">credits</a></li>
    	<li><a href="#">contact</a></li>
    	<li><a href="#">friends</a></li>
    	<li><a href="#">client login</a></li>
    </ul>

    Code:
    #nav li a {
    	color:#02CC9C;
    }
    #nav li a:hover {
    	color:#FFFE35;
    }
    In fact, you should be using plain HTML and not images for all your text. Might also be a good idea to look into how to do tableless design.

    I thought thats what I suggested several days ago. Not that your table way cant work, but lists are made for, well lists.

    Code:
    <ul>
        <li><a href="../index.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('home','','../images/homebuttond.jpg',1)"><img src="../images/homebuttonu.jpg" alt="Home" name="home" width="98" height="25" border="0" id="home" /></a></li>
        <li><a href="../video.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('video','','../images/videobuttond.jpg',1)"><img src="../images/videobuttonu.jpg" alt="Video" name="video" width="98" height="25" border="0" id="video" /></a></li>
        <li><a href="../audio.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('audio','','../images/audiobuttond.jpg',1)"><img src="../images/Audiobuttonu.jpg" alt="Audio" name="audio" width="98" height="25" border="0" id="audio" /></a></li>
        <li><a href="../credits.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('credits','','../images/creditsbuttond.jpg',1)"><img src="../images/creditsbuttonu.jpg" alt="Credits" name="credits" width="98" height="25" border="0" id="credits" /></a></li>
        <li><a href="../contact.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contact','','../images/contactbuttond.jpg',1)"><img src="../images/contactbuttonu.jpg" alt="Contact" name="contact" width="98" height="25" border="0" id="contact" /></a></li>
        <li><a href="../links.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('friends','','../images/friendsbuttond.jpg',1)"><img src="../images/friendsbuttonu.jpg" alt="links" name="links" width="98" height="25" border="0" id="links" /></a></li>
        <li><a href="../login_db_nav/login_db_nav.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('clientlogin','','../images/clientloginbuttond.jpg',1)"><img src="../images/clientloginbuttonu.jpg" alt="clientlogin" name="clientlogin" width="150" height="25" border="0" id="clientlogin" /></a></li>
      </ul>
    Teed

  • Users who have thanked teedoff for this post:

    will_m (03-23-2011)

  • #10
    New Coder
    Join Date
    Mar 2011
    Location
    Manchester U.K
    Posts
    30
    Thanks
    14
    Thanked 0 Times in 0 Posts
    Thanks guys, I've managed to get it working now and I'll work on my listing skills or lack of.


  •  

    Posting Permissions

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