Disjointed Image Change on DIV Rollover

**mbond5** · Jun 27, 2012 10:28

Hello,

A quick question, here is the site I am currently working on...

http://modocom.ca/fidex/

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.

Thanks, you guys are the best!!!

Mike

**Pamela1991** · Jun 27, 2012 11:03

Hello Mike,

Simply change the following bolded snippets in this stylesheet from:

Code:

#main-one {
	position: absolute;
	float: left;
	z-index: 1200;
	top: 65px;
	width: 330px;
	height: 315px;
	overflow: hidden;
}

#main-one:hover {
	background: #f8981d;
}

#main-two {
	position: absolute;
	float: left;
	z-index: 1201;
	top: 65px;
	width: 295px;
	height: 175px;
	margin-left: 335px;
	padding-left: 40px;
	padding-top: 140px;
}

#main-two:hover {
	background: #008752;
}

#main-three {
	position: absolute;
	z-index: 1202;
	top: 385px;
	width: 290px;
	height: 175px;
	padding-left: 40px;
	padding-top: 140px;
}

#main-three:hover {
	background: #008752;
}

#main-four {
	position: absolute;
	z-index: 1202;
	top: 385px;
	width: 295px;
	height: 175px;
	margin-left: 335px;
	padding-left: 40px;
	padding-top: 140px;
}

#main-four:hover {
	background: #f8981d;
}

to:

Code:

#main-one {
	position: absolute;
	float: left;
	z-index: 1200;
	top: 65px;
	width: 330px;
	height: 315px;
	overflow: hidden;
}

#main-one:hover {
	background: url('../image/image1.jpg');
}

#main-two {
	position: absolute;
	float: left;
	z-index: 1201;
	top: 65px;
	width: 295px;
	height: 175px;
	margin-left: 335px;
	padding-left: 40px;
	padding-top: 140px;
}

#main-two:hover {
	background: url('../image/image2.jpg');
}

#main-three {
	position: absolute;
	z-index: 1202;
	top: 385px;
	width: 290px;
	height: 175px;
	padding-left: 40px;
	padding-top: 140px;
}

#main-three:hover {
	background: url('../image/image3.jpg');
}

#main-four {
	position: absolute;
	z-index: 1202;
	top: 385px;
	width: 295px;
	height: 175px;
	margin-left: 335px;
	padding-left: 40px;
	padding-top: 140px;
}

#main-four:hover {
	background: url('../image/image4.jpg');
}

What version of IE are you using?

**mbond5** · Jun 27, 2012 11:06

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.

Thanks

**mbond5** · Jun 27, 2012 11:18

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.

Thanks

**Pamela1991** · Jun 27, 2012 11:44

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!

**mbond5** · Jun 27, 2012 12:06

Hi Pamela, yes that is what I would like. Its ok Pamela I may not have explained well enough.

**Paul O'B** · Jun 27, 2012 13:39

Hi,

You'd need to use a method like this:

Code:

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

**mbond5** · Jun 27, 2012 13:47

Hi Paul,

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.

Thanks Paul your like a saviour my friend!!!

Mike

**mbond5** · Jun 27, 2012 14:42

Hey Paul,

Ok that works perfectly!!! Your a genius my friend, now comes the tricky part where may need jquery.

Below are two links to better describe what I'm trying to accomplish for when you rollover each quadrant...

Not Hovered Over Anything

http://modocom.ca/fideximages/Website-Layout.jpg

Hovered Over First Quadrant

http://modocom.ca/fideximages/Website-Layout-Hover.jpg

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.

Thanks your the best!!!

Mike

**mbond5** · Jun 27, 2012 14:54

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

#mainnav . selected {
background: #e58d1c;
color: #FFF
}

So it should be orange when on the page, correct or am I missing something here, this is how I've done this before.

**Paul O'B** · Jun 28, 2012 01:32

Originally Posted by mbond5

Hey Paul,

Ok that works perfectly!!! Your a genius my friend, now comes the tricky part where may need jquery.

Below are two links to better describe what I'm trying to accomplish for when you rollover each quadrant...

Not Hovered Over Anything

http://modocom.ca/fideximages/Website-Layout.jpg

Hovered Over First Quadrant

http://modocom.ca/fideximages/Website-Layout-Hover.jpg

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.

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.

**Paul O'B** · Jun 28, 2012 01:35

Originally Posted by mbond5

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

#mainnav . selected {
background: #e58d1c;
color: #FFF
}

So it should be orange when on the page, correct or am I missing something here, this is how I've done this before.

