We value your feedback.
Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!
Course Of The Month
3 days, 7 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Problem with div links and hover state background
Posted on 2008-10-02
http://csn.mc.com/test.aspx
I'm trying to implement a html/css horizontal menu where divs are the links using onclick events.
The divs have an inital background but when you hover over the div it will change the new background.
Here is some of the code from the link above to make this easier.
I'm trying to implement a html/css horizontal menu where divs are the links using onclick events.
The divs have an inital background but when you hover over the div it will change the new background.
Here is some of the code from the link above to make this easier.
<%@ Page Language="C#" AutoEventWireup="true" Title="Converged Sensor Networking" %>
<!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 runat="server">
<link rel="Stylesheet" href="MASTERMaster_page.css" type="text/css" media="all" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6fix.css" />
<![endif]-->
</head>
<body>
<div id="learn" onclick="location.href='http:/csn.mc.com/learn.aspx';" style="cursor:pointer;"></div>
<div id="differ" onclick="location.href='http://csn.mc.com/differ.aspx';" style="cursor:pointer;"></div>
<div id="solve" onclick="location.href='http://csn.mc.com/solve.aspx';" style="cursor:pointer;"></div>
<div id="contact" onclick="location.href='http://csn.mc.com/contact.aspx';" style="cursor:pointer;"></div>
</body>
<html>
Here is the .css code
div#learn {
background: url('img/global_nav/learn.jpg') 0 0 no-repeat;
border:none;
width:88px;
height:27px;
float:left;
margin-top:80px;
}
div#differ {
background: url('img/global_nav/differentiate.jpg') 0 0 no-repeat;
border:none;
width:173px;
height:27px;
float:left;
margin-top:80px;
}
div#solve {
background: url('img/global_nav/solve.jpg') 0 0 no-repeat;
border:none;
width:105px;
height:27px;
float:left;
margin-top:80px;
}
div#contact {
background: url('img/global_nav/contact.jpg') 0 0 no-repeat;
border:none;
width:108px;
height:27px;
float:left;
margin-top:80px;
}
div#learn:hover {background: url('img/global_nav/learn-over.jpg') 0 0 no-repeat;}
div#differ:hover {background: url('img/global_nav/differentiate-over.jpg') 0 0 no-repeat;}
div#solve:hover {background: url('img/global_nav/solve-over.jpg') 0 0 no-repeat;}
div#contact:hover {background: url('img/global_nav/contact-over.jpg') 0 0 no-repeat;}
div#learn:visited {background: url('img/global_nav/learn.jpg') 0 0 no-repeat;}
div#differ:visited {background: url('img/global_nav/differentiate.jpg') 0 0 no-repeat;}
div#solve:visited {background: url('img/global_nav/solve.jpg') 0 0 no-repeat;}
div#contact:visited {background: url('img/global_nav/contact.jpg') 0 0 no-repeat;}
[X]
Welcome to Experts Exchange
Add your voice to the tech community where 5M+ people just like you are talking about what matters.
- Help others & share knowledge
- Earn cash & points
- Learn & ask questions
-
8
4
2
14 Comments
That seems to be working here, at least in FF3 and IE7... What's the problem?
The only thing I would suggest is preloading the images so that there isn't a delay in them showing.
The only thing I would suggest is preloading the images so that there isn't a delay in them showing.
There is no hover or horizontal menus working on IE6 at all, and no color change like Moz- FF2.
Your CSS is lacking some basic link styling, like the following --
A:link {color : #0000FF; text-decoration: none; background-color:#CCCCCC;}
A:visited {color : #0000FF; text-decoration: none; background-color:#CCCCCC;}
A:active {color : #0000FF; text-decoration: none;background-color:#CCC
A:hover {color: #CC0000; text-decoration: underline; background-color:#aa8844;}
Add that and adjust those values until you get what you want.
I don't see where or why you need to preload images on this page -- there are no images I can see.
Your CSS is lacking some basic link styling, like the following --
A:link {color : #0000FF; text-decoration: none; background-color:#CCCCCC;}
A:visited {color : #0000FF; text-decoration: none; background-color:#CCCCCC;}
A:active {color : #0000FF; text-decoration: none;background-color:#CCC
A:hover {color: #CC0000; text-decoration: underline; background-color:#aa8844;}
Add that and adjust those values until you get what you want.
I don't see where or why you need to preload images on this page -- there are no images I can see.
Each part of the menu is an img...
The background for the div is an image i.e. the background is the text ("Learn"), which is an img. When you hover over the img will switch from a gray looking img to a orange looking img.
How would you preload, because I can see how it would matter when you reload the page on IE7. There seems to be a little choppiness in the img.
The background for the div is an image i.e. the background is the text ("Learn"), which is an img. When you hover over the img will switch from a gray looking img to a orange looking img.
How would you preload, because I can see how it would matter when you reload the page on IE7. There seems to be a little choppiness in the img.
Personally, I'd load the images in to the page and hide them using CSS. (display: hidden;) That way, it doens't rely on having Javascript turned on like a lot of the preloaders do.
There is still a chance that your visitors will notice some choppiness if they mouse over the images too soon, but this can't really be helped, unless you use one image for each menu item, and move it on mouseover. It's a technique I've used in the past very effectively.
See:
http://www.redvodkajelly.com/blog/2007/06/15/css-image-rollovers/ and
http://www.wellstyled.com/css-nopreload-rollovers.html
Hope this helps.
There is still a chance that your visitors will notice some choppiness if they mouse over the images too soon, but this can't really be helped, unless you use one image for each menu item, and move it on mouseover. It's a technique I've used in the past very effectively.
See:
http://www.redvodkajelly.com/blog/2007/06/15/css-image-rollovers/ and
http://www.wellstyled.com/css-nopreload-rollovers.html
Hope this helps.
shonk's preloading in place and hiding is fine.
The other way we used to do it is load them all at the bottom of the screen, like this --
<IMG SRC = "images/wbln.jpg" NAME = "img11" HEIGHT="1" WIDTH="1">
then use javascript to swap the images into the right place when mousing over. Either way works.
The other way we used to do it is load them all at the bottom of the screen, like this --
<IMG SRC = "images/wbln.jpg" NAME = "img11" HEIGHT="1" WIDTH="1">
then use javascript to swap the images into the right place when mousing over. Either way works.
I did the joined picture trick where you take the rollover state and the non-rollover state and join them side by side so they are only 1 picture and just moved the position.
It fixed the loading choppiness and also fixed a bug in opera but it still did not fix the problem with IE6. The image loads but it will not move the position on rollover.
Any ideas?
It fixed the loading choppiness and also fixed a bug in opera but it still did not fix the problem with IE6. The image loads but it will not move the position on rollover.
Any ideas?
<head><link rel="Stylesheet" href="MASTERMaster_page.css" type="text/css" media="all" />
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="ie6fix.css" />
<![endif]-->
<title>
Converged Sensor Networking
</title></head>
<body>
<div id="learn" onclick="location.href='http://csn.mc.com/learn.aspx';" style="cursor:pointer;"></div>
<div id="differ" onclick="location.href='http://csn.mc.com/differ.aspx';" style="cursor:pointer;"></div>
<div id="solve" onclick="location.href='http://csn.mc.com/solve.aspx';" style="cursor:pointer;"></div>
<div id="contact" onclick="location.href='http://csn.mc.com/contact.aspx';" style="cursor:pointer;"></div>
</body>
<html>
The new CSS:
div#learn {
background: url('img/global_nav/learnC.jpg') 0 0 no-repeat;
border:none;
width:88px;
height:27px;
float:left;
margin-top:78px;
position:relative;
}
div#differ {
background: url('img/global_nav/differentiateC.jpg') 0 0 no-repeat;
border:none;
width:173px;
height:27px;
float:left;
margin-top:78px;
position:relative;
}
div#solve {
background: url('img/global_nav/solveC.jpg') 0 0 no-repeat;
border:none;
width:105px;
height:27px;
float:left;
margin-top:78px;
position:relative;
}
div#contact {
background: url('img/global_nav/contactC.jpg') 0 0 no-repeat;
border:none;
width:108px;
height:27px;
float:left;
margin-top:78px;
position:relative;
}
div#learn:hover {background-position: -88px 0;}
div#differ:hover {background-position: -173px 0;}
div#solve:hover {background-position: -105px 0;}
div#contact:hover {background-position: -108px 0;}
It seems the problem is because of this code:
div#learn:hover
is there another way to do the hover state for IE6?
div#learn:hover
is there another way to do the hover state for IE6?
use javascript onMouseOver() to set any property of any link or image in the page after it is loaded, that is the easiest way to overcome CSS you can't change. If you can, then just change it to what you want.
if someone does not have javaScript enabled then this feature will not work. I'm trying to avoid it but I might have a fix for it using an htc file. It will scan the .css file and if it find the :hover it will run a function to take care of this problem. I'm just wondering if the htc is working like a javaScript.
Can be found at www.xs4all.nl/peterned/csshover.html
Can be found at www.xs4all.nl/peterned/csshover.html
Ahh forget it, I give up on trying to avoid javaScript. Everyone should have it enabled....
I'm already using onclick so I might as well use onmouseover.
Thanks guys.
You have both been a big help.
I'm already using onclick so I might as well use onmouseover.
Thanks guys.
You have both been a big help.
So javascript was the solution then, not the one you accepted as the solution? You decided that my suggestion of on mouse over was the best solution -- just for the record?
I'm using the javaScript and the trick with loading one picture. The mouseover will just change the position to the picture.
Thats why I split up the points evenly. I figured you were both so helpful, should spread the wealth.
For the record. I didn't know about the accepted solution and assisted solution till now. If i had to do it again I would put your answer as the accepted solution and shonk as the assisted.
Thats why I split up the points evenly. I figured you were both so helpful, should spread the wealth.
For the record. I didn't know about the accepted solution and assisted solution till now. If i had to do it again I would put your answer as the accepted solution and shonk as the assisted.
Featured Post
Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.
One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
Find out what you should include to make the best professional email signature for your organization.
When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number.
For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS.
Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
Suggested Courses
Course of the Month3 days, 7 hours left to enroll
691 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.