Tab images

Forums Dynamic Forms for SharePoint Tab images

Tagged: 

Viewing 4 reply threads
  • Author
    Posts
    • #28876
      William Summers
      Participant

      Here is a crazy question. Is there an easy way to place an image inside the tab box? I looked at the ID and class but cannot seem to figure it out. Essentially, I want to still show the tabs but it have a background image. I searched through the forums but did not find a thread on it. Thanks!

    • #28880
      Alexander Bautz
      Keymaster

      This is easier then you think – just add an <img> tag in the “Tab name” field instead of just the tab label.

      Alexander

    • #29312
      William Summers
      Participant

      Of course this worked…. I cant believe I didn’t try it. One last question on the topic. Keith and I were trying to figure out a way to use an image in place of the tabs which worked. Searching through the forums we were then trying to figure out how to use that image as a link.

      Essentially, when you click on a standard tab in the form it does not require the page to be reloaded. If I use an image for each tab, I lose this ability. If I add a hyperlink it refreshes the page of course. My thought was to draw an image map over the clickable area but this will cause the page to reload as well.

      Any ideas how one might use an image in each tab and still keep the navigation functionality that will not cause the page to reload upon clicking it?

      As always, many thanks

    • #29314
      William Summers
      Participant

      I realized the above is gibberish…. Trying again.

      I am using three images, one for each tab. I would like to know if I can use an image map around one of the words to navigate between tabs without the page refreshing.

    • #29325
      Alexander Bautz
      Keymaster

      I think this is better solved by splitting each “tab” in is own image – all in blue (and keep all tabs visible at all times) – and then applying this Custom CSS:

      li.tabBase{
          padding:0!important;
      }
      #tabWrapper .tabBase a{
          border:none!important;
          margin-right:-10px;
      }
      #tabWrapper li.tabSelected a{
          background-color:transparent!important;
      }
      #tabWrapper .tabBase img{
          opacity:0.5;
      }
      #tabWrapper li.tabSelected img{
          opacity:1;
      }
      #tabWrapper .tabBase + .tabBase img{
          margin-left:-37px;
      }

      Alexander

Viewing 4 reply threads
  • You must be logged in to reply to this topic.