1. Advertising
    y u no do it?

    Advertising (learn more)

    Advertise virtually anything here, with CPM banner ads, CPM email ads and CPC contextual links. You can target relevant areas of the site and show ads based on geographical location of the user if you wish.

    Starts at just $1 per CPM or $0.10 per CPC.

Javascript vs CSS, for mouse over, mouse out

Discussion in 'CSS' started by scutari, May 9, 2008.

  1. #1
    I had this problem over some weeks ago and finally fixed it.
    SEMrush
    You can create a menu with mouseOver and mouse out function using javscript, so that when you put your mouse over the menu the image changes, but this is not good for two reasons:

    one: you may have to build 10 pictures with photoshop if you want to have 5 menu bars,
    two: i have read that SE's does not recognise image links for now.

    So what is the solution you may ask,

    I used a div:hover. It is the only possibility to make it in the css. I tried with a:hover (using background-image) and with li, but no way I could not do it.
    Only using the div:hover. So I create a div and put image as a background then I use the div: hover to display other picture when mouse over.

    Hope to help anyone!
     
    scutari, May 9, 2008 IP
    SEMrush
  2. Greg-J

    Greg-J I humbly return to you.

    Messages:
    1,844
    Likes Received:
    153
    Best Answers:
    0
    Trophy Points:
    135
    #2
    IE < 7 does not understand div:hover. There is no reason to use div's and not li > a, and several reasons not to. If you want your a tag to behave like your div does, give it a proprty of display:block.
     
    Greg-J, May 9, 2008 IP
  3. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #3
    Well that is not true, my menu is working great with IE7, then I want it to display not in a block but inline.
     
    scutari, May 9, 2008 IP
  4. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #4
    Try something like this
    #menu { list-style: none; width: 300px; height: 35px; }
    #menu li{ width: 100px; float:left; background-color: pink;}
    #menu li a { display: block; text decoration: none; line-height 35px; }
    #menu li a:hover { background-color: blue; }

    <ul id="menu">
    <li><a>blah</a></li><li><a>blah</a></li><li><a>blah</a></li>
    </ul>

    Obvs change bck colors for bck images!! And Widths/Heights as you please!! Also untested so check for typo as I am pretty sleepy but it should work!
     
    wd_2k6, May 9, 2008 IP
  5. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #5
    I will try tomorrow but you know I tried with ul, li, a, and none worked. I have seen it somewhere, that kind of menu.
     
    scutari, May 9, 2008 IP
  6. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #6
    :hover does not work in IE < 7 as Greg-J mentioned. You are way better off using li a, as it's the easiest, fastest and uses the least amount of code.

    You can use wd_2k6's model for your menu, though I believe a has to be set to inline-block otherwise it will not show up right in IE6.

    Regards,
    Nick
     
    Hades, May 9, 2008 IP
  7. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #7
    I think IE6 is old, does anyone use it anymore. I bet nowadays people are using quatcore computers. I use IE7 on my pentium 3 dell laptop computer(I use pc at the moment).
    Well I am stating that I have prooved all the ways to do it, using li, a, but not worked, because my menu will display inline and not in block, though I will give a try.
     
    scutari, May 10, 2008 IP
  8. dzdrazil

    dzdrazil Peon

    Messages:
    64
    Likes Received:
    1
    Best Answers:
    0
    Trophy Points:
    0
    #8
    IE6 may be old, but so is a sizable portion of the internet's computers. what kind of traffic you're hoping to get to your site would probably determine your need to support older browsers; generally it's a good idea.

    to get an image to change on hover, use something like this :
    
    a {
    	display: block;
    	width: [B]XXX[/B]px;
    	height: [B]XX[/B]px;
    	background-image: url([B]xxx.jpg[/B]);
    	text-decoration: none;
    	text-indent: -999em;
    }
    
    a:hover {
    	background-position: bottom;
    }
    
    Code (markup):
    Change the stuff in bold to fit your image. Assuming both states are in the same image and you set the height to 1/2 of the image, then by hovering, you change which button is displayed. This keeps both images in one file so there's no delay in loading the hover state, there are fewer calls to the server and you have fewer files to manage.
     
    dzdrazil, May 10, 2008 IP
  9. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #9
    thanks a lot I will give a try, I never heard about this before, especially that kind using one picture for both, a and a:hover
     
    scutari, May 10, 2008 IP
  10. Hades

    Hades Well-Known Member

    Messages:
    1,873
    Likes Received:
    67
    Best Answers:
    0
    Trophy Points:
    150
    #10
    Hades, May 10, 2008 IP
  11. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I tried but didn't work, the pics wouldn't display..sorry
     
    scutari, May 10, 2008 IP
  12. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #12
    your article is interesting..I'll give a detailed check right now, well why didn't you put ads?
     
    scutari, May 10, 2008 IP
  13. iamben

    iamben Active Member

    Messages:
    116
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    73
    #13
    Never read that sprites article, but I've been using a similar method for ages.

    Create the rollover you want as image1 on top, image2 on bottom in the same image.

    Style your link as a block, set it's width and height (half the height of your actual image) and set your image as it's background. Then in your a.whatever:hover you change the background position (move the image up).

    As well as avoiding all the untidy javascript, both parts of your rollover load immediately, so you avoid any waiting for a rollover to load.
     
    iamben, May 11, 2008 IP
  14. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #14
    yes i know now, but will try later
     
    scutari, May 12, 2008 IP
  15. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #15
    Have you still not got your menu working yet?
    dzdrazil has given you the idea, with a followup article from hayes, this is the best option.
    You can use what I posted earlier copy and paste it exactly and you will see that it will work, you can then change the background colours to one image whereby you change the position of it as dzdrazil posted.
     
    wd_2k6, May 12, 2008 IP
  16. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #16
    There are various ways to do this, but the CSS sprites will be the smallest in total file size (and faster loading) than any bloated Javajunk can do. Display block and none for submenus is a bad idea when considering the blind. And, as said before, adding extra divs in a menu is also just bloat.

    Here's an example of a menu (not a drop-down though) using sprites and image replacement. The trick of it is that you have your large background and you just slide it around: http://stommepoes.nl/Menus/spritesmenu.html (hmm, server's down...)

    The newer article: http://www.fiftyfoureleven.com/weblog/web-development/css/doors-meet-sprites
     
    Stomme poes, May 13, 2008 IP
  17. scutari

    scutari Peon

    Messages:
    431
    Likes Received:
    5
    Best Answers:
    0
    Trophy Points:
    0
    #17
    Just tried but not worked, but I think I figured out why, but have no time right now. It isn't such easy. You have to make the photos in photoshop, then make a try, if it does work I have to upload and change much files. So important is to have many posts here as it is a useful thread for everyone.
    Hope to have much more time in the weekend!

    Thanks again!
     
    scutari, May 13, 2008 IP
  18. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Looks like the server is still down Poes!
    I've been reading the article from the fiftyfoureleven, would it be possible to add an li: hover to this, so that the background changes on hover?

    Currently on my menu (square corners) I am putting the li items in Bold as well as an anchor whereby the Bold acts as the right side, to allow for different text lengths. Would be good if I didn't have to place them inside the B tags!
     
    wd_2k6, May 14, 2008 IP
  19. Stomme poes

    Stomme poes Peon

    Messages:
    3,195
    Likes Received:
    136
    Best Answers:
    0
    Trophy Points:
    0
    #19
    Huh, you can't have all the :hover stuff happening on the a? Or do you mean for instance changing a whole background on :hover using sliding doors?

    Yesh my poor server is internetz-deprived because there was a nation-wide ADSL loss by the one company who controls everything (our company is xs4all which used to be independent but the KPN biggies bought them) and while it looks like most people recovered we didn't at home, only at work. So, server will stay down until KPN gets it fixed. Damn.

    But, deathshadow did exactly the same thing as the menu I linked to, and actually I learned the technique from him, though I changed it a bit. You can search for pixelcommander and deathshadow and it's like page 2 or three where ds shows the menu image and then you can look at the code he posts... and yesh, there is an extra element (a span) which holds the image because here the text is also in the image and covering up the real text...

    Ah here: http://forums.digitalpoint.com/showthread.php?t=427632&page=2
     
    Stomme poes, May 14, 2008 IP
  20. wd_2k6

    wd_2k6 Peon

    Messages:
    1,742
    Likes Received:
    54
    Best Answers:
    0
    Trophy Points:
    0
    #20
    That's a wounder regarding the server problems, seek some compo (compensation) !!
    Thanks very much for the link, it is really helpful. I'm a bit confused on how to change the whole background on a hover without the use of an extra element. Or is the extra element required. For example my menu is something like this:

    #menu li {margin:0; padding:0; float: left;}
    #menu li a {display:block; 
    float:left;  
    height:35px;  
    padding:0 0 0 10px; 
    background:url(PICONE) no-repeat; }
    #menu li a b {float:left; display:block; padding:0 25px 0 15px; background:url(PIC2) no-repeat right top;}
    #menu li a:hover, #menu li.current a  {background-position: left bottom; }
    #menu li a:hover b, #menu li.current a b { background-position: right bottom; }
    Code (markup):
    This works fine but it requires the menu to be: <li><a><b>Blah</b></a></li> As Pic one Is the left side of the picture and pic2 is the right side. Is it not possible to do this without the use of the bold or another element.
     
    wd_2k6, May 14, 2008 IP