...

View Full Version : Hover over button not working



will_m
03-18-2011, 12:48 AM
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:


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

Append
03-18-2011, 01:06 AM
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.

teedoff
03-18-2011, 01:16 AM
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.

will_m
03-18-2011, 01:27 AM
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.

will_m
03-18-2011, 01:44 AM
O.k tried renaming but no joy, any other ideas?

New code is:


</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>

Lochlan
03-18-2011, 04:33 AM
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.



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




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

will_m
03-19-2011, 02:02 PM
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.

garabildi
03-19-2011, 02:46 PM
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 (http://www.w3schools.com/css/css_pseudo_classes.asp) and creating rollover buttons (http://www.elated.com/articles/css-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.


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.

teedoff
03-19-2011, 03:29 PM
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.



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





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


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

will_m
03-23-2011, 01:24 AM
Thanks guys, I've managed to get it working now and I'll work on my listing skills or lack of.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum