This discussion is archived
6 Replies Latest reply: Dec 28, 2012 6:48 AM by Chandran RSS

Tabs with images

Chandran Newbie
Currently Being Moderated
Hi,

I am trying to add an image to a tab using shared components, but images are not displaying when i am running a page.

Please help me on this.

I am using APEX 4.1.1

below is the demo application, which i have created

workspace : Chandu_jnet
username : test
password : test

Thanks
  • 1. Re: Tabs with images
    fac586 Guru
    Currently Being Moderated
    Chandran wrote:

    I am trying to add an image to a tab using shared components, but images are not displaying when i am running a page.
    How? I don't see any attempt to "add an image to a tab". What have you tried?
  • 2. Re: Tabs with images
    Chandran Newbie
    Currently Being Moderated
    Thanks for your quick response Fac, I followed the below

    shared components > tabs > manage tabs > (selected tab) > current image tab = Giving image path as #APP_IMAGES#TESTON.jpg

    same to non current tab

    but this is not working..

    Thanks
    Chandran
  • 3. Re: Tabs with images
    fac586 Guru
    Currently Being Moderated
    Chandran wrote:
    Thanks for your quick response Fac, I followed the below

    shared components > tabs > manage tabs > (selected tab) > current image tab = Giving image path as #APP_IMAGES#TESTON.jpg
    Firstly, image-based tabs will only be displayed when the <tt>#TAB_IMAGE#</tt> substitution string is used in the tab attributes in the page template (see the "Two Level Tabs - Right Sidebar (optional / table-based)" template in your app where I have made this modification).

    Secondly, image-based tabs are subject to a long-unfixed bug where the image source always uses the <tt>#IMAGE_PREFIX#</tt> substitution string (see +{thread:id=2132745}+ among others) which has to be worked round if your images are not in the virtual image directory. One way to do this is using a Dynamic Action to strip out the unwanted <tt>/i/</tt> from the URL path:
    h4. When

    Event: Page Load

    h4. True Action

    Action: Execute JavaScript Code
    Code:
    $('.tab-holder img') // Note that selector for tab images is theme-dependent
      .attr('src', function(i, src) {
        return src.slice(3) // Slice index depends on #IMAGE_PREFIX#: this works when it is "/i/"
      });
    However&mdash;even if this bug is ignored&mdash;using image-based tabs in 2013 is a backward step. Personally I avoid using tabs at all: lists are much more flexible, and easier to implement.
  • 4. Re: Tabs with images
    Chandran Newbie
    Currently Being Moderated
    Your solution is working perfectly, Thanks alot

    Could you please help me another solution also to display the icon symbol in navigation bar entry.

    Ex: Need to display small icon with log out text.

    I tried with navigation bar attributes > icon image attributes = giving image path and this is not working ? is there any bug or something

    thanks
    Chandran
  • 5. Re: Tabs with images
    fac586 Guru
    Currently Being Moderated
    Chandran wrote:
    Your solution is working perfectly, Thanks alot

    Could you please help me another solution also to display the icon symbol in navigation bar entry.

    Ex: Need to display small icon with log out text.

    I tried with navigation bar attributes > icon image attributes = giving image path and this is not working ? is there any bug or something
    Stick to one topic per thread. Mark this thread as answered and start a new one for this question.
  • 6. Re: Tabs with images
    Chandran Newbie
    Currently Being Moderated
    Sure, Thanks

Legend

  • Correct Answers - 10 points
  • Helpful Answers - 5 points