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 5 of 5
  1. #1
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts

    table cell background swap

    can anyone help here. what i need is a script that can swap a table cell's background-image from one to another whilst hovering over it. Probably using css but might be javascript.

    thanks.

  • #2
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    http://www.codingforums.com/showthread.php?t=71384

    there a little mock up on there using the hover class htc file. All you need to do is swap the Background colors with images.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #3
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    thanks very much for the help.

    i currantly have this:
    Code:
             .navigation {
                width: 122px;
                height: 15px;
                background-image: URL(images/navigation/cell_background_one.gif);
                padding-left: 20px;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-right: 0px;
                         }
             .navigation_hover {
                width: 122px;
                height: 15px;
                background-image: URL(images/navigation/cell_background_two.gif);
                padding-left: 23px;
                padding-top: 4px;
                padding-bottom: 4px;
                padding-right: 0px;
                               }
    Code:
    <div class="navigation" onMouseOver="this.className='navigation_hover'" onMouseOut="this.className='navigation'"><img src="images/navigation/news.gif"  border="0" /></div>
    can someone please help me by making the div a hyper link?

  • #4
    Senior Coder
    Join Date
    Jan 2005
    Location
    Memphis, TN
    Posts
    1,801
    Thanks
    8
    Thanked 131 Times in 129 Posts
    Code:
    	.navigation a, .navigation_hover a {
    	    display: block;
    			   }
    Code:
    <div class="navigation" onMouseOver="this.className='navigation_hover'" 
    onMouseOut="this.className='navigation'"><img src="images/navigation/news.gif"  border="0" /><a 
    href="#">&nbsp;</a></div>
    problem is though, your using padding inside the div. Thats going to shift the link over and the whole div won't be a link. Is padding needed?

    If it is dont give the padding to the div. give it to the link. that way the link will be the same outer deminsion as the div and then what ever is in the link will have the padding on it.
    Stop making things so hard on yourself.
    i is tugbucket :: help raise tugburg :: Whitehaven Kiwanis

  • #5
    Regular Coder
    Join Date
    Oct 2005
    Location
    Surrey, England
    Posts
    286
    Thanks
    2
    Thanked 2 Times in 2 Posts
    well the idea is that when you hover over the div an image shifts across a small bit. the padding just makes the image move to fit the background image in.

    how do you mean by set the padding to the image?


  •  

    Posting Permissions

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