The solution presented here is an alternative to the Rollover Buttons Using CSS (Two Images Per Button) solution.

For this solution I use:
    - One image per button needed
    - CSS
    - Content Editor Web Part

I also like to refer to this solution as the "stacked image" solution.

Step 1 - Create The Necessary Rollover Button Images

Use the imaging tool of your preference, such as Photoshop or Fireworks, to create an image for every button you will be needing for your particular case. You cann also get the buttons from a reliable, trusted source. Make sure that all of your buttons are of the same exact size and shape so it looks better. Once you have created or acquired the
Picture
images, upload them to the SharePoint library of your choice.

For our example, we're going to pretend that our image is contactus.png.


Step 2 - Create The Necessary CSS Styles

Within your copy of Microsoft's original css file, create the following classes,

#contactUs
{
  display: block;
  width: 210px;
  height: 106px;
  background: url('https://PathToImageLocation/contactus.png') no-repeat 0 0;
}


#contactUs:hover
{
  background-position: 0 -106px;
}


#contactUs span
{
  display: none;
}

 
Change width and height to match your image width and height, as well as the location to the file itself.

Step 3 - Display The Button On The Appropriate Page

Add a Content Editor Web Part to the page where you would like to display the button. Make all applicable changes to the web part, such as giving it a meaningful name, removing the chrome, etc.

Select the Content Editor Web Part Click here to add new content link.

Locate the HTML icon within the Markup section of the ribbon, select it, and then select Edit HTML Source.

Type in or copy and paste the code below in the HTML Source web page dialog that displays:

<DIV align=center><A id=contactUs title="Contact Us" href=DestinationURLhere target=""></A></DIV>

Replace the id value above with the name of your own CSS, as well as the title applicable to your own situation. Don't forget to also replace the URL to point to the file, site, Web site, library, etc., applicable to your needs.


Your comment will be posted after it is approved.


Leave a Reply.