Bitmap rollovers Active state.


Author Message
SqueakyDave

Posted: 3/14/2011
Quote message 

On trying to add different bitmap button states in Artisteer3 I added my own custom icon and opened up the exported template image folder and discovered that Artisteer exports a 3 state png image (Even though the app doesn't allow us to do this) HURRAH!!!!!!!!

I replaced the repeated button state with one of my own. my mouse off and mouse over states work fine but the third state - Active (i guess) doesn't work.

I am trying to match the blog to a site that has navigation buttons that register when pressed. Does any one know what I need to do to turn this on?

thanks in advance
Dave
 
Sarah

Posted: 3/14/2011
Quote message 

The button that Artisteer puts out is passive, hovered, and pressed. It doesn't have an active state like a menu button. If you simply replaced the image with one of your own using the same dimensions and three different graphics aligned correctly in that image, it should work just fine.
 
SqueakyDave

Posted: 3/15/2011
Quote message 

Thanks for the clarification Sarah though I think that this is a bug. According to the drop downs in Artisteer the states should be, Passive, Active and hovered. (in the css of vmenuitem it even seems to have an 'active' pseudo class) I understood that 'active' meant that the button changed when the mouse was over the button area and the left mouse clicked. Bitmaps aside I find that even the text doesn't change on the click but when you go to the destination page.

I'm a bit foxed. I'm trying to match buttons on a website that the blog is going to be part of and they change when clicked (The search button in Artisteer works like this)

Does anyone have any ideas as to how I might achieve this?

Huge Regards
Dave

P.S just to be clear. In the exported site changing the bitmap for my own one works really well except that it doesn't swap to the active or pressed state (icon or text) until it loads another page.

 
SqueakyDave

Posted: 3/15/2011
Quote message 

I'm very new to CSS, so on the off chance that some one who knows what they are doing might care to look at this here is the part of the Artisteer exported style sheet that seems to control the vertical menu items.

(According to W3 schools.com active should always come after hover which it doesn't seem to here. Changin it didn't seem to help though)

Thanks again
Dave

/* begin VMenuItem */
ul.art-vmenu a
{
position: relative;
display: block;
overflow: hidden;
height: 29px;
cursor: pointer;
text-decoration: none;
}

ul.art-vmenu li.art-vmenu-separator
{
display: block;
padding: 15px 0 15px 0;
margin: 0;
font-size: 1px;
}

ul.art-vmenu .art-vmenu-separator-span
{
display: block;
padding: 0;
font-size: 1px;
height: 0;
line-height: 0;
border: none;
}

ul.art-vmenu a .r, ul.art-vmenu a .l
{
position: absolute;
display: block;
top: 0;
height: 97px;
background-image: url('images/vmenuitem.png');
}

ul.art-vmenu a .l
{
left: 0;
right: 50px;
}

ul.art-vmenu a .r
{
width: 947px;
right: 0;
clip: rect(auto, auto, auto, 897px);
}

ul.art-vmenu a .t, ul.art-vmenu ul a
{
font-family: Arial, Helvetica, Sans-Serif;
font-size: 14px;
}

ul.art-vmenu a .t
{
display: block;
position:relative;
top:0;
line-height: 29px;
color: #A1DA2F;
padding: 0 11px 0 55px;
margin-left:0;
margin-right:0;
}

ul.art-vmenu a.active .l, ul.art-vmenu a.active .r
{
top: -68px;
}

ul.art-vmenu a.active .t
{
color: #000000;
}

ul.art-vmenu a:hover .l, ul.art-vmenu a:hover .r
{
top: -34px;
}

ul.art-vmenu a:hover .t
{
color: #A1DA2F;
}


/* end VMenuItem */






 
Sarah

Posted: 3/15/2011
Quote message 

I'm sorry, I thought you were referring to the "button" specifically and not the menu items. The button has a "pressed" class as well while the menu should have an active state as well as hovered and passive.

First of all, did your theme show the active state before you changed graphics, and what version of Artisteer are you using? I've done six separate sites using V3, and all of the active states are working correctly. I couldn't spot anything right away from your code above that looks incorrect.

The only thing I would think is that your new graphic has the image for the active state in the wrong spot since the css just adjusts the top margin for each state so that the correct portion of the graphic shows up.

Sarah
 
SqueakyDave

Posted: 3/15/2011
Quote message 

Hi Sarah
Many, many thanks for taking the time to look into this.

I'm using V3.
The active state only seems to happen if I click the menu item and then it loads the target page. What I would like to happen is that when I click the menu item I get some visual feed back - like the button which I suppose is a 'pressed' class.
That would suggest that the png is fine (I just pasted over the original :-))