Its the anchor that needs to be styled:

Code:

#mainnav li.selected a{background:orange}

**mbond5** · Jun 28, 2012 06:18

Perfect!!! Your a genius!!! Anyway to make the transition work in IE???

**Paul O'B** · Jun 28, 2012 06:29

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.

**mbond5** · Jun 28, 2012 06:37

Ok thanks Paul,

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?

Thanks my friend!

**mbond5** · Jun 28, 2012 07:01

Also when your in this page...

http://modocom.ca/fidex/fidex/the-pr...ligence-phase/

The parent PRocess isnt highlighted in the orange and for some reason there are two arrows after it. Any idea why this could be?

**Paul O'B** · Jun 28, 2012 07:08

Also, is it easy to implement the jquery for IE9 and under to implement the transition?

I updated my demo to use a little jquery for IE only to make it slide.

I had to add some extra elements and styles to get it too play nicely.

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.

Just place it to the left of the menu like so:

Code:

#mainnav li {position:relative;}
#mainnav ul li:hover ul{left:100%;top:0}

**Paul O'B** · Jun 28, 2012 07:17

Originally Posted by mbond5

Also when your in this page...

http://modocom.ca/fidex/fidex/the-pr...ligence-phase/

The parent PRocess isnt highlighted in the orange and for some reason there are two arrows after it. Any idea why this could be?

The class of selected is missing from the parent so the orange won't show.
You seem to have duplicated this:

Code:

<script type="text/javascript">
// <![CDATA[
jQuery(document).ready(function($) {
$("ul.ssf-blue").superfish ({
    hoverClass:    "wpm-hover",        
    delay:         500,                
    animation:     {opacity:"show"}, 
    speed:         "slow",         
    autoArrows:    true,               
    dropShadows:   true,               
    disableHI:     true
});
}); 
// ]]>
</script>

**mbond5** · Jun 28, 2012 07:20

Hmmm not sure how I'm using a Wordpress plugin that I've always used and didnt have this issue before.

Thanks for the other stuff helped greatly, now to figure out this navigation hmmm.

**mbond5** · Jun 28, 2012 07:30

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?

**mbond5** · Jun 28, 2012 08:13

Your going to hate me Paul!!!

Design change to the child pages on the navigation, how can I get it to show up below the parent and push the other menus down when rolled over?

Here is image of what Im trying to accomplish...

http://modocom.ca/fideximages/WebsiteNav.jpg

So when your not rolled over top of it the subnavs will not be showing only when you roll over it, then they will appear below their parent and the others will bump down.

Thanks your the best, I know I'm a pest my friend.

**Paul O'B** · Jun 28, 2012 08:20

Hi,

I'm on my way out at the moment so it will have to wait until tomorrow or someone else can jump in.

I can say that it is a bad idea to have the submenu underneath and to push the other elements down as that makes navigation very awkward indeed. If you want that look then it would be better to do it on click rather than hover so the menu and column doesn't jump around and give everyone an epileptic fit

The mechanics of making it appear underneath are simply to remove the absolute positioning on hover and let the element take up its display in the flow which will autmotically push other content down (there will be a few other tweaks needed but that's the main gist of it.).

**mbond5** · Jun 28, 2012 08:22

Ok thanks, Ive taken out the absolute but it does show up but not push everything down.

What else am I missing to do this, sorry really just want to get this done and up but having a hell of a time with this.

I agree with the click as well and if it could show up when your in one of the child pages just for that specific parent is what I need.
Thanks

**mbond5** · Jun 28, 2012 09:59

Figured I'd make a new thread for this page topic since the other one had several different issues on it and ppl may not be able to find my current issue.

Anyways heres the site I'm working on...

http://modocom.ca/fidex/

Now what I want the dropdown to do is something like the image below when you rollover it

http://modocom.ca/fideximages/WebsiteNav.jpg

So when you rollover it the subpages appear and the other navigation items gets pushed down. I also when you go into subpages would like it to stay open for that parent page. So say your in Process - Blueprint Phase the main navigation for PRocess will remain open. I am using Wordpress but believe we can achieve this. I have it so the subpages do show up underneath but the other parents dont move down yet.

Much appreciated if you could help.

Thanks,

Mike

**Paul O'B** · Jun 28, 2012 10:07

Remove the height from here:

#mainnav li {
height: 28px;
}

User Tag List

Thread: Disjointed Image Change on DIV Rollover

Thread Tools

Display

Disjointed Image Change on DIV Rollover

Dropdown Help!

Bookmarks

Bookmarks

Posting Permissions