Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
Like Tree2Likes
  • 2 Post By Vapr_Arts

Thread: Navigation help

  1. #1
    Junior Member
    Join Date
    May 2015
    Posts
    1
    Member #
    49540

    Navigation help

    So I am creating a website for my project on a movie but I am stuck on creating a navbar that can show a different image as the mouse rolls over it.

  2.  

  3. #2
    Senior Member Vapr_Arts's Avatar
    Join Date
    Oct 2013
    Location
    California
    Posts
    1,930
    Member #
    37412
    Liked
    544 times
    Css has a rollover property you can use. Honestly images as buttons are not the way to go anymore anyway but if you give us more info we can help you better find the solution.

    At the very least look into the Rollover css property(or is it an attribute?)


    Sent from my iPhone using Tapatalk
    timbo89 and bleau canon like this.

  4. #3
    Junior Member
    Join Date
    May 2015
    Location
    United States
    Posts
    1
    Member #
    49819
    Quote Originally Posted by Omhindman View Post
    So I am creating a website for my project on a movie but I am stuck on creating a navbar that can show a different image as the mouse rolls over it.

    Use some Javascript for this function you will easily be able to do that.
    Last edited by Belcher; Nov 11th, 2016 at 05:48 AM.

  5. #4
    Senior Member timbo89's Avatar
    Join Date
    May 2015
    Location
    Adelaide, South Australia
    Posts
    126
    Member #
    49722
    Liked
    26 times
    Do what Vapr_Arts said, the css :hover function is great, you can use it on any element, that combined with a css fade in looks pretty good on navigation and menus, i would suggest still including text on your buttons though, it's good for SEO and images don't always render as well as you'd like them to on all devices.

  6. #5
    Junior Member
    Join Date
    May 2016
    Location
    Bangalroe, India
    Posts
    3
    Member #
    54168
    Use CSS Image Sprites for rollover navigation.

    Image Sprites

    An image sprite is a collection of images put into a single image.

    A web page with many images can take a long time to load and generates multiple server requests.

    Using image sprites will reduce the number of server requests and save bandwidth.

    To read more, visit: CSS Image Sprites

  7. #6
    Member
    Join Date
    Aug 2013
    Posts
    89
    Member #
    37057
    He still requires a graphic program for images, whether that is Photoshop, Illustrator or both.

  8. #7
    Junior Member
    Join Date
    Jul 2016
    Location
    Lagos, Nigeria
    Posts
    1
    Member #
    54611
    Do you just want to change between 2 images or several image for each nav button.

  9. #8
    Junior Member
    Join Date
    Aug 2016
    Posts
    1
    Member #
    54843
    I wanted to do this for my own pet project. I used CSS rollover and that worked out fine

    here are the basics: CSS :hover Selector



    Magento 2 - Magento webshops


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 10:20 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com