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 15 of 15
  1. #1
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Question MouseOver image exchange in CSS (no link) and dropdown menus

    basically I want to change the image on mouseover without it being a link to anywhere, not even clickable.
    currently I'm succesfully using this JS method:
    http://jehiah.com/archive/simple-swap
    it works well and rather fast, now what I'm wondering is if there's a method to do this with CSS. I became a CSS fan and addict about 15 minutes ago.
    <!-- currently coding a webpage for a business and decided to try CSS. HAWT. -->
    anyways I search the forums and found nothing.
    Hope someone has mor einfo for me.

    Other than that the company has a nav bar, which needs a dropdown, that doesn't drop down but expands to the right. kinda like this:

    Code:
    nav item #1
    nav item #2 -> sub nav item #1
    nav item #3    sub nav item #2
    nav item #4    sub nav item #3
                   sub nav item #4
                   sub nav item #5
    I need it like this because it would otherwise cover up the other selections in the nav. I have read this, but need to know how to make it appear on the right, change the float?
    Any tips are welcome. I'm real new to CSS as you can read.
    Last edited by Jesus; 07-18-2005 at 10:39 PM.

  • #2
    Regular Coder
    Join Date
    May 2004
    Location
    Berkeley, California Age: 15
    Posts
    398
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Jalenack.com .:. YWDA Founder .:. Rounded Corners Maker 1.1! .:. My Blog
    The hardest thing about teaching is not knowing the right answers, but knowing the right questions - Elisabeth Klein
    Pretty buttons does not a great website make.

  • #3
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks Jalenack, that's exactly what I was looking for. should have thought of looking for horizontal dropdown. oh well, stupid me.

    Any ideas on the mouseover?

  • #4
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well the mouseover I would do in CSS as well. See here. Just view the source.

  • #5
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    first of, thanks _Aerospace_Eng_, but that's not what I want. The javascript method I currently use does not require the image to be a link to anywhere, and that's what I'm looking for in css. I've found how to do it if the image is a link (or link to nowhere), but I don't want the image to be clickable at all. Thanks anyways.

  • #6
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well then I'm afraid you can't do a css rollover then. You can disable a link though with javascript and change the cursor on hover to something else.

  • #7
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can do a roll over on any thing using the :hover. This is part of CSS. Not just links. BTW this works in all NEWER browsers. Read up little one.


    In order to fix it in IE you need to add something like this. Which unfortunatly just adds JS behind the scenes, but if they have a browser that supports :hover you should set it to ignore it.
    http://www.xs4all.nl/~peterned/csshover.html

  • #8
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    thanks for the info SpirtOfGrandeur
    I guess I'll stick to my current mouseover js solution. that solution just ends up in more js than I wanted, I was hoping that a better clean css solution exsists, maybe with a bit js, like the horiz-drop-downs.
    Which btw have been updated by nick rigby:
    http://www.nickrigby.com/article/25/...tal-style-pt-3

  • #9
    Supreme Master coder! _Aerospace_Eng_'s Avatar
    Join Date
    Dec 2004
    Location
    In a place far, far away...
    Posts
    19,291
    Thanks
    2
    Thanked 1,043 Times in 1,019 Posts
    Well using the li:hover js found on alistapart using horizontal drop down menus you can change the background image on hover of the li.

  • #10
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I guess you're right _Aerospace_Eng_
    since I currently don't have access to the website I can't play around with and I'm off work so I'm too lazy atm aswell

  • #11
    Regular Coder
    Join Date
    Jan 2005
    Posts
    221
    Thanks
    2
    Thanked 0 Times in 0 Posts
    there is a simple solution... i.e. is the only common browser that doesn't support :hover well, but it does support behaviors. there is a downloadable behavior file (lost link) that can easily be added to a page and it fixes the problem.

  • #12
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    this one here?
    http://www.xs4all.nl/~peterned/hovercraft.html

    If not please try to find it, this is the only .htc file I found via elgoog.

    Thanks for the tip.

  • #13
    Regular Coder
    Join Date
    May 2005
    Location
    Michigan, USA
    Posts
    566
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by singedpiper
    there is a simple solution... i.e. is the only common browser that doesn't support :hover well, but it does support behaviors. there is a downloadable behavior file (lost link) that can easily be added to a page and it fixes the problem.
    Yes that is the one I showed him.

    Jesus : The point here is that the link i gave you is just a hack to stupid browser. I assume (I might be wrong here) that IE7 will support the :hover and then you will not need the behavior. But the :hover works in all other major browsers because it is part of the CSS standard. That and all you have to do is include it. All other browsers, other then IE, ignore it. It is the best way to go
    Note: I do not test code. I just write it off the top of my head. There might be bugs in it! But if any thing I gave you the overall theory of what you need to accomplish. Also there are plenty of other ways to accomplish this same thing. I just gave one example of it. Other ways might be faster and more efficient.

  • #14
    New Coder
    Join Date
    Jul 2005
    Posts
    57
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok, thanks for the info.
    I am frustrated by IE anyway. Everything looks tight in Opera and FF, what ahppens, IE crys around and I have to code around IE.
    As if the browser isn't standard compliant on purpose.
    Didn't know how to make CSS exchange the images with the .htc file anyway. because I didn't know what to put here:
    [code]body {
    behaviour: url("csshover.htc");
    }

    img:hover {
    ... /* this is where the problem lies */
    }

  • #15
    Regular Coder
    Join Date
    Nov 2004
    Location
    The Netherlands
    Posts
    551
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You can use a div , type text in it, set a width and height, and use text-indent: 999em to hide the text, then overflow hidden to hide scrollbar. This the best way since search engines will see your text while users see your image :P
    CATdude about IE6: "All your box-model are belong to us"


  •  

    Posting Permissions

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