ClassCreator.com | Blockbuster sites, amazing reunions

Share Tips

New Topic Reply Subscription Options  

Creating a pushbutton

Forums: Questions and Answers About Building Your Site
Created on: 01/08/12 01:52 PM Views: 1387 Replies: 8
Sunday, January 8, 2012 at 1:52 PM

I would like to take the attached .jpg and create a several pushbuttons from it. I would add the wording for the topic and create a separate new .jpg for each one ( I guess ?!?) I'd then plan to add the link to the location(s) I want to go to. I have found some code as below that I can modify for my needs but I's like to be able to use my own .jpg

Can anyone tell me how to do this?

Code found is

Reply
Edited 01/08/12 1:54 PM
Sunday, January 8, 2012 at 2:25 PM - Response #1

Use an image editor. A good free one is irfanview.com . They usually have a way to add text to an image.


Reply
Sunday, January 8, 2012 at 2:30 PM - Response #2

I don't have so much of a problem adding the text. My question is how I get my button to look like this image instead of the rectangle box in the code I found.

Reply
Sunday, January 8, 2012 at 3:58 PM - Response #3

I see you have several jpg images on your homepage so it appears that you know how to upload images and place them where you want them to appear. You would do the same with the button image once you've added the text. Then it's just a matter of using the image as a link. In the editor window, select the image and click on the link icon (third from the right in the second row of icons above the edit window) and enter the URL of the location you want to link to. You don't need to use any HTML code. Hope this is helpful.

Reply
Edited 01/08/12 3:59 PM
Sunday, January 8, 2012 at 8:56 PM - Response #4

Here's a sample using that image and a link to your home page

Reply
Edited 01/08/12 8:57 PM
Monday, January 9, 2012 at 1:06 AM - Response #5

What she is saying is that the code she used creates a button with a rectangle. She wants to use images. The problem is the code, not the image.

IOW, that code doesn't use any image at all. I gave an example of how one uses an image. Someone else mentioned how to use the CC editor, which basically generates that sort of code - for an image.

(Edit: This replied to a post that was deleted. Suggestion to CC. Most sites just say "post deleted" to avoid odd flows)

Reply
Edited 01/09/12 1:26 AM
Saturday, January 14, 2012 at 5:47 PM - Response #6

Dick & Jack - Thanks for your help. I've done a lot of work but I'm not really happy with the results. The end result I am looking for is ONLY the red ovals I have created with the text to display. So that if I choose to put them all on - say- a yellow background, you would only see yellow with red ovals.

My two biggest stumbling blocks right now:

  1. The image itself. Although I do use Photoshop, I would not call myself proficient. My problem is that I still have a white rectangle background on my red ovals. Is there a way to make the background transparent or non-existent in a .jpg? When I tried it as a .gif the text wasn't editing properly.
  2. The links - When I add the link URL to the red ovals, the image then has a blue rectangle around it. So as not to see this, I changed to a blue background in the table. But, I'm not happy with the way it looks. Again, I'd like to only see the red ovals with text without an outline and still have my links work.

Am I asking too much? Rolling Eyes I have already created all of my links and they work now. I'm just not happy with the presentation. I don't care if they are .gifs - as long as they do what I want. Can anyone help me with this? They are on my homepage. I will password protect much of the information but for now I'll leave them open.

Thanks in advance.

Reply
Saturday, January 14, 2012 at 7:11 PM - Response #7

GIF can be text edited with Irfanview and I think GIMP. I like GIF because it's a lossless format with a bit more crispness and pretty compact. I've used JPG also, but white on white. PNG is also lossless and supports transparency. PNG image size is a tad larger, but color support is better.

However, all you need to do is floodfill the white edge in the current button images to match the blue background to achieve a seamless look.

Edit: If you wanted freedom from having to do floodfills, then images need "transparency" for the surround. So it's back to GIF or PNG.

If you remove target = "_blank" then the prior selection choice also goes away - the blue rectangle is a browser function. Normally you want people to see what they clicked on. Did you want to open multiple pages? Target=blank is usually used if you direct a user to a different site from one's own.

Note: Each time you save a JPG (meaning open and save) it introduces a bit of fuzzy. So it's best to work from a master using a lossless format like GIF or PNG and then "saveas" to JPG.

I took your image and did a "fast" transparency for the surround to show how it looks and works with different color backgrounds. To be perfect with other color backgrounds, the fuzzy gray edge should be removed. So the attached image is now a GIF with transparency.

As I noted above, this will not remove the blue rectangle which is a browser link color function.

Reply
Edited 01/15/12 1:15 AM
Saturday, January 14, 2012 at 11:11 PM - Response #8

Barb,

I would be happy to attempt to provide some assistance. There are, perhaps, potential positive solutions but more exact clarrification about what you are trying to accomplish would be appreciated on my part from you. So if you would like, instead of taking up alot of space in this thread, we can discuss precisely what you are trying to do via private communication.

Reply
Edited 01/14/12 11:20 PM
New Topic Reply  
Subscription Options: Have all new forum posts sent directly to your email.
Subscription options are available after you log in.