What I need if you see on the top of site theres an Image of a guy and its like in four quadrants, what I’d like is if you rollover one of the quadrants the image behind changes. Right now you’ll see when you rollover a quadrant the quadrant changes colours which I still need there will be text on it eventually but need for each quadrant you rollover the image to change. Then when you mouse out it goes back to that image I already have there. If someone could help me with how to achieve this as soon as possible that would be excellent.
Also, just noticed in IE the hover doesnt work when you hover over on of the quadrant DIVs the background colour doesnt change.
Hi Pamela not exactly what I’m looking for, I dont want the background of the #main divs to change, I need the actual large image behind it to change on each rollover and that background color on each Main div to remain the same, hopefully I explained that better, not sure then its not just typical rollover function its rolling over a div to change a image somewhere else on the screen the one behind it.
And its IE9 Im looking at but need it to work on all browsers of course, but when you rollover one of the four quadrants the background colour of that image doesnt show in IE.
Also, I will be putting titles in these four quadrants so I will need the quadrants to link to separate pages how can I do this effectively. Hopefully someone can lend a helping hand.
So you want this picture to change whenever you hover over any one of those four quadrants?
If so, that is spinning my head. It reminds me of something I previously asked about on here. That makes me think that maybe “>” would somehow be involved?
Sorry, I misunderstood your question when I first read it, and it now seems I’ve taken a bigger bite than I can chew!
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
ul.wrap {
list-style:none;
margin:0;
padding:0;
width:440px;
height:440px;
position:relative;/* stacking context for span */
background:green;/* the default image goes here */
z-index:1;
}
.wrap li { float:left; }
.wrap li a {
color:#000;
text-decoration:none;
display:block;
width:200px;
height:200px;
border:10px solid #fff;
}
li a:hover span {
position:absolute;
left:0;
top:0;
width:440px;
height:440px;
z-index:-1;
}
li.one a:hover { background:red }
li.one a:hover span { background:yellow }/* change this colour to an image */
li.two a:hover { background:orange }
li.two a:hover span { background:blue }/* change this colour to an image */
li.three a:hover { background:teal }
li.three a:hover span { background:black }/* change this colour to an image */
li.four a:hover { background:#ccc }
li.four a:hover span { background:#fcf }/* change this colour to an image */
</style>
</head>
<body>
<ul class="wrap">
<li class="one"><a href="http://www.google.com">One <span></span></a></li>
<li class="two"><a href="http://www.yahoo.com">Two <span></span></a></li>
<li class="three"><a href="http://www.google.com">Three <span></span></a></li>
<li class="four"><a href="http://www.yahoo.com">Four <span></span></a> </li>
</ul>
</body>
</html>
The new big image is contained in the span of each anchor and then on rollover it is placed absolutely to fill the whole area while still allowing the current item to be clicked. If you didn’t want ie7 support you could remove the span and use :after to supply the new image for each anchor in much the same way as the span does.
Thanks for this I will try to implement it into my coding, just trying to figure out how to exactly do it, is it easy to change what I currently have? Also there will be titles at the bottom of each of the four quadrants and when you roll over each one the big image will change as well as I need the title to like scroll up and background colour to fill the quadrant. Not sure if it can be done with CSS or if I have to take a jquery approach grrr.
Hopefully this will be easy to implement so I can get this done.
So basically what I want is title at the bottom of each quadrant when you rollover the quadrant it slides up reveals some more text and you can click on the quadrant to go to that page just like now you can then when you roll off that quadrant it slides back down and same goes for the other quadrants.
Can this be done with CSS, Im hoping it can be and if so how can I achieve this.
Hopefully the images and I explain what I need better.
My other issue on the #mainnav navigation when you are on the current page or a child page of it, in my cssthe background of that should be orange so it indicates where you are and it doesnt I have…
You can build on the example I gave you before and use CSS transitions (modern browsers only) to slide the text up. Here’s a live demonstration.
Basically you nest an element inside the anchor, give then first line a height and then push it down to the bottom with a margin. On rollover you reduce the margin and the text that was pushed out of view slides back into view.
Ie9 and under don’t understand transitions so the state will change instantly rather than slide.It will still be usable. You would need js/jquery for IE to make it slide. IE10 should support transitions.
I’m trying to make my dropdown menu on my #mainnav show up directly next to item but its showing up below it, any way I can get it show up next to it. Example, of what I mean is the site I recently did trying to achieve same thing but doesnt seem to want to work same way, heres the example… http://keatinginc.ca/
So Id like the dropout or flyout menu to be next to the one just need to get one working then I’m sure others will follow nicely.
Also, is it easy to implement the jquery for IE9 and under to implement the transition?
Same thing with the Resources section, once I got all the child pages in, this is quite frustrating never had this issue before.
EDIT***
Ok got the arrow thing fixed but now when your on one of the sections and you rollover over the main parent the highlighted one is green which is correct the current page one but the ones that are not current pages and are orange when they should be white. Any idea why this is doing that?
