SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Disjointed Image Change on DIV Rollover

    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

  2. #2
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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?

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    SitePoint Zealot
    Join Date
    Mar 2012
    Posts
    110
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!

  6. #6
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Pamela, yes that is what I would like. Its ok Pamela I may not have explained well enough.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

  8. #8
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  9. #9
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  10. #10
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  11. #11
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mbond5 View Post
    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.

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mbond5 View Post
    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}

  13. #13
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Perfect!!! Your a genius!!! Anyway to make the transition work in IE???

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.

  15. #15
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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!

  16. #16
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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}

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Quote Originally Posted by mbond5 View Post
    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>

  19. #19
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  20. #20
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?

  21. #21
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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.

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    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.).

  23. #23
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  24. #24
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    601
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Dropdown Help!

    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

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,784
    Mentioned
    158 Post(s)
    Tagged
    3 Thread(s)
    Remove the height from here:

    #mainnav li {
    height: 28px;
    }


Bookmarks

Posting Permissions

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