Results 1 to 6 of 6

Thread: Rollover Image

  1. #1
    Join Date
    Sep 2009

    Rollover Image

    Just want to know if someone could explain how this was accomplished:

    On the website, modcloth.com, the top horizontal navigational menu.....both the text and the box change change colour as you rollover it.

    Are these just two different images, and you set which one is displayed using CSS?

    Or is it not an image, but rather just text within a div....and they have the background colour of the div and the colour of the text change on rollover using CSS?

    Images or text within a div???

    Any help is always very appreciated, thanks!

  2. #2
    Join Date
    Jun 2008
    I did not look at your page, but the right way to do this is via CSS Sprites, which work the way you describe.

    There are tricks to do this, and I put up a little template page which explains it all for a friend...

    The sprites on the page are in Polish, but the instructions are all in English and you can even practice with them.


    Now that you know what they are called, you can prowl Google for more tutorials if you need them:


    Privacy Policy Generator

  3. #3
    Join Date
    Sep 2009

    Rollover Image


    I appreciate your reply, thank you very much. One question though:

    Looking at their menu (modcloth.com) or any menu for that matter, would best practice be to use one large image for all the categories....or should I slice up the header creating individual images.

    My assumption would be to create 2 images.....one image containing the whole menu (products, about us, contact us, etc.).....and then the second image would be the menu again in a different colour....and then use the sprites to get the rollover effect. Would you agree? Or do I need individual images for each rollover (products, about us, contact us, etc)?

  4. #4
    Join Date
    Jun 2008
    It's really up to you how you do it.

    Sprites are far superior to rollovers as there is no delay when the image switches, you instead use CSS to simply change the position of the background. The other advantage is that you can use plain text in front of the dynamically changing background image - Google likes that and your page will index better as you will then have hyperlinked keywords instead of images.

    Usually rollover javascript is not used with sprites, so the common practice is to have all of your sprites on one image that simple changes position through a "div window". No Javascript, just CSS does the trick! Why resort to messy Javascript if you do not have to.

    Take a look at my demo page, you can see how it was done with one button.
    Here is another page I built where I used Sprites:
    The Guitar Tuner

    There, sprites were used as all elements... background sprites on one image and rollover sprites on another. Background sprites only changed when the page changed from say a page to a post. RSS and buttons were rollover effect sprites.

    THere is also a webpage out there called "SpriteMe" that generates sprites for you! Google it to find out more.

    Good luck.
    Last edited by donatello; 09-17-2011 at 05:38 AM.

    Privacy Policy Generator

  5. #5
    Join Date
    Sep 2009

    Rollover Image


    Once again, really appreciate you replying. I'm still a little confused, and i think it may be the way i'm explaining myself. I know how to use sprites having incorporated them into a site i had built. I had a background that comprised of many images.....and instead of breaking them up, i used one big image, and sprites to display the individual images properly....this allowed the site to load much faster.

    But i'm stuck with using sprites in a menu. Your menu, for example...tuners, forks, software.....are all of these individual div's?? I can't figure out how the web browser would know that the user has his mouse over a menu button unless each menu button was in its own div.....and sprite css was written for each div to allow it to change state, am i correct?

    PS - The text for your menu buttons, is that just plain text or did u use an image?

    Thanks again donatello

  6. #6
    Join Date
    Jun 2008
    That site is built using WordPress. Buttons are all text.

    Text in your buttons works best for Google indexing too.

    Privacy Policy Generator

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



X vBulletin 4.2.2 Debug Information

  • Page Generation 0.09584 seconds
  • Memory Usage 2,886KB
  • Queries Executed 15 (?)
More Information
Template Usage (32):
  • (1)ad_footer_end
  • (1)ad_footer_start
  • (1)ad_global_above_footer
  • (1)ad_global_below_navbar
  • (1)ad_global_header1
  • (1)ad_global_header2
  • (1)ad_navbar_below
  • (1)ad_showthread_firstpost_sig
  • (1)ad_showthread_firstpost_start
  • (1)ad_thread_first_post_content
  • (1)ad_thread_last_post_content
  • (1)footer
  • (1)forumjump
  • (1)forumrules
  • (1)gobutton
  • (1)header
  • (1)headinclude
  • (1)headinclude_bottom
  • (6)memberaction_dropdown
  • (1)navbar
  • (4)navbar_link
  • (1)navbar_moderation
  • (1)navbar_noticebit
  • (1)navbar_tabs
  • (2)option
  • (6)postbit
  • (6)postbit_onlinestatus
  • (6)postbit_wrapper
  • (1)spacer_close
  • (1)spacer_open
  • (1)tagbit_wrapper 

Phrase Groups Available (6):
  • global
  • inlinemod
  • postbit
  • posting
  • reputationlevel
  • showthread
Included Files (26):
  • ./showthread.php
  • ./global.php
  • ./includes/class_bootstrap.php
  • ./includes/init.php
  • ./includes/class_core.php
  • ./includes/config.php
  • ./includes/functions.php
  • ./includes/functions_navigation.php
  • ./includes/class_friendly_url.php
  • ./includes/class_hook.php
  • ./includes/class_bootstrap_framework.php
  • ./vb/vb.php
  • ./vb/phrase.php
  • ./includes/functions_facebook.php
  • ./includes/functions_calendar.php
  • ./includes/functions_bigthree.php
  • ./includes/class_postbit.php
  • ./includes/class_bbcode.php
  • ./includes/functions_reputation.php
  • ./includes/functions_notice.php
  • ./packages/vbattach/attach.php
  • ./vb/types.php
  • ./vb/cache.php
  • ./vb/cache/db.php
  • ./vb/cache/observer/db.php
  • ./vb/cache/observer.php 

Hooks Called (70):
  • init_startup
  • friendlyurl_resolve_class
  • init_startup_session_setup_start
  • database_pre_fetch_array
  • database_post_fetch_array
  • init_startup_session_setup_complete
  • global_bootstrap_init_start
  • global_bootstrap_init_complete
  • cache_permissions
  • fetch_threadinfo_query
  • fetch_threadinfo
  • fetch_foruminfo
  • load_show_variables
  • load_forum_show_variables
  • global_state_check
  • global_bootstrap_complete
  • global_start
  • style_fetch
  • global_setup_complete
  • showthread_start
  • showthread_getinfo
  • strip_bbcode
  • friendlyurl_clean_fragment
  • friendlyurl_geturl
  • forumjump
  • cache_templates
  • cache_templates_process
  • template_register_var
  • template_render_output
  • fetch_template_start
  • fetch_template_complete
  • parse_templates
  • fetch_musername
  • notices_check_start
  • notices_noticebit
  • process_templates_complete
  • friendlyurl_redirect_canonical
  • showthread_post_start
  • showthread_query_postids
  • showthread_query
  • bbcode_fetch_tags
  • bbcode_create
  • showthread_postbit_create
  • postbit_factory
  • postbit_display_start
  • postbit_imicons
  • bbcode_parse_start
  • bbcode_parse_complete_precache
  • bbcode_parse_complete
  • postbit_display_complete
  • memberaction_dropdown
  • tag_fetchbit_complete
  • forumrules
  • navbits
  • navbits_complete
  • build_navigation_data
  • build_navigation_array
  • check_navigation_permission
  • process_navigation_links_start
  • process_navigation_links_complete
  • set_navigation_menu_element
  • build_navigation_menudata
  • build_navigation_listdata
  • build_navigation_list
  • set_navigation_tab_main
  • set_navigation_tab_fallback
  • navigation_tab_complete
  • fb_like_button
  • showthread_complete
  • page_templates