Draw shape on top of button with existing image
Hi all,
I have a button with an action. The action has an associated image (i.e. the Action.SMALL_ICON value is set to be an image from my resources).
I want to draw on top of my button and add a little triangle in the corner. I don't want to add this to the original image, nor add it to the action (if such a thing were even possible), because I don't necessarily want it always drawn. (Note, this is part of implementing my "Adobe-like popup buttons in a toolbar," which I already have another post on).
What's the best way to add this. Do I add it to the draw method of the button? Of the action? Something completely different?
Thanks!
Sam
Darryl.Burke wrote:
You really find it easier to do custom painting?
Well, in this case, yeah. The method above was really simple (ignoring the settings of the ints, which are just to make it easy to read, it's only like three lines of code).
I can be sure that there will always be a triangle, perfectly set in the corner of the button, pointing directly down into the corner. I don't need to worry about whether they have the font installed and whether it will look the same on a PC or Mac. When I position it I don't need to do any weird rotating of the character to 45 degrees. I can put it so that it's in the bottom-right corner without needing to first figure out the width and height of the character in the user's version of the font. Also, it will continue to work perfectly well if I decide to add text to the button, which would be very complicated with your method if it's even possible.
I liked your suggestion as thinking outside the box, but in the end I thought this was easier and more effective.
Thanks for all the help though!
Similar Messages
-
Problem with aligning buttons with background image.
Dear all,
Just an introduction, I am a newbie to dreamweaver and currently hopelessly lost in solving some problems, and wish to seek your advice and help here.
I am creating a webpage with a background that shows a line across near the top of the site. I placed an image with the line as background under the page properties. I am placing buttons on that line, so when I mouse over the buttons, the part of the line above the buttons will darken, showing that the button has been selected.
The image of the buttons include the darken lines and the words. I can align the button lines with the background line when viewing the site in 100%, but on other resolutions or if I zoom in 125% or 150%, the lines are not aligned.
Here is a picture of my dreamweaver working area, where I manually adjust the buttons to align with the background line. The button lines are already not aligned here, but they look aligned on site in 100%.
[IMG]http://i1126.photobucket.com/albums/l614/artbox11/pic1.jpg[/IMG]
Here are how the lines look at 150%. The arrows show where the button lines are not aligned with the background image line.
[IMG]http://i1126.photobucket.com/albums/l614/artbox11/pic2.jpg[/IMG]
Can anyone advise how I can align the button lines with the background image line so that whichever resolution I view the lines will be aligned from side to side? Any tips and advice will be greatly appreciated, as I have been looking around DW for a day now and cannot find out how to fix this.
Thank you!!Dear Murray, thank you for offering to help, much appreciated.
Here are my codes. I did not write any of the codes though, I just use the design tab and built tables and insert images.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Metamorfic</title>
<script type="text/javascript">
<!--
function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;
function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
//-->
</script>
<style type="text/css">
<!--
body {
background-image: url(Metamorfic%20Site%20Files/BG.jpg);
.style3 {font-size: xx-small}
-->
</style>
<script type="text/javascript" src="/jwplayer/jwplayer.js"></script>
</head>
<body onload="MM_preloadImages('Metamorfic Site Files/Button - About 2.jpg','Metamorfic Site Files/Button - Contact 2.jpg')">
<table width="800" border="0" align="center">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td height="187"> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td width="116" height="32"> </td>
<td width="552"> </td>
<td width="110"> </td>
</tr>
</table>
<table width="1100" height="50" border="0" align="center">
<tr>
<td width="1094" height="46"><table width="672" height="34" border="0" align="center">
<tr>
<td width="666" height="30" align="center" valign="bottom"><img src="Metamorfic Site Files/Button - About 1.jpg" width="122" height="28" id="Image3" onmouseover="MM_swapImage('Image3','','Metamorfic Site Files/Button - About 2.jpg',1)" onmouseout="MM_swapImgRestore()" /><img src="Metamorfic Site Files/Button - Contact 1.jpg" width="110" height="28" id="Image6" onmouseover="MM_swapImage('Image6','','Metamorfic Site Files/Button - Contact 2.jpg',1)" onmouseout="MM_swapImgRestore()" /></td>
</tr>
</table></td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
<td height="340"> </td>
</tr>
</table>
<table width="800" border="0" align="center">
<tr>
<td width="300" align="center" valign="middle"> </td>
<td width="25" align="center" valign="middle"> </td>
<td width="25" align="center" valign="middle"> </td>
<td width="25" align="center" valign="middle"> </td>
<td width="25" align="center" valign="middle"> </td>
<td width="25" align="center" valign="middle"> </td>
<td width="25" align="center" valign="middle"> </td>
<td width="25" align="center" valign="middle"> </td>
<td width="25" align="center" valign="middle"> </td>
<td width="300" align="center" valign="middle"> </td>
</tr>
</table>
<p> </p>
</body>
</html> -
Cross browser CSS Buttons with background images
Hi All,
I have to make a button for a website in which the labels
will be DB driven, so i came up with css to make such buttons, but
the problem is i need the buttons to work in almost all browsers
(from version 5 - 7 IE, FF 1.0 -2.0, Opera 7 - 9 Netscape 6- 9,
safari and Mac IE and FF), The buttons are also designed in a
specific manner (i.e the button label will be having a break if
there are two words in it and will be aligned center to the
container. the edges of the button are curved and has a gradient
effect.)
I am not able to get the text centrally aligned also the text
goes off the container and gets hidden behind the right side image
in FireFox but in IE it manages to stretch the container but
doesn't gets aligned to the center, thats because i guess i am
specifying width to the container.
Any Help will be highly appreciated.
Thanks
VinayHi All,
I have to make a button for a website in which the labels
will be DB driven, so i came up with css to make such buttons, but
the problem is i need the buttons to work in almost all browsers
(from version 5 - 7 IE, FF 1.0 -2.0, Opera 7 - 9 Netscape 6- 9,
safari and Mac IE and FF), The buttons are also designed in a
specific manner (i.e the button label will be having a break if
there are two words in it and will be aligned center to the
container. the edges of the button are curved and has a gradient
effect.)
I am not able to get the text centrally aligned also the text
goes off the container and gets hidden behind the right side image
in FireFox but in IE it manages to stretch the container but
doesn't gets aligned to the center, thats because i guess i am
specifying width to the container.
Any Help will be highly appreciated.
Thanks
Vinay -
Hi,
I need to put loaded image in the button object because I
want to use rollover fonction on loaded image.
Is there a way to do that ?
thank you :)You should read up on skinning your components. the first
example in this QuickStart
http://www.adobe.com/devnet/flex/quickstart/skinning_components/
deals exactly with what you are talking about. -
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. -
Button with full background image
Hello,
I want to have a button with a image as background.
The background image has to fill the complete button background.
If you see the screenshot (url) , there is space around the image.
I have add a red border to see that the button size != background image.
I also tryed style with -fx-background-repeat: repeat-x;
[http://office.techniconsulting.be/~peeters/button.png]
Button button = new Button();
ImageView imageViewOn = new ImageView();
imageViewOn.setImage(....);
ImageView imageViewOff = new ImageView();
imageViewOff.setImage(imageViewOff);
button.setText(this.name);
button.setGraphic(imageViewOff);
button.setContentDisplay(ContentDisplay.CENTER);
button.setStyle("-fx-border-color: red; -fx-border-width: 1;");Maybe not the perfect solution, but you can make the background transparant of the button so you won't see the button.
button.setStyle("-fx-background-color: rgba(0%,0%,0%,0)}");Else I would say, don't use a button and create your own.
-Stackpane
--ImageView with image
--text
For events, you can put events on the StackPane..
Edited by: FXdude on 25-jan-2013 5:02 -
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. -
Drawing a shape on top of a screen shot
I am creating a visual tutorial. I have taken a screen shot and wish to draw a transparent oval on top of a portion of the screenshot to call attention to a certain action. I can not get the oval on top of the screenshot as an inline (moves with text) image. It would also be great to group the oval on the screen shot so it would remain in place.
Thank you.Welcome to the Apple forums
I'm not sure what your question has to do with Pages unless you are inserting the screenshot into Pages & then manipulating it.
I think it would be easiest to do the annotating of the screenshot in Preview then save the image. If you then want to insert it into Pages it would be a single, uneditable image.
To do it all in Pages you need to do the work with floating objects since you can't put one inline object on top of another. Use the wrap inspector to uncheck object causes wrap then insert a circle, change to color fill to none, resize/reshape it as desired, move it into position the select both the screenshot & the shape & go to Arrange > Group, cut or copy this grouped object, click to put the cursor in the body of your text where you want it to go & paste. -
hello there
when selecting the camera on my 3gs the screen goes black and has no responce i can take a picture with the top volume button but cannot see it until i open photos
please can anyone help
thankyou andyTry closing the Camera app completely and see if it works properly when you re-open the app : from the home screen (i.e. not with the Camera app 'open' on-screen) double-click the home button to bring up the taskbar, then press and hold any of the apps on the taskbar for a couple of seconds or so until they start shaking, then press the '-' in the top left of the Camera app to close it, and touch any part of the screen above the taskbar so as to stop the shaking and close the taskbar.
If that doesn't work also do a reset (unless this is what you mean by powering off and restarting) : press and hold both the sleep and home buttons for about 10 to 15 seconds (ignore the red slider), after which the Apple logo should appear - you won't lose any content, it's the iPad equivalent of a reboot. -
Why can't I cloes a webpage with the top close button V29.0.1
Ever since updating to version 28.0.1 I can no longer use the top close button to close a website. I have to go to the site in the task bar and then close it or close Firefox with task manager!
'''''[https://support.mozilla.org/en-US/kb/troubleshoot-firefox-issues-using-safe-mode Start Firefox in Safe Mode]''''' {web link}
While you are in safe mode;
Press the '''<Alt>''' or '''<F10>''' key to bring up the tool bar.
Followed by; Windows; '''Tools > Options''' Linux; '''Edit > Preferences'''
Mac; ''application name'' '''> Preferences'''
Then '''Advanced > General.'''
Look for and turn off '''Use Hardware Acceleration'''.
Poke around safe web sites and see if there is still a problem. Then restart. -
Dear Friends, I am trying to draw a structure in Adobe Illustrator with 3D effect. But I am unable to give it proper shape. Can someone please help me for drawing the similar structure as showed below. I have facing problems in giving 3D effect.
Thanks a lot for your great help...i made a quick example:
and what it's made of:
just shapes and gradients. used a combination of pathfinder and shape builder to get the shapes exact. -
Drawing Shapes in Layers with CS3
I am working with Photoshop Extended v10.0.1 on Mac OS v10.5.8
I went from PS v5.5 to v10.0.1. Big leap.
In v5.5 I was able to use the Line tool, Rectangle tool or any other shape tool to draw on different layers. I could control the lines width and color. You would be able to see all of the different shapes on the different layers all at once unless of course you hid a layer. Now in 10.0.1 if I draw one shape on one layer, then another on a second layer, the second layer makes the first disappear. In fact I can't seem to draw more than one shape on any single layer, PS always automatically makes a new layer for the new shape. I've tried searching the manual for this and can't come up with the solution. I know much has changed between these two versions but is there something I must do to be able to draw shapes on different layers (and multiple shapes on one layer) and have them all visible like it was on v5.5?It looks like your shape layer color is white on both layers
and so is the background layer.
Double click on icon to the left of your vector mask in the
layers palette to change to a different fill color.
MTSTUNER -
My Top Sites Button Has Disappeared - How do you get it back?
I have safari for windows xp and have noticed that my top sites button on the top left has disappeared. I want to get it back and have tried -general settings -customize toolbar, and i've tried -edit -preferences -toolbar, but neither have an option of re-adding the top sites button.
Does anyone know what has happened - have apple deleted the top sites function?
If anyone has any ideas it'd be a great help. thanks.The button is still there with 5.0.2. (At least, still supposed to be there.)
Are your video drivers or display adaptor drivers up to date? (Plausibly, the higher version of Safari may have outstripped the capabilities of your existing drivers. If so, an update of the drivers may be of some assistance.) -
Making a button with a picture
I'm trying to make a button with a picture I made in photoshop.. but the problem is that the background is transparent, I just want the main part to be clickable.
Here is an example.. I just want the purple part to be clickable. The box around that is the actually whole image. So how can I fix this?if you are using a simple button with up / over / down / hit frames do the following.
add a new layer to your button's timeline above the bitmap
in the up keyframe of this new layer draw a circle the same size and position of the purple starburst.
select the circle and cut the the circle (cmd-x or cntrl-x)
delete the layer you just made
make sure there is a keyframe in the hit frame of the remaining layer (f6)
if the bitmap is in the hit frame, delete it.
with the hit frame selected do a paste in place: cmd-shift-v or cntrl-shift-v
now you should have only the vector circle shape in the hit frame of the button.
now your button will only respond to mouse events when you rollover where the circle is.
the reason i had you add a new layer is because when you draw vectors in the same layer / frame as a bitmap, the vectors go behind the bitmaps and are hard to select, see, or modify. -
Placing an image on top of existing image
I seem to have a lot of trouble with placing an image on top of an existing image and then wanting it to stay relative to the original. As in... I want to put a button on an image of a map. Then later.. will make a hotspot on that area to open another window.
My trouble is with placing the button and then having it stay relative to the map no matter how the browser window moves or is sized. What is the prefered method using DW CS4? Can you point to a tutorial on how to do this...
Thanks for your time
Ralphfunction(){return A.apply(null,[this].concat($A(arguments)))}
But, placing one image on top of another in a web page must be a task that happens all the time.. I just have not found a straight forward way to do it yet.
It's really not common.
It can be done via layering (what Dreamweaver calls APDivs) but you may still get layout issues with browser resizing.
Maybe you are looking for
-
Iphone, Ipod touch and a new computer
Hi all, lengthy post so here goes... I had an older computer that I had synced with my Ipod touch and newly purchased Iphone. Some how the old computer decided to pack it in and I can't access the internet on it. I purchased a new computer, installed
-
Itunes crashed, CoreAudioToolbox.dll
iTunes stopped working, the error appears to me every time I try to open iTunes for Windows x64, and I can not sync my Ipad. This happened from an iTunes update and to date have continued to update the software and still not working. How do I fix thi
-
Error while calling SQLJ procedure
Hi all, I am using a datasource created in WebSphere to call the SQLJ procedure from an EJB. I am getting the following error trace while instanting the SQLJ procedure class. I am using Spring's DAO Service-config to get the Datasource and thus the C
-
Access Connection Tray Icon disappear
Hi, I got a problem on a T61p model 8889-AB5 owned by my boss. The ThinkVantage Access Connections tray icon was disappeared occasionally. It is noticed that below registry keys were missed and I needed to add them back to get the tray icon display
-
What's the best way to erase and reinstall Lion?
I'm a little confused by the various posts I've read about erasing and reinstaling lion. My MBP is about 4 years old. I upgraded to lion last summer and it never worked great, but over the last 3-6 months its been dragging. I want to start fresh.