16 replies [Last post]
CSSLearner
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-05-07
Posts: 9
Points: 0

Hi all,

I'm trying to achieve the following goal: I want to use the "a" tag, and inside this tag I want to use the "img" tag, but I would like to apply that onmouseover/onmouseout effect that we easily have using javascript, but I would like to achieve the same effect only using css. Actually, I've already achieved such a goal, but I think I am doing that in a not so good way. See below:

.effect, .effect:visited, .effect:active {
width: 142px;
height: 20px;
background-repeat: no-repeat;
background-image: url("button_out.gif");
}

.effect:hover {
width: 142px;
height: 20px;
background-repeat: no-repeat;
background-image: url("button_over.gif");
}

The size of button_out.gif and button_over.gif is 142px and 20px. The size of very_little.gif is...uh... a very little size. The fact is that I need to use this very_little.gif to achieve my goal, and I would not like to use this artifice. I don't even know why exactly the very_little.gif image is necessary!

Please, help me!

PS: Sorry for crossposting. I posted the same question here:
http://forums.digitalpoint.com/showthread.php?p=3051577#post3051577

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Try this instead: <style

Try this instead:

.effect, .effect:visited, .effect:active { width: 142px; height: 20px; background-repeat: no-repeat; background-image: url("button_out.gif"); text-indent: -9999em; }

.effect:hover {
background-image: url("button_over.gif");
}

link text

should be all you need Wink

Verschwindende wrote:
  • CSS doesn't make pies

CSSLearner
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-05-07
Posts: 9
Points: 0

Thanks, but...

...the solution you gave me is not what I want. Instead of that "link text", I would like to exhibit an image. If I put the "link text", this phrase will be exhibited, but I don't want it. In other words, I would like to put an image to "simulate", to imitate a button. This image should have the onmouseover and onmouseout effects, to change the image of the "button". Actually, I was trying to not use a "img" tag. I tried to use only the "a" tag, in a lot of ways, but all my attempts were unsuccessful. I think using only the "a" tag is possible, but I do not know how. See below:

Just the "a" tag, and some css configurations in the "effect" css class. I tried a lot of ways, changing, including, and excluding some properties in the "effect" css class, but I did not achieve yet. If you know, please tell me.

Thanks!

CSSLearner
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-05-07
Posts: 9
Points: 0

The solution doesn't work yet

If you know please tell me...

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Did you even try the code I

Did you even try the code I posted?

Go back and look at it again, it does exactly what you want.

And don't bump your topics please, especially not after TEN MINUTES. Some of us are busy Wink

Verschwindende wrote:
  • CSS doesn't make pies

CSSLearner
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-05-07
Posts: 9
Points: 0

Yes...

Surely I copied and pasted your code, and it doesn't work. Try you, please, and you will see that my code and your code give very different results, either in internet explorer or in the firefox.

Thanks!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

Apologies, add display:

Apologies, add display: block; to the first set of rules.

Verschwindende wrote:
  • CSS doesn't make pies

CSSLearner
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-05-07
Posts: 9
Points: 0

Yes!!! It works now!!!

Thank you very much for your tips!!!

Actually, adding the "display: block" solved the problem. I don't even need that "text-indent: -9999em". See below the final solution that works perfectly:

a.effect { width: 142px; height: 20px; background-repeat: no-repeat; background-image: url("button_out.gif"); display: block; }

a.effect:hover {
width: 142px;
height: 20px;
background-repeat: no-repeat;
background-image: url("button_over.gif");
display: block;
}

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

yes you do need the

yes you do need the text-indent because you NEED link text. You can't just have an empty link, that's why I filled it with content and used the text-indent trick Wink

Verschwindende wrote:
  • CSS doesn't make pies

CSSLearner
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-05-07
Posts: 9
Points: 0

No, I don't need it!

I can use only the "a", exactly like I posted above. See for yourself! Test and see that the solution above works perfectly. The link is the image itself, that is exactly my intention. Wonderful! Wink

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 3 years 14 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

But you dont want to use the

But you dont want to use the img as the link, you want to use text as the link, then use css to move the text out of the way and replace it with an image

so you DO need the text-indent and you DO need the text

you came to US for help, you should listen to what we tell you.

all ยป http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph

CSSLearner
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-05-07
Posts: 9
Points: 0

