SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    CSS or JAVASCRIPT? Image rollovers

    Hi all

    Never really bothered with image rollovers but I've come to the point where I need to use images for a clients navigation and was wondering what is the best method to use, CSS or JAVASCRIPT?

    Possible solutions:

    1. use javascript and place the functions into a external .js to avoid any rollover delay... but what if javascript is turned off or not supported? or does Jquery have any cool stuff for this?

    2. use css with negative margins which is not supported with IE6...

    what does everybody use? whats the best way?

    thanks
    Barry
    The more you learn.... the more you learn there is more to learn.

  2. #2
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    css

  3. #3
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks John have you any examples of this? How do you go about setting these up?

    Thanks
    The more you learn.... the more you learn there is more to learn.

  4. #4
    SitePoint Guru cyjetsu's Avatar
    Join Date
    May 2008
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use css background position. Simply have one image with both images stacked and on hover switch between background position top and bottom.

  5. #5
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,511
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Css
    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/


  6. #6
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the input...

    I've ended up using this method below:

    image = 202 x 12

    Code CSS:
    #navigation a  { display:block; height:12px; width:101px; overflow:hidden; float:left;}
    #navigation a:hover  { display:block; text-indent:-101px; }

    The only problem now is that each link has a different size, does that mean I'll have to create a separate class a for each link?

    Each image = HOME ABOUT CONTACT etc. so you can see what I mean by the size

    UPDATE

    Managed to sort the problem:
    Code CSS:
    #navigation a {margin: 0 20px 0 0;}
    #navigation a.contact  { display:block; height:12px; width:101px; overflow:hidden; float:left;}
    #navigation a.contact:hover  { display:block; text-indent:-101px; }
    #navigation a.home  { display:block; height:12px; width:42px; overflow:hidden; float:left;}
    #navigation a.home:hover  { display:block; text-indent:-42px; }
    #navigation a.about{ display:block; height:12px; width:75px; overflow:hidden; float:left;}
    #navigation a.about:hover  { display:block; text-indent:-75px; }

    It just means that now I'll need to add a .class to every link

    thanks
    Last edited by computerbarry; Dec 19, 2008 at 19:57.
    The more you learn.... the more you learn there is more to learn.

  7. #7
    SitePoint Guru cyjetsu's Avatar
    Join Date
    May 2008
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can have only 1 class for all links of all sizes......Use background position top and bottom on your hover, then you can apply it to all your links, no matter what size the image is and just use a single image for each of your links with the 2 switch/hover images stacked on top of eachother. Background position should be more robust than negative margins too.

  8. #8
    #titanic {float:none} silver trophy
    molona's Avatar
    Join Date
    Feb 2005
    Location
    from Madrid to Heaven
    Posts
    8,271
    Mentioned
    252 Post(s)
    Tagged
    1 Thread(s)
    I am not sure that I have enough information to choose.

    Which technology you need to use depends on what you want to achieve. If the effect can be achieved by using CSS only, then CSS is the way to go. If it is something more sophisticated, you will need Javascript's help to do it.

    What you need to take into account that some CSS must be there, even if you use Javascript, just in case that it has been turned off.

    Regarding JQuery, this library does have some nice effects, but you may want to check the demos yourself.

    http://docs.jquery.com/Main_Page

  9. #9
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys

    cyjetsu - yes I'll look into that process but what I have works great for what am after.
    molona - thanks for the link and pointing out the css, javascript issues, it's basically just a simple image swap I was after nothing fancy, the css I've posted above works great, like I said above it just means that I'll need to apply a .class to every link, but I only have 5 links so shouldn't be much of a problem.

    Something I will be using a lot on some other projects so need to get the best method from the start

    Cheers
    The more you learn.... the more you learn there is more to learn.

  10. #10
    SitePoint Guru cyjetsu's Avatar
    Join Date
    May 2008
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If you really are looking for the best method then using background position for all links should be a lot better than multiple negative margins(if you ever want to optimize your code this should be the first thing you do). I agree that javascript does not seem necessary at all, especially if javascript is ever disabled by the user for some reason it can cause issues.

  11. #11
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by computerbarry
    ...
    The only problem now is that each link has a different size, does that mean I'll have to create a separate class a for each link?
    ...
    No, but if you want to support IE6 an additional span is needed in the links to hold the expanding background. See the example in this thread.
    Happy ADD/ADHD with Asperger's

  12. #12
    WordPress Freelancer banago's Avatar
    Join Date
    Dec 2006
    Location
    Vlorė, Albania
    Posts
    446
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I am for CSS.
    WPlancer.Com - PHP & WordPress Developer
    ProverbHunter - English Proverbs Explained

  13. #13
    SitePoint Mentor bronze trophy
    John_Betong's Avatar
    Join Date
    Aug 2005
    Location
    City of Angels
    Posts
    1,914
    Mentioned
    74 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by computerbarry View Post

    ...
    ...
    Never really bothered with image rollovers but I've come to the point where I need to use images for a clients navigation and was wondering what is the best method to use, CSS or JAVASCRIPT?
    ...
    ...


    http://www.sitepoint.com/forums/showthread.php?t=590135

    From the above post:


    http://www.cssplay.co.uk/menus/menu5teen.html

    Take a look at the above "Sliding Doors Effect" where:
    1. only one image is loaded
    2. a:link shows a section of the image
    3. a:hover shows a different section of the image (which is already loaded)
    4. a:visited shows another section of the image (which is already loaded)

    Stu Nicholls has a vast amount of other button menu options and it is well worth browsing his examples.
    Learn how to be ready for The New Move to Discourse

    How to make Make Money Now with a *NEW* look

    Be sure to congratulate Wolfshade on earning Member of the Month for August 2014

  14. #14
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    6
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would have to recommed css javascript is more prone to error or browser incapability.
    FileFreaks.com Web Hosting
    Freak (n.): Someone so devoted it resembles an addiction.

  15. #15
    SitePoint Enthusiast
    Join Date
    Dec 2008
    Posts
    62
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS is better for SEO

  16. #16
    ¬.¬ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by FileFreaks View Post
    I would have to recommed css javascript is more prone to error or browser incapability.
    Oh you know, CSS has a huge list of browser incapabilities. Did you know that? It is a lot bigger then JavaScript and Jscript differences. JavaScript is no more error prone then CSS, btw, all depended on the one writing the code.

    Quote Originally Posted by axeray View Post
    CSS is better for SEO
    Javascript done right can be just as good as CSS.
    CSS done wrong can hurt your "SEO" you know?

    If you knew anything about "SEO" you would have known that. But I suppose you just wanted to post fluff for your sig link.

    Now that is all out of the way, I personally use the Navigation Matrix.
    http://superfluousbanter.org/archive...trix-reloaded/
    http://www.google.com/search?q=css%20navigation%20matrix

    Or I use the Sliding Door Method. Depending on requirements.
    Last edited by logic_earth; Dec 23, 2008 at 20:33.
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  17. #17
    SitePoint Guru cyjetsu's Avatar
    Join Date
    May 2008
    Posts
    814
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would say CSS is best, as long as you test your code across browsers and debug properly, you should have no problem and I have never encountered any bugs issues with background position property.

    Javascript is not as good in my opinion good because sometimes people turn it off.

    I am interested though, how can CSS hurt your SEO?

  18. #18
    ¬.¬ shoooo... silver trophy logic_earth's Avatar
    Join Date
    Oct 2005
    Location
    CA
    Posts
    9,013
    Mentioned
    8 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by cyjetsu View Post
    I am interested though, how can CSS hurt your SEO?
    Can hurt by stuffing all your CSS in the HTML page, hiding content that could be deemed as spam (eg. keyword stuffing.), etc. I've yet to meet anyone who says "<insert tech> is better for SEO" that actually knows anything about "SEO".
    Logic without the fatal effects.
    All code snippets are licensed under WTFPL.


  19. #19
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by axeray View Post
    CSS is better for SEO
    No, it's not. Search engines can index and rank table-based layouts just fine. CSS has benefits in many other areas however, fortunately for everyone concerned, the search engines tend to take advantage of those benefits indirectly when the sites are coded properly.

  20. #20
    SitePoint Wizard
    Join Date
    Dec 2005
    Posts
    1,738
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    the search engines tend to take advantage of those benefits indirectly when the sites are coded properly
    Yes dan nice clean semantic markup with good css code, basically I've changed the indent for the rollovers to display the other half of the image and what I've learned so far I can't seem to find a better solution for what I'm after anyway.

    Maybe some other techniques mentioned above might be better in a different scenario, but for a basic image rollover I can't fault it. IE6 etc works great!

    I'm starting to use Javascript a lot more lately but again certain functions to the site will be unavailable if javascript is not supported or turned off. So for this project CSS seems to do the job... thanks guys for all the input
    The more you learn.... the more you learn there is more to learn.

  21. #21
    SitePoint Addict Newviewit's Avatar
    Join Date
    Apr 2008
    Posts
    241
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    don't ues java unless you have to

    css is best for seo and very easy to do
    UNLIMITED Domains - UNLIMITED Disk Space - UNLIMITED Bandwidth
    *Black Friday - Website Hosting Deal of The Year - 50% OFF!

  22. #22
    SitePoint Zealot busylinks1's Avatar
    Join Date
    Nov 2008
    Posts
    160
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think CSS is the best because all the scripts are loaded in to PC's memory if you use a lot of scripts then it causes the PC slow during use of that web site...
    And clients get irritate from it and think as they have viruse like things....

  23. #23
    SitePoint Member
    Join Date
    Jan 2009
    Location
    Scotland
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS is better because it is more likely that people will not hae it turned off. It is unlikely that poeple will have javascript turned off but some people do. Also CSS works in mobile browsers and mostly javascript dosnt.

  24. #24
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,194
    Mentioned
    17 Post(s)
    Tagged
    5 Thread(s)
    If the navigation won't change dynamically then its sprite time.

  25. #25
    SitePoint Enthusiast
    Join Date
    Jan 2009
    Location
    Portugal and Czech Republic
    Posts
    35
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    There is a reason, at least one, for JavaScript existence: it works and it's in large use in the world of World Wide Web. So... if individuals decide to turn it off, I will not take that in consideration. They may as well turn off graphics or block their browsers in the firewall. There hundreds of thousands of features and functions out there in JavaScript. Following that kind of blackmailing from some users is something that I refuse.

    This said, I use JS for rollovers.


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
  •