Solved

PSP - how to create a button

Posted on 2000-02-14
9
280 Views
Last Modified: 2013-12-25
How do you create a rectangle button for a website using this program.

There is no auto draw rectangle option, the PRESET SHAPES does something, but adds all this crap inside and around the image.

How do you then add label to a button?

I know there are a few specialised software out there for button creation, anyone like to recommend a few (URLs pls).

...and the easiest way of making a fancy button which changes colour when the mouse rolls over it?

0
Comment
Question by:oddbod
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
9 Comments
 
LVL 3

Expert Comment

by:3rsrichard
ID: 2519385
Are you speaking of Paint Shop Pro?

If so you just use File-New Image to define an image the size you want the button to be, then write text into it,
and use special effects if you want.
0
 
LVL 3

Expert Comment

by:3rsrichard
ID: 2519397
And, the way you make a button that changes when the mouse rolls over it is to use the mouse_over event in Java, or VBA, or whatever, and you have two buttons one pre-mouse one during mouse.
0
 

Author Comment

by:oddbod
ID: 2519759
I already had been doing that, but most graphic creation programs even MS Word, allow you to draw a rectangle easily by dragging and sizing the box.
0
Stressed Out?

Watch some penguins on the livecam!

 
LVL 3

Expert Comment

by:3rsrichard
ID: 2519857
There is a rectangle tool ( and square, oval, circle) , as part of shapes, where you can define a box by clicking on one corner and sizing the box with the mouse.
I'm confused about what you want to do.
0
 
LVL 6

Accepted Solution

by:
tecbuilder earned 100 total points
ID: 2519869
To create a rectangular button:
From the File menu select New and set the height and width parameters you want your button to be.  Set the background color and image typ is 16.7 million (24 bit). Click Ok when done.

Do whatever you want to the image for the look you want.  Select a background color for the shadowing effect, I like to use white.  Then select Image | Effects | Buttonize.  Click on Auto Proof so you can see what your button will look like as you adjust the height and width parameters.  Click Ok when done.

Save your button as a gif or jpg file format.  A good filename convention is use same name for both files, but add on and off to the end so that you can distinguish between the image that is always displayed (off) and the image that is seen only when the mouse is over it (on).  For example:  button1_off.gif and button1_on.gif.

The script in your web page you need is:
<head>
<script language="JavaScript">
<!--
if (document.images) {
  button1_off = new Image(); dir_off.src = "button1_off.jpg";
  button1_on = new Image(); _on.src = "button1_on.jpg";
}

function msover(imageName) {
  if (document.images)
    document [imageName].src = eval(imageName + "_on.src");
  }
}

function msout(imageName) {
  if (document.images) {
    document [imageName].src = eval(imageName + "_off.src");
  }
}
//-->
</script>
</head>

<body>

<a href="YourURL.html" ONMOUSEOVER="msover('button1'); ONMOUSEOUT="msout('button1'); return true">
<img name="button1" src="button1_off.jpg" border="0" width="100" height="20" alt=""></a>

</body>
0
 

Author Comment

by:oddbod
ID: 2562591
In order for this javascript to work, do you need to download some other plug in, or how does the java script work otherwise?

ALso, the script above, it that a typical script or can there be different variations to it.  Isn't there a way of doing a roll over without a javascript?
0
 
LVL 6

Expert Comment

by:tecbuilder
ID: 2563160
JavaScript is built into the browser.  When the browser reads the page it automatically interprets the JavaScript code and does whatever it needs to do.

The script above is a typical script and there are slight variations to it.  Each variation does the same thing, just a different way of getting the same result.

The only other way to do roll overs without JavaScript is to create a Java Applet.  However, this requires the browser to download the applet as well as the images before it will work.  To create an applet is much more difficult than using the script above.

tec
0
 

Author Comment

by:oddbod
ID: 2563334
where it has (imagename) like that, do I need to change any of the text in that script or will it work as it is (which I doubt)? What is a *.src file, screen or script or something else?

....and can that script be placed anywhere in the source code, if I use Dreamweaver or some other wysiwyg editor to create my pages?
0
 
LVL 6

Expert Comment

by:tecbuilder
ID: 2563753
The script should be placed in the header area as is except for the changes listed below.  The script I gave will work once you change the images to what you will be using.  The part you asked about (imagename) will work without any changes.  All you need to do is copy the script and paste it into your web page's header area.  If you had an image named button1_off.jpg and button1_on.jpg the example I gave will work as is.  That's how I came up with the example.  I took a real application, scaled it to a simple working example and provided that to you.

In the script, you need to change button1_off.jpg to your image that will be displayed when the cursor is not over the image.  You also need to change button1_on.jpg to your image you do want displayed when the cursor is over your image.

I just noticed a typeo in porting my code from real life to example:

dir_off.src = "button1_off.jpg";  

should be

_off.src = "button1_off.jpg";

In the body, as shown in my example, you also need to change to those parts in the anchor tag to make your web page respond the way you want it to, e.g. changing the HREF= to a real page.  Replacing button1 in the ONMOUSEOVER="msover('button1'); ONMOUSEOUT="msout('button1'); with start of the image name you will be using.  Since I don't know what you intend to call your images, I can't get any more specific.  However, it you use the rules and example I stated in my answer you shouldn't have any problems.  Finally, you need to modify the image tag for your image by chaning the NAME, SRC, HEIGHT, AND WIDTH.

tec
0

Featured Post

The Orion Papers

Are you interested in becoming an AWS Certified Solutions Architect?

Discover a new interactive way of training for the exam.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question