I am pretty new to CSS but I understood that the 'active' state happened when the mouse is over the button/link area and the left mouse is clicked? I can't seem to find a reference for 'pressed'

Cheers
Dave
 
Sarah

Posted: 3/15/2011
Quote message 

Aha! I finally see what you are trying to do. Let me help you understand what the active state means in both instances for Artisteer generated code. Active for a button means that the button is active (you are actively pressing it), while Active for a menu item means that you are "actively" on that page. So, the "active" feature won't show until the page is actually up that you are "actively on." The hover feature is designed to let you know that the menu or button is a clickable link.

Hope that makes sense. Do you have the ability to look at the code for the site you are trying to mimic? That might give you a clue by looking at the css used for that site. Do their navigation tabs have a true active state? (In other words, does the navigation item look different when you are actively on the page that you clicked to?) If not, they might just be using a button class as well instead of a true navigation.

 
SqueakyDave

Posted: 3/15/2011
Quote message 

Thanks Sarah
the site is:www.mochoydesign.com and it is one I did using Xara Graphic Designer. So the code is machine friendly but not for human consumption sadly.

I believe the buttons may involve Java script, and they do have 3 states though the 'active' state works as the 'mouse down state as well.

Is there any way I can get the Nav items to work like that out of artisteer?

I guess my fall back is to try to cobble together something in Expression web and put it in a text widget. ( I have a tutorial about sliding doors buttons :-))

I am still a bit fogged as to why active would be different in buttons and menu items. Especially as I can find one type of 'active' in CSS


Many Thanks
Dave



 
Sarah

Posted: 3/15/2011
Quote message 

If you right click on their site, you can view the page source. It allows you to see the code. It looks like they are using javascript for the cute little header hover feature, and most of their styling is done directly within the index.php file.

There navigation is set up completely differently because they aren't using actual menus like Artisteer or WP does, but separate divs. They have a set of code toward the top with the actual links, then below they have a set that controls the images for hover and active states. What I noticed for their active and hover states, is that they add the following which might be making the difference:

<a href="" onclick="return(false);">

However, because the WP navigation system is set up so differently, it would be almost impossible to mimic this code for the actual vertical menu.

Maybe someone else has a simple suggestion for making the active state work for both the pressed item and actually the active page.

 
SqueakyDave

Posted: 3/15/2011
Quote message 

Thanks Sarah.
It's another one of those seemingly simple things that turns out to be a can of worms. :(
 
SqueakyDave

Posted: 3/16/2011
Quote message 

In case anyone is following this I worked around the problem by creating a text widget and adding a CSS based sliding doors button created in expression web. It looks exactly like those on the main site though, so I'm happy.
Just one sad little home button, you can see it here:
http://www.mochoydesign.com/blog

The a:active css makes it change colour when pressed I am still baffled as to why it doesn't seem to work this way in Artisteers CSS. I would be very grateful if anyone could explain this to me.

Huge Regards
Dave
 
Tommy

Posted: 4/1/2011
Quote message 

I am still hoping you get this solved.
 
Marilyn

Posted: 4/1/2011
Quote message 

Awesome website! Love to see yet another graphic designer on the forum. :-)
 
SqueakyDave

Posted: 4/5/2011
Quote message 

Tommy. - Me too. It is with tech support but I suspect they don't think it's a problem. They even told me that Artisteer doesn't support different image states in the menu mouse over even though the bitmap produced by artisteer has them.

Marilyn:
Thanks for that. My wife is the real graphic designer in the team -I'll pass it on