Deuce wrote:But you dont

Deuce wrote:
But you dont want to use the img as the link, you want to use text as the link, then use css to move the text out of the way and replace it with an image

so you DO need the text-indent and you DO need the text

you came to US for help, you should listen to what we tell you.

No, I think you misunderstood my intention. My intention is not using a text as a link, but an image as a link. Like below:


But, as I already said, I want that onmouseover/onmouseout effects on the image, and I do not want to use javascript to do so.

The solution I proposed above really works, with an empty "a" tag.

I am very grateful for the tips mentioned here! Without them I would never achieve that solution.

Cheers!

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

AAAAAAAAAARGH!!!!!

AAAAAAAAAARGH!!!!! AAAAAAAAAAAAAAAAAARGJHHGHHH!!!!

YOU NEED TEXT IN THAT LINK!

You simply cannot have an empty link. It will not validate.

What if I was to view your site with styles disabled? How the hell would I know where the link is???

Verschwindende wrote:
  • CSS doesn't make pies

CSSLearner
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-05-07
Posts: 9
Points: 0

Jezzz...I do not need that, for heavens sake!!!

Hey, you helped me a lot, I am infinitely grateful for your help. But I really do not know why you are so stuck in this issue. You said what if the css is disabled in the browser... well, if it happens, all the site will be completely a mess. It is like saying what if the javascript is disabled in the browser. Perhaps 60% of the sites around the world will not work if the javascript or the css is disabled. Besides, I think 95% of the browsers around the world have the javascript and the css enabled (if not 100%).

When you develop html pages you should assume certain requisites. If you develop a page being worried if the css/javascript will be enable/disabled, you will be crazy. I doubt that (only) 10% of the developers worry about the css enabled/disabled, because they assume that such a feature is always enabled in the browser. See all the pages around the world, see gmail! If everybody configured the css/javascript disabled in the browser, all the internet simply wouldn't work! All the internet would be unsuccessful! Internet is successful because css/javascript are enabled by default!

Check firefox error console when you open that page with that empty "a" tag. This console will NOT accuse any error! So, no problem.

CSSLearner
Offline
newbie
Last seen: 13 years 24 weeks ago
Joined: 2007-05-07
Posts: 9
Points: 0

More...

When you say that I need that text inside the "a" tag, you are deciding for me. So I tell you: what if I do not want to exhibit a text in the "a" link, if the css is disabled? You are assuming that I should exhibit something, but that's not the case. I would not like to exhibit a text instead of an image, in the link.

Please, no offense, especially because you helped me a lot! Wink

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 44 weeks 1 day ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

CSSLearner wrote:When you

CSSLearner wrote:
When you develop html pages you should assume certain requisites.

Not if you want to be a pro. Take a look at the "Truth and Consequences" site and read especially the "you don't know" link. If you don't know and understand that stuff you will just design bad web pages for the rest of your life.

Quote:
If you develop a page being worried if the css/javascript will be enable/disabled, you will be crazy.

If you don't, your web site will be crazy. Worse, they will be unusable, and as a consequence they won't get used. Good robust ways of dealing with these facts are well known and available all over the Web. If you are intending to make any kind of a living at this you have to know them and design accordingly.

Quote:
I doubt that (only) 10% of the developers worry about the css enabled/disabled, because they assume that such a feature is always enabled in the browser. See all the pages around the world, see gmail!

Yeah, the vast majority of web pages out there suck. So that means that you should join the ranks of people making sucky web pages?

Talk to someone who runs a business someday and see if you can get them to make a decision that will knowingly throw away 10% of their income!

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

thepineapplehead
thepineapplehead's picture
Offline
Guru
Last seen: 31 weeks 3 days ago
Joined: 2004-06-30
Posts: 9668
Points: 801

CSSLearner wrote:So I tell

CSSLearner wrote:
So I tell you: what if I do not want to exhibit a text in the "a" link, if the css is disabled?

Why are you purposely trying to alienate users from your site?

What happens if there's a server malfunction and your CSS file gets corrupted? If people visit your site and there is no content anywhere, because you're to stubborn to put in text, they're never going to come back.

Put it in, it's like two words and will take you about 5 seconds to do Wink

Verschwindende wrote:
  • CSS doesn't make pies