Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    New to the CF scene
    Join Date
    Sep 2007
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How to change CSS image position during hover for IE?

    I have an image that combines normal, mouseover, and active. Using a DIV I hide most of the image to only show a portion of the image. Then during :hover I want the position to change to the highlighted portion of my image. Using negative positoning technique.

    The code I have implemented works flawlessly in FF. But IE will not budge, could anyone please provide some insight?

    Here are my divs:
    Code:
    <div class="menubar" id="menu_loose">
      <a href="" id="img_menu_loose">
        <img src="/images/top_menubar.gif"  />
      </a>
    </div>
    
    <div class="menubar" id="menu_rings">
      <a href="">
        <img src="/images/top_menubar.gif" id="img_menu_rings" />
      </a>
    </div>
    Here is my css:
    Code:
    #menu_loose
      { width:131px; position:relative;}
    		        
      #img_menu_loose img, #img_menu_loose:visited img
        { position:absolute; top:-0px; left:0px; } 
      #img_menu_loose:hover img, #img_menu_loose:visited:hover img
        { position:absolute; top:-24px; left:0px; }
      #img_menu_loose:active
        { position:absolute; top:-48px; left:0px; }             
        	
    #menu_rings
      { width:53px; }
    		        
      #img_menu_rings
        { position:absolute; top:0px; left:-131px; }
      #img_menu_rings:hover
        { position:absolute; top:-24px; left:-131px; }
      #img_menu_rings:active
        { position:absolute; top:-48px; left:-131px; }
    I have tried two different ways of trying to get IE to work. One way is setting the css to point to the anchor tag, and another directly on the image. Both work in FF, but neither in IE.

  • #2
    New Coder
    Join Date
    Aug 2007
    Posts
    69
    Thanks
    11
    Thanked 2 Times in 2 Posts
    arkster it would be much better to accomplish your goal using css background images. Here's an example on a menu I recently built:
    HTML
    Code:
    <div id="navWrapper">
     <ul id="nav">
      <li><a href="http://www.rockchurch.com/" id="navRock">The Rock</a></li>
      <li><a href="#" id="navHome" class="currentSection">Home</a></li>
      <li><a href="prospects/" id="navProspects">Prospective Students</a></li>
      <li><a href="students/" id="navCurrent">Current Students</a></li>
      <li><a href="faculty/" id="navFaculty">Faculty</a></li>
      <li><a href="contact/" id="navContact">Contact Us</a></li>
     </ul>		
    </div><!-- close:navWrapper -->
    CSS
    Code:
    #nav {
    	list-style: none;
    	}
    #nav li {
    	float: left;
    	margin-right: 0px;
    	overflow: hidden; 
    	}
    #nav li a {
    	display: block;
    	height: 61px;
    	text-indent: -5000px;
    	overflow: hidden;
    	background-position: top; 
    	}
    	#navRock {
    		width: 112px;
    		background: url(../images/navRock.jpg) no-repeat;
    		}
    	#navHome {
    		width: 106px;
    		background: url(../images/navHome.jpg) no-repeat;
    		}
    	#navProspects {
    		width: 159px;
    		background: url(../images/navProspects.jpg) no-repeat;
    		}
    	#navCurrent {
    		width: 147px;
    		background: url(../images/navCurrent.jpg) no-repeat;
    		}
    	#navFaculty {
    		width: 139px;
    		background: url(../images/navFaculty.jpg) no-repeat;
    		}
    	#navContact {
    		width: 137px;
    		background: url(../images/navContact.jpg) no-repeat;
    		}
    #nav li a:hover {
    	background-position: center;
    	}
    #nav li a:active {
    	background-position: bottom;
    	}
    	#nav li a.currentSection,
    	#nav li a.currentSection:hover,
    	#nav li a.currentSection:active {
    		background-position: bottom;
    		}
    Give this way a try. Here's the site I used this for.
    Last edited by michaelespinosa; 09-27-2007 at 12:51 AM. Reason: updated

  • #3
    New Coder
    Join Date
    Aug 2007
    Location
    Ballarat
    Posts
    22
    Thanks
    0
    Thanked 1 Time in 1 Post
    I've just been doing some then.

    Firstly, to work in ie you will need suckerfish, or the whatever:hover javascript on your page. Then after that, its pretty easy.

    Example:

    .aboutus { left: 0px; }
    .aboutus em { background-position: -77px 0; }
    .aboutus:hover em { background-position: -77px -21px; }

    Is a example from a suckerfish image replacement menu.
    The bottom line moves the image up 21 pixels, to reveal its "hover" state. Works great!

  • #4
    Regular Coder
    Join Date
    Sep 2007
    Location
    Raleigh, NC
    Posts
    273
    Thanks
    7
    Thanked 59 Times in 52 Posts
    Quote Originally Posted by arkster View Post
    I have an image that combines normal, mouseover, and active. Using a DIV I hide most of the image to only show a portion of the image. Then during :hover I want the position to change to the highlighted portion of my image. Using negative positoning technique.

    The code I have implemented works flawlessly in FF. But IE will not budge, could anyone please provide some insight?

    I have tried two different ways of trying to get IE to work. One way is setting the css to point to the anchor tag, and another directly on the image. Both work in FF, but neither in IE.
    IE does not support the :hover property on anything but anchor tags, so I would make the anchor tags block so that they expand to their container block, and do the background positioning changes with their a:hover. This will work cross-browser without needing javascript.


  •  

    Posting Permissions

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