loking for a free transparent/opaque button for my website

I have few web building skills and am using geocities page builder. A

  • (2 Pages)
  • +
  • 1
  • 2

22 Replies - 3954 Views - Last Post: 24 January 2009 - 12:42 PM

#1 MovieProducer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 30-December 08

loking for a free transparent/opaque button for my website

Post icon  Posted 30 December 2008 - 08:46 AM

Opaque/transparent button wanted for my beginner level website so I can make Home Page, Bio, etc. buttons. I am using the geocities page builder because I donít have the time to learn all of the html codes, but have worked with it a little. I am updating my free geocities site in preparation to buy a domain name. I will have to make the future updates my self, so I want to keep the thing on page builder---- unless anyone knows of a downloadable page builder that works like it does, but has more features and the ability to make custom text (but thatís a different topic). A simple clear button in the form of a picture that I can crop, copy and put text on will solve my problems. This is the test page if anyone wants to look.

http://www.geocities...on/aaatest.html

If I put a link to the text boxes in the left column, it underlines it. Thatís what I want to avoid, and I want the ability to put mouse over pictures on them Thanks,
Cody

Is This A Good Question/Topic? 0
  • +

Replies To: loking for a free transparent/opaque button for my website

#2 OliveOyl3471  Icon User is offline

  • Everybody's crazy but me!
  • member icon

Reputation: 134
  • View blog
  • Posts: 6,581
  • Joined: 11-July 07

Re: loking for a free transparent/opaque button for my website

Posted 31 December 2008 - 12:16 AM

edit--sorry those two buttons were not right!

This post has been edited by OliveOyl3471: 01 January 2009 - 01:47 AM

Was This Post Helpful? 1
  • +
  • -

#3 MovieProducer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 30-December 08

Re: loking for a free transparent/opaque button for my website

Posted 31 December 2008 - 06:09 AM

That is the right idea. I saved the rectangle button picture to a folder and uploaded it to the website, but it was white - not clear when it showed up online. Is Opaque the right term for what I want? Iím not a programmer, sorry. I had heard that an Opaque object shows up as clear onlineÖ.. Anyway. If you will link to my test page, you can see what I am wanting. I would like the left column of text to serve as the links to each page of the website. I want to see the background through the links as they are now. If I link them as they are in text boxes, they get underlined. If you look close to the bottom of the page, you will see a logo for the AFA. That is perfect- It is a word picture with a clear background. I have a link already set up to it, and it does not underline it because it is a picture, not a text box.

What I need ate clear text boxes (maybe a shadow on two or three sides so I can see them when they are in files so I can edit them) that are just big enough for the largest text entry of the list to be placed in them. I do not know how to tell you the size, but I do know that: Comments/ References typed in Arial font in size 14 is the biggest text box in the list. If the button is just big enough that the text will fit inside, then it should be perfect.

If you send me one clear box that size, will it still be clear after I type a text box over it and save it? I have tried cropping the clear area out of other pictures and putting text over them, but the backgrounds change to white. I do not have a photoshop program at my work computer, but can take the files with me to my home if needed.
Here is the link:
http://www.geocities...on/aaatest.html

Thank you for your help my new friend,
Cody

P.S. Do you think my font size for that column should be 12 instead of 14? I plan to use size 12 text over the black background areas when I fill in the information on each page.
Was This Post Helpful? 0
  • +
  • -

#4 OliveOyl3471  Icon User is offline

  • Everybody's crazy but me!
  • member icon

Reputation: 134
  • View blog
  • Posts: 6,581
  • Joined: 11-July 07

Re: loking for a free transparent/opaque button for my website

Posted 31 December 2008 - 10:46 AM

You're right! Even though I saved them as transparent (or partially anyway) they still end up white. Weird.

Here's another try. This one should be transparent, except for the edges.


I couldn't remove the edges completely or the background would disappear and you'd just have the text. But they're mostly gone:


Just so you know, I'm not an expert or anything, and I don't know much about Web development. So I can't tell you what font size is best or anything like that, but we do have some excellent web developers here who I am sure will know the answers to your questions. Since you asked for a picture and I can at least do that, I thought I'd try to help you.

Quote

It is a word picture with a clear background.


Why don't you just make each word your link? I mean...create a new picture with each word?

If you want to do that, here is an example:
Attached Image
(click it)

This post has been edited by OliveOyl3471: 31 December 2008 - 11:02 AM

Was This Post Helpful? 0
  • +
  • -

#5 MovieProducer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 30-December 08

Re: loking for a free transparent/opaque button for my website

Posted 31 December 2008 - 12:20 PM

View PostOliveOyl3471, on 31 Dec, 2008 - 09:46 AM, said:

You're right! Even though I saved them as transparent (or partially anyway) they still end up white. Weird.

Here's another try. This one should be transparent, except for the edges.
Attachment attachment

