PSD Rollover Button with image in front stops button from changing state
I have a wide PSD button that changes state when rolled over. I would like to place a PNG image with transparency in some areas over the top of it so that the rollover button shows through the transparent areas of the PNG.
How can you get it to do the rollover effect when the user mouses over the bit of the button that the image is in front of? Is ther a way of making the PNG 'invisible' to the mouse?
I know I could redesign the button so that it includes the image but I'm trying to keep file sizes and load times to a minimum, I use this button a lot on my website with a different on each, and having that number of individual buttons would result in a bloated, slow-loading website.
Hi Abhishek
Thanks for your reply. I was able to achieve the effect I wanted by having the PNG and the PSD Button with the same link and then grouping them. This means I can mouse over the PNG and still get the PSD rollover effect, which is perfect.
However I also have another similar problem. I have some different PSD Rollover Buttons which have some text in front of them (basically it's the button label). On some of these buttons when you roll over the text it prevents the rollover state of the button, and on other buttons the rollover effect occurs as it should, and there doesn't appear to be any consistency about which does what. Grouping or ungrouping doesn't appear to make a difference. Can you help?
Similar Messages
-
In my application, I am attempting to print a document that has both buttons with text and buttons with images, along with plain text.
When I print, the buttons with the images are larger than they ought to be (i.e. they don't fit within the area they were suppose to be drawn within (btw, for this application, I am using absolute positioning)).
However, this does NOT occur with the buttons that have only text and no image.
Can anybody tell me why this might be? It seems that to printing a JButton comes from the functionallity of JComponent.print, which simply sets a few printing flags and calls JComponent.paint.
So whatever changes those flags make, I would think they ought to effect all buttons the same?
Has anybody else run into this problem, and possibly found a solution for it?myJButton.setSize(new java.awt.Dimension(<width>,<height>));
that line should do it. keep in mind that that will not resize your image. since you are using absolute positioning I will assume your button is of constant size. you should manually resize your images to be of the proper size for your buttons. -
Hello everyone,
JDeveloper 11.1.1.7.0
Is it possible to have radio buttons with images instead of plain text?
If not, are you interested in having this kind of feature? I am ;-)
Thx.
Filip HuysmansHi Flip,
The user when switching between modes will fire an event to the server. This even needs to be caught in a bean and set a variable's value to either true or false.
Now you can treat "TRUE" to be in view and "FALSE" to be in edit mode.
Depending on this images can be changed.
Ex: your bean will be like
class catchMode{
private boolean mode;
public void changeMode(ActionEvent ae)
boolean modVal=this.getMode();
if(modVal) //if mode is true; i.e. view mode
this.setMode(false);
else if(!modVal) //in EDIT mode
this.setMode(true);
//Generate accessors for mode
in JSPX:
<af:image source="#{catchMod.mode eq true ? 'view.png' : 'edit.png'}"
Also the partialSubmit for the command component will be set to true
Thanks,
Pandu -
CSS Rollover Menu with Images and Current Page Indicator
Hello.
I have found a very interesting video here: http://www.youtube.com/watch?v=vv8cRYGCvIY about creating a CSS Rollover Menu with Images and Current Page Indicator (I tested it and it is working fine).
I have a web site with 15 pages based on a template and I want to use that video sample to do the same thing on my web site.
Please tell me if I can use the sample from the link above to do that.
What should I change in the css file (what new class should I make) to make this work on a web site based on a template ?
Thank You !I don't know about that video tutorial but a sitewide persistent menu indicator ('you are here' highlighting) is very simple to do with CSS classes.
Details and code examples below:
http://alt-web.com/Articles/Persistent-Page-Indicator.shtml
Nancy O.
Alt-Web Design & Publishing
Web | Graphics | Print | Media Specialists
http://alt-web.com/
http://twitter.com/altweb -
My daughter's older Ipod Touch is having a problem with images becoming pixilated when taken from an e-mail and placed into her camera roll. ( She wants to put on Instagram ) Any help?
I think that may be a consequence of the email provider she is using. Some services (AOL is one example) inspect and modify email attachments, particularly photos, resulting in reduced resolution compared to the email that was sent.
The iPod does not do this. The resolution of the picture in the email she receives will be identical to what is imported. -
Why does the Date Created metadata change when images are exported?How do I stop it from changing?
why does the Date Created metadata change when images are exported? How do I stop it from changing? I must have a prefernce set up wrong.
I don't know what OS you are using, or what application you are using to view the data about your exported files, but on Windows and using Windows Explorer the "Date Created" field relates only to the date that the exported file was created, i.e. if viewed immediately after export it will show the date created as being the same date. In order to view "Capture Date" in something like Explorer, you first have to ensure you have included the Metadata as Conrad outlined above, then you have to adjust the display properties of Explorer to show the "Date Taken" field. Here is an example, part of a folder I exported back on March 3rd, note the difference between that last two dates:
-
How do I stop AE from changing my workspace when loading a project?
How do I stop AE from changing my workspace when loading a project? I've looked everywhere and can't find it. I work on a lot of projects that a peer works on and his screen size is smaller and his workspace is different than mine. Is there a setting I can change so that when I open one of his projects my AE window doesn't change?
No. That behavior is intended. The problem is probably that your colleague uses the "Standard" workspace in a custom configuration and since it is matched by name, it emsses up your "Standard" workspace as well. Therefore advise your colleague to create his own workspace with a custom name and/or create your own custom workspace to be able to more quickly reset things.
Mylenium -
How to stop screen from changing size every time I touch cursor
how to stop screen from changing size every time I touch cursor
If you're using Windows 8 it has to do with the mouse. Go to Control Panel - Mouse - Click Pad Settings. Uncheck pinch zoom then appy.
-
How do I stop GoLive from changing the location of my CSScriptLib.js file?
How do I stop GoLive from changing the location of my CSScriptLib.js file?
I am making rollovers and want my CSScriptLib.js to be in the same folder as my HTML files.
Every time I edit the rollovers GoLIve recreates the path of the CSScriptLib.js to file:///Users/xxx/Library/Preferences/Adobe/GoLive/Settings8/JScripts/GlobalScripts/CSScr iptLib.js so it won't work when uploaded. I always need to edit my HTML before uploading. All I want it to say is src="CSScriptLib.js" as the default.The site file is a database that keeps track of all your assets (and much more), including the scriptLib file. As soon as the page is saved (when you use the site file and it's open) the link will be change to the correct path that will work on the server.
If you're not using the site file you might as well use a text editor, since most of GL functionality is gone. -
How can I stop and restart a .vi with a single front panel button?
Hey guys, a newbie here.
I have a .vi with a stacked sequence. The first few frames are hardware initialization and settings (LIN master node) and the data the hardware should transmit (frame response table). In the next frame there's a loop in which the hardware sends and recieves data (LIN monitor). If I want to change the initialization, settings or data values, I have to stop the .vi and restart it. I was wondering if there is a simple way of doing this with a single click (a button on the front panel).
An alternative would be to put another loop outiside the whole stacked sequence and then run it a single time with a push of a button (the inner loop should let the outer one restart), is that possible?
I hope I made any sense. Thanks for any suggestions.
Tomaz
Solved!
Go to Solution.Ideally, redoing the code with a state machine would be the best way to go, if only so that you can add this powerful tool to your toolbox. That being said, wrapping your existing code in a while loop, with its own stop button to stop the program, will work if executing the entire sequence is ok. Where you might run into problems with this is if there is a step in the sequence that shouldn't be executed again, then it would require wrapping that sequence frame's code in a case statement that executes only the first time through. If you have the time, learning how to use a state machine would be a real benefit, really taking your LabVIEW knowledge to the next step, if you pardon the pun.
Putnam
Certified LabVIEW Developer
Senior Test Engineer
Currently using LV 6.1-LabVIEW 2012, RT8.5
LabVIEW Champion -
Invisible submit button with image rollover
I have a need to combine a rollover image with a form submit
button. I need the submit button to not be visible except for those
that know where to look.
I have a database query that displays rows of data. Each row
has a checkbox to select that item, so the data table is in a form;
the checkbox is a cfinput. In order to pass the parameters of the
checked items, a submit button must be used to submit the form
values.
My need is for the submit button to be the rollover image.
Only users that know where to find the rollover image will be able
to submit the list of checked form values. "Regular" users
shouldn't be in that area of the screen.
So, a combined rollover image submit button is needed.
Ideas? Thanks...Rick...document.yourformname.submit didn't work.
But then discovered that the href value needs to be empty (or
"#") to work. This code works: (rollover images with the submit()
code):
<a href="#"
onClick="javascript:submit()"
onmouseover="MM_swapImage('Image9','','images/change-meeting-date.png',1)"
onmouseout="MM_swapImgRestore()">
<img src="images/blank-hidden-area.png"
name="Image9"
width="111"
height="11"
border="0"
id="Image9" />
</a>
When, in DW, you add the rollover image, you need to leave
the href value empty. I suppose that lets the submit button use the
<cfform action...> value as the results page, letting the
form values pass to the results page.
Now, the next step is to have two different rollover images
with submits() that point to two different result pages, while
still using one cfform. (Two submits in one form, each submit
pointing to a different results page.)
...Rick... -
Folks,
I have buttons in my application which perform a certain functions
by clicking on them.
I want to replace the buttons by gif/jpg images,so that when the
user clicks on them,it does the same set of functionality as discussed
above.
HOW CAN I REPLACE THE BUTTONS with Gif and implement the actionListener??Hello,
there are several methods to set the icon for the button like setIcon and setRolloverIcon etc. You better setContentAreaFilled(false) if you want an icon-only button. Have a look at [url http://java.sun.com/j2se/1.4.2/docs/api/javax/swing/AbstractButton.html]AbstractButton for further information.
Regards,
Tim -
I have the following button design that I'm aiming for:
http://i.imgur.com/nCymK5L.jpg
Could someone advise how I'd add an image to the left side of the button?
Also, if anyone could advise if I can add the thin black border easily?
My current markup:
<Button Click="Example_Click" Margin="112,162,214,40">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="#FFF" BorderThickness="4" CornerRadius="20" Width="125" Height="46">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#CED58F"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<TextBlock Margin="30,6,0,0" FontSize="18" FontWeight="Bold" Foreground="#9EB11C">BUTTON</TextBlock>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
Thanks>>Could someone advise how I'd add an image to the left side of the button?
You could just put a Grid with two columns inside the Border element and then put the image in the leftmost column of the Grid:
<Button Click="Example_Click" Margin="112,162,214,40">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border Background="#FFF" BorderThickness="4" CornerRadius="20" Width="125" Height="46">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#CED58F"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Width="25" Height="25" Grid.Column="0" Source="pic.png" Stretch="Fill" Margin="5 0 0 0"/>
<TextBlock VerticalAlignment="Center" Margin="3 0 0 0" Grid.Column="1" FontSize="18" FontWeight="Bold" Foreground="#9EB11C">BUTTON</TextBlock>
</Grid>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
>>Also, if anyone could advise if I can add the thin black border easily?
You could add another inner Border inside the outer one. Something like this:
<Button Click="Example_Click" Margin="112,162,214,40">
<Button.Template>
<ControlTemplate TargetType="Button">
<Border x:Name="outerBorder" Background="#FFF" BorderThickness="4" CornerRadius="20" Width="125" Height="46">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="BorderBrush" Value="#CED58F"/>
</Trigger>
</Style.Triggers>
</Style>
</Border.Style>
<Border BorderThickness="1" CornerRadius="20">
<Border.Style>
<Style TargetType="{x:Type Border}">
<Style.Triggers>
<DataTrigger Binding="{Binding Path=IsMouseOver, ElementName=outerBorder}" Value="True">
<Setter Property="BorderBrush" Value="Gray"/>
</DataTrigger>
</Style.Triggers>
</Style>
</Border.Style>
<Grid>
<Grid.ColumnDefinitions>
<ColumnDefinition Width="Auto"/>
<ColumnDefinition Width="Auto"/>
</Grid.ColumnDefinitions>
<Image Width="25" Height="25" Grid.Column="0" Source="pic.png" Stretch="Fill" Margin="5 0 0 0"/>
<TextBlock VerticalAlignment="Center" Margin="3 0 0 0" Grid.Column="1" FontSize="18" FontWeight="Bold" Foreground="#9EB11C">BUTTON</TextBlock>
</Grid>
</Border>
</Border>
</ControlTemplate>
</Button.Template>
</Button>
Hope that helps. It should at least get you the idea :)
Please remember to mark helpful posts as answer and/or helpful. -
In JSP, how could we create a button with an image on it.
Normally in JSP we use something like :
<input type="submit" name="ButtonName" value="Submit"> to create a button
and we use < request.getParameter("ButtonName")> to invoke it.
How can we create a button with an image? and how to invoke the button. Thanks.Not too sure how you are invoking with the request.getParameter() (I'm still fairly new to JSP), but you can certainly create a submit button with an image by using:
<input type="image" src="buttonimage.gif" height="100" width="100" name="ButtonName" value="Submit" />(Where or course src, width and height are dependant on your image.)
Hope that helps. -
Is it possible to add a button with image on the title bar(IDR)?
I look through all the buttons in the example, All of them does not with an image on them.
Is it posslbe to put a image on the title bar?
Best regards?
Blake Lehi, Julia,
Sorry for the misleading. I want to add a button below the IDR area. And for common button it's OK.
Now the situation changed , i need to add an icon to a button , to make the user interface more beautiful.
Is that possible?
Best regards,
Thanks very much for your help.
Blake Le
Maybe you are looking for
-
I am considering buying a mac book air and I was wondering if I can still do word processing, make powerpoint presentations and use publisher like i would on a PC? Also if I can then would I be able to continue with work done on the mac book on a PC
-
Photoshop CS2 Text Tool Error Message
This is really weird... I think this is the first time I ever heard of this kind of problem. I just installed Photoshop CS2 and everything seems to work fine instead of the text tool. When I try to use it there is an error message that pops up saying
-
Trading Partner Agreement Not found error in EDI EDIFACT Scenario
Hello all, I am getting the following error in the trace file in the EDI EDIFACT over Generic Exchange Scenario,i have verified the agreement effective to date,i also have checked the enq_orders.properties & enq_ordrsp.properties on both the servers
-
New user with an massive array/string headache
Working with a large (365 source files, 65 mxml files) SDK 3.6.0 project in FB 4.5 and continually get : Resource Path Location Description Type TB4.mxml /the0bot_1/src/the0bot/gui line 1 1067: Implicit coercion of a value of type String to an unrela
-
How to use CASE statement in WDA
Hi All, Can any one Please expain me ' How to use CASE statement in Web dynpro ABAP? ' Please give me an example also. Thanks in Advance !