Solved

PSP - how to create a button

Posted on 2000-02-14
9
269 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
  • 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
 
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
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
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

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Author Note: Since this E-E article was originally written, years ago, formal testing has come into common use in the world of PHP.  PHPUnit (http://en.wikipedia.org/wiki/PHPUnit) and similar technologies have enjoyed wide adoption, making it possib…
Using SQL Scripts we can save all the SQL queries as files that we use very frequently on our database later point of time. This is one of the feature present under SQL Workshop in Oracle Application Express.
The viewer will learn how to count occurrences of each item in an array.
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

707 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

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now