I couldn't remove the edges completely or the background would disappear and you'd just have the text. But they're mostly gone:
Attachment attachment

Just so you know, I'm not an expert or anything, and I don't know much about Web development. So I can't tell you what font size is best or anything like that, but we do have some excellent web developers here who I am sure will know the answers to your questions. Since you asked for a picture and I can at least do that, I thought I'd try to help you.

Quote

It is a word picture with a clear background.


Why don't you just make each word your link? I mean...create a new picture with each word?

If you want to do that, here is an example:
Attachment attachment
(click it)

Thank you for trying to help me; we came soooo close. If I download the button pictures and then upload them onto the website as is, then the backgrounds are transparent, but there are also white splotchy outlines around the black text. If I put the buttons onto the windows photo editor or the online photobucket editor and then re-save them, the background color becomes solid white or black Ė even if I make no changes to them Ė just re-saving them removes the transparency. I was having that same trouble when I found pictures online with transparent backgrounds and tried to crop them so that all I had was the transparent part, it would save as all white in color. From the look of the splotchy shadowing around the text on the buttons, Iím thinking each button I/you make would have more cleanup work than it is worth. I am open to making each word or phrase as the link as you suggest, but I do not know how. Do you have an html code for a word picture like that but non-animated with white text? Would it be something that I could modify by changing code, or would I need software to create something like that? If each line of text in my left column was a size 14 Arial font, white, non-animated word picture, then my problems would be solved in a way that would look totally professional. I wish I had a way to make them.

If it was just three word phrases like:

Home Page & News
Movie Production
Science & Inventions

Then I would ask you to please make them, but I have 19 things in that column; thatís way too much to ask. Is there an online program or something I can download to do it myself?

Again, thank you for the help; I am learning a lot.

Cody
Was This Post Helpful? 0
  • +
  • -

#6 OliveOyl3471  Icon User is offline

  • Everybody's crazy but me!
  • member icon

Reputation: 134
  • View blog
  • Posts: 6,581
  • Joined: 11-July 07

Re: loking for a free transparent/opaque button for my website

Posted 01 January 2009 - 01:45 AM

I would say you're welcome but I don't think I've actually helped you yet. ;)

Those white 'jaggy' edges are a pain! You're not the first to have this problem. I've seen it several times and there is a solution...but I think it depends on which photo editor you are using.

I like your idea better. And no...it is not too much to ask. Words are really easy to make, and they don't take very long. I just don't have time right now...but I can do it within a couple of days or so. It's not a problem at all. I like doing this stuff. :)

But if you really want to do it yourself, you can download GIMP free. I haven't used it but I hear it's pretty good. Just google it, I'm sure you'll find it there. I use Ulead GIF Animator 5, but it's hard to find in the US. You can go to their website and download a free trial version, though.


edit--
here's another question about the white pixels, so maybe this will help you? Maybe not, but it might give you an idea of how to fix it.

This post has been edited by OliveOyl3471: 01 January 2009 - 02:09 AM

Was This Post Helpful? 0
  • +
  • -

#7 MovieProducer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 30-December 08

Re: loking for a free transparent/opaque button for my website

Posted 08 January 2009 - 09:25 AM

View PostOliveOyl3471, on 1 Jan, 2009 - 12:45 AM, said:

I would say you're welcome but I don't think I've actually helped you yet. ......................I like your idea better. And no...it is not too much to ask. Words are really easy to make, and they don't take very long. I just don't have time right now...but I can do it within a couple of days or so. It's not a problem at all. I like doing this stuff. :)

Okay, okay, - :lol: LOL- ;) if youíre going to twist my arm, you can help me out Ė :lol: LOL ;)
Iíll look at my website re-do and make sure the word list at the left is complete. Yes, you have helped me Ė you are helping me make the right choices about how to do the word list and that is a lot. Do you want to copy the word list right off of the site to have the correct size and color already set, or do you want me to send the list to you? I can let you know when I know for sure that the list is exact. Thanks again, :D
Cody
Was This Post Helpful? 0
  • +
  • -

#8 fuzzylunkinz  Icon User is offline

  • D.I.C Head
  • member icon

Reputation: 8
  • View blog
  • Posts: 185
  • Joined: 11-November 08

Re: loking for a free transparent/opaque button for my website

Posted 08 January 2009 - 04:55 PM

Why don't you just do a simple CSS menu?
Was This Post Helpful? 0
  • +
  • -

#9 OliveOyl3471  Icon User is offline

  • Everybody's crazy but me!
  • member icon

Reputation: 134
  • View blog
  • Posts: 6,581
  • Joined: 11-July 07

Re: loking for a free transparent/opaque button for my website

Posted 09 January 2009 - 08:32 AM

Just tell me what words you need. I'll do the rest.
School is back in session now, and in fact my last class starts today! I should be there checking it out now. lol.
But I will get to this, I promise! :)
Was This Post Helpful? 0
  • +
  • -

