use image as title tabs - Mootabs

Greetings,

Today I need your help.

I'm trying to put a picture in the title of the tabs generated by Mootabs.

I have tried to put in the html title tag that calls the image but does not work :cry: .

Anyone have an idea how I can achieve what I want? ie change the title of the tab for an image?

I appreciate your help, :D

Hello,

Even I could not find the solution,

Someone knows how to place an image in the title of a
tab? :cry:

I installed this extension to check it out -- looks like you can't class or ID the tabs -- bummer. So we can't use CSS.

What you'd probably have to do is use JavaScript to insert a new image element inside the tab. I would refer you to the MooTools API, but the code would look something like:

Code:

---

$$('#mootab_1 li').each( function(item) {
    item.inject(new Element('img', { src: 'pathToImg/' + item.getProperty('title') + '.jpg', alt: item.get('text')));
});

---

I haven't tested this code (I only have a few mins), but in theory it inserts a new image element inside the tab. It's name would match the title tag of tab element (so it's up to you to place and name the images appropriately).

Hi Medianomaly,

Thanks for trying to help me,

Where I have to insert this code? Do not know much about javascript.

Thanks again :D

There are a few ways you can do it --

1. Place it in an external .js file and include it in the header of your page. In this case you'll need to wrap that in a function that waits until the DOM is loaded. See: http://mootools.net/docs/core/Utilities/DomReady.

2. Paste it at the bottom of your template file. In this case you'll need to do a check to see if tabs are on the page to avoid JS errors. You'd wrap the code in something like: "if $("#mootab_1") { }".

3. Insert it into a TL element and include it as a module or content element. Not sure exactly what considerations you need when it comes to pasting JavaScript into TL -- you will probably need to add <script> to your allowable tags in TL settings.

No guarantees that code is bug free -- even if you have a tiny bit of JS knowledge, a look at the Mootools API docs can help you iron anything out -- http://mootools.net/docs/core/

Keep in mind, replace 'pathToImg/' with wherever you're storing your images (and make sure their names are identical to the tab's title tags). Also, make sure the ID of your "Mootab" element in the HTML matches the part that says #mootab_1 in the code as well.

I perform some tests.

I very much appreciate your help,