Juryiel

Is it possible to set clickable areas in buttons to be non square? I want to make some buttons athat are different shapes (not circular or triangle either) and cant seem to find out how

Haliken

I (emphasis on I) could do it, it's a little hard though. If you REALLY want me to give a method to do this then leave a reply saying you do. I'm being weird about it becaue it's REALLY hard to give buttons a different clickable area.

Enok

Juryiel

Really want to, my entire layout is dependant on it, and though im fairly new at XML, im very good at HTML and will pick it up quick :P Thanks in advance

Haliken

Ok, glad to hear it. Then I guess I better start typing it all out. I'll leave this post here, so you know I'm working on it, then make a second post with all the info. It's semi-complicated and, uhm, I wanna make sure I explain it so it makes sense.

Enok

Haliken

OK.
First let me explain a concept I call "button shields"

Let's say we have a button that is 100 pixels tall and 20 pixels wide. Imagine it: it's a tall rectangle. But let's say we want it to act like two seperate buttons (one 20x20 and one at the bottom 20x20. Because the EQ UI doesn't allow more than one of a ingle button we can't have two seperate buttons. But we CAN make one button and put and invisible area over the middle section so it seems like there are two different buttons. How this is accomplished is by making an invisible barrier that cover the button from 0 (x coord on the button) by 20 (y coord on the button) and make the invisible barrier have a width of 20 and a height of 60. Can you imagine this? It's a tall rectangular button with an invisible area (also a rectangle) over the middle where clicking doesn't click the button or highlight it during mouseover, but the areas at the top and button still function properly.

The invisible barrier has to be made of a TabBox, it should be empty (so no one can see it), this is because tabbox's don't get sent behind other objects if an object that is layered behind them is clicked. If the invisible layer were an invisible button, when you clicked on the button that it was over, the invisible button would be sent behind it and would no longer be a barrier.

So, how can you use this to shape buttons? VERY carefully. Let's say you want to make an I-shaped button.

First, you'd make a vertical rectangular button (I'll make sucky ascii diagrams):
000000
000000
000000
000000
000000
000000
000000
000000

Then you'd put two invisible tabbox's over the left and right center area of the button (X's represent invisible tabbox's):
000000
000000
XX00XX
XX00XX
XX00XX
XX00XX
000000
000000

Now you have an I-shaped button! For things like circles you'd need many more carefully placed invisible tabbox's. If you don't know how to make a tabbox invisible, or you want an example for how to make a button a certain shape that you want, leave a post. I just got in a Plane of Innovation group so I'm outta here for a bit. I'll post more later.

Enok

Juryiel

Brilliant I was trying something similar with placing stuff over buttons but it wasnt working gooing to try this asap

Haliken

Yay! Glad you were already on the right track! Only downside is you can't do this on tabbed windows =/ well not easily.

Enok

MrWynd

very well thought out!

__________________

57 retired Bard Quemn
54 Beastlord Shaung
Brell Serilis
Admin at allakhazam.com am MMORPG site

Juryiel

How do you make invisible tabboxes :P I tried removing the pages but it crashes, and if i dont remove the pages, even if i leave it empty i can see the outline of it

Juryiel

Through some weird editing and workarounds I've managed to make a totally transparent tabbox :P wuwu

Haliken

Ok, glad you solved it, all I did was make a 1 by 1 invisible pixel graphic, and made new tabbox templates that used that graphic ( I just used the upper left most pixel from windows_pieces01.tga since it's transparent ). Is easiest way in my opinion.

Enok

Juryiel

exactly what I did

Juryiel

Hmm new problem, I need to connect the images of my buttons, (they connecto to make one big picture thing) and doing so causes teh transparent part of one button to overlap with the image part of anotehr button. So like I have two buttons , the image parts connect, and the transparent parts of each button overlaps the image part of the other. That means I can't have just one button be on top (if thats even possible :P ) Whichever button is on top will have a transparent part on the other button. Any workarounds for this or did i just waste all my time figuring this stuff out? )

Haliken

I don't exactly follow what you mean but I have some idea. Is there any way you can modify the graphics so they won't be overlapping or so that the buttons match up exactly graphics-wise?

Enok

P.S. - Goin' to sleep, I'll check this thread tomorrow.