#10 OliveOyl3471  Icon User is offline

  • Everybody's crazy but me!
  • member icon

Reputation: 134
  • View blog
  • Posts: 6,581
  • Joined: 11-July 07

Re: loking for a free transparent/opaque button for my website

Posted 12 January 2009 - 01:18 AM

If you need something different let me know.

edit--can you even see them? When I highlight them it looks like they have the same problem as you had before...fuzzy edges!
:ph34r:
If these won't work for you I don't know if I can help you. Sorry.

This post has been edited by OliveOyl3471: 12 January 2009 - 01:21 AM

Was This Post Helpful? 0
  • +
  • -

#11 MovieProducer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 30-December 08

Re: loking for a free transparent/opaque button for my website

Posted 12 January 2009 - 06:56 AM

View PostOliveOyl3471, on 12 Jan, 2009 - 12:18 AM, said:

If you need something different let me know.

edit--can you even see them? When I highlight them it looks like they have the same problem as you had before...fuzzy edges!
:ph34r:


I can't see them, but I can find them with the highlight. I will try to work with them and let you know what happens. The blue word you made for me last time did not have any problems. What is a CSS Menu?

This post has been edited by MovieProducer: 12 January 2009 - 06:58 AM

Was This Post Helpful? 0
  • +
  • -

#12 OliveOyl3471  Icon User is offline

  • Everybody's crazy but me!
  • member icon

Reputation: 134
  • View blog
  • Posts: 6,581
  • Joined: 11-July 07

Re: loking for a free transparent/opaque button for my website

Posted 12 January 2009 - 07:29 AM

CSS means Cascading Style Sheet. It's a template, kind of, to use with Javascript. It helps you format a document or a group of documents or web pages so they are uniform. I do not know how you would use it to get your links the way you want, but I don't know much about any of this anyway.

The graphic that I made before, that says </dream.in.code> is bigger, so maybe that's why it doesn't have problems? OR...It's uploaded to Photobucket and I have a direct link to it, so maybe that's what you need to do! You can get a Photobucket account free.

If those don't work as is, I'll try uploading them to Photobucket for you...then you can save them and upload them to your own Photobucket account.

If at first you don't succeed...

:D

edit--attached is an example of a CSS file

This post has been edited by OliveOyl3471: 12 January 2009 - 07:35 AM

Was This Post Helpful? 0
  • +
  • -

#13 MovieProducer  Icon User is offline

  • New D.I.C Head

Reputation: 0
  • View blog
  • Posts: 11
  • Joined: 30-December 08

Re: loking for a free transparent/opaque button for my website

Posted 12 January 2009 - 07:55 AM

[quote name='MovieProducer' date='12 Jan, 2009 - 05:56 AM' post='509984']

View PostOliveOyl3471, on 12 Jan, 2009 - 12:18 AM, said:

When I highlight them it looks like they have the same problem as you had before...fuzzy edges!
:ph34r:



I saved them and uploaded them to my site. They had the fuzzy edges. :(
Did you make them as images or words? The blue animated word that you made as a sample had a clear background and sharp edges. What was the difference in how they were made?
Was This Post Helpful? 0
  • +
  • -

#14 xerxes333  Icon User is offline

  • D.I.C Addict
  • member icon

Reputation: 31
  • View blog
  • Posts: 504
  • Joined: 05-July 07

Re: loking for a free transparent/opaque button for my website

Posted 12 January 2009 - 09:46 PM

Another way to accomplish what your seem to be looking for is to use CSS, as pointed out by fuzzylunkinz.

A very simple example would be as follows.
<html>
<style type="text/css">
.myLink{
	text-decoration:none;
	padding-left:5px;
	padding-right:5px;
}

.mylink:hover{
	background-color:red;
}

</style>

<body>
<a href="#" class="myLink">one Fish</a><br>
<a href="#" class="myLink">two Fish</a><br>
<a href="#" class="myLink">red Fish</a><br>
<a href="#" class="myLink">blue Fish</a><br>
</body>

</html>

Was This Post Helpful? 0
  • +
  • -

#15 OliveOyl3471  Icon User is offline

  • Everybody's crazy but me!
  • member icon

Reputation: 134
  • View blog
  • Posts: 6,581
  • Joined: 11-July 07

Re: loking for a free transparent/opaque button for my website

Posted 13 January 2009 - 12:25 AM

View PostMovieProducer, on 12 Jan, 2009 - 08:55 AM, said:

Did you make them as images or words? The blue animated word that you made as a sample had a clear background and sharp edges. What was the difference in how they were made?

I have a tutorial in photoshop with the blue one...it's made actually as an image. The others were made as text. That's one difference. That and what I already said, it's uploaded to Photobucket.

I will redo them. Unless you can do what xerxes said?
Was This Post Helpful? 0
  • +
  • -

  • (2 Pages)
  • +
  • 1
  • 2