...

View Full Version : Applying css to hrefs that are now onclicks please



Saz
01-23-2007, 05:29 PM
Just changed a lot of href links to onclick events in javascript, but the links that had certain hover effects before are now lost ! Is there any way of changing the css to cover the effects on the new onclick events please ?

Any help much appreciated.

Saz.

Excavator
01-23-2007, 05:39 PM
Hello Saz,
It's really amazing how many requests for help we see here that give us no clue of what their code looks like.
Link us - best
paste your code - works but some people don't like rebuilding your site locally.

Saz
01-23-2007, 06:01 PM
Hi Excavator,

I obviously thought that the info I gave would be enough, otherwise I would have given more info ! So there's absolutely no need to rebuild anything here - unless you really feel the need :)

ok, <a onclick="javascriptcode">text</a>

There isn't a website as yet, this is just something that I'm testing a few things on.

Any help appreciated.

Saz.

VIPStephan
01-23-2007, 06:11 PM
[...] the links that had certain hover effects before [...] to cover the effects on the new onclick events [...]

That's what we need. We can't guess what your links were doing when it worked and we still can't guess what the effects are that you wanna recreate since you switched to onclick events.

Show us your JavaScript and/or tell us in detail what your links were doing or are supposed to do! There's a lot that can be done to links with CSS. We can't read minds, you know?

Excavator
01-23-2007, 06:15 PM
ok, <a onclick="javascriptcode">text</a>
At least now we have an idea what your working on. What is your js going to do? Might be easier to do a lot of things with CSS instead. (can you tell I'm not a big fan of js?) (http://www.wait-till-i.com/index.php?p=104)


#container a:hover {
background-color: #FF0000;
height: 10px;
width: 40px;
}

Works in FF but IE doesn't do hover unless it's a link.
I think if your using js on a like that, you will need to use js for your hover as well.

Excavator
01-23-2007, 06:15 PM
We can't read minds, you know?

Amen!

Saz
01-23-2007, 06:22 PM
Allelujah !

Give me a few minutes and I'll come back to you on the helpful bit you posted just a moment ago.

Saz.

Saz
01-23-2007, 06:24 PM
At least now we have an idea what your working on. What is your js going to do? Might be easier to do a lot of things with CSS instead. (can you tell I'm not a big fan of js?) (http://www.wait-till-i.com/index.php?p=104)


#container a:hover {
background-color: #FF0000;
height: 10px;
width: 40px;
}

Works in FF but IE doesn't do hover unless it's a link.
I think if your using js on a like that, you will need to use js for your hover as well.

There's a few possibles, but there's a good chance that it may be an add to favorites link. I'm also not a big fan of js and never have been - any way of doing an add to favs without js please ?

The helps appreciated.

Saz.

Excavator
01-23-2007, 06:36 PM
http://www.yourhtmlsource.com/javascript/addtofavorites.html

No CSS only solution for that.

Saz
01-23-2007, 06:50 PM
Works in FF but IE doesn't do hover unless it's a link.
I think if your using js on a like that, you will need to use js for your hover as well.

Interesting - how would you use js for a hover please ?

Any help appreciated.

Saz.

Excavator
01-23-2007, 07:59 PM
Maybe someone in the js forum would know but I don't. I don't work with js if at all posible and when I do, it's a pre-packaged script.

Arbitrator
01-23-2007, 10:25 PM
Works in FF but IE doesn't do hover unless it's a link.
I think if your using js on a like that, you will need to use js for your hover as well.This is not entirely true. Excavator meant that Internet Explorer 6 does not support the :hover pseudo‐class except as he described. The latest version, 7, does support that pseudo‐class on the other elements; so, depending upon whether or not versions below 7 concern you, you may be able to do the hover effects exclusively with CSS.


Just changed a lot of href links to onclick events in javascript, but the links that had certain hover effects before are now lost ! Is there any way of changing the css to cover the effects on the new onclick events please ?You can do this in CSS using the :hover pseudo‐class as was already shown. You can also select only anchor elements with an onclick attribute by combining it with an attribute selector. Thus the following CSS selector only selects the hover state of anchor elements with an onclick attribute:


a[onclick]:hover { /* effects */ }

If you want to do this with JavaScript, you can use a mouse over event. For one, you would use an onmouseover attribute to manipulate the CSS. For another, you could register the events in an embedded or external script so as to keep your script separate from your HTML.

Inline Event Registration via an HTML Attribute:

<a onmouseover="/* do this */">

W3C Embedded or External Event Registration:

anchor.addEventListener("mouseover", function() { /* do this */ }, false);

Traditional Embedded or External Event Registration (IE‐compatible):

anchor.onmouseover = function() { /* do this */ };

The second method is a newer method that Internet Explorer doesn’t support while the third method is the IE‐compatible substitute for the it. Text in blue is variable and should be changed to the actual element reference.

sitegod
01-23-2007, 10:32 PM
There is a slightly more obvious method I'd like to point out- you could simply leave the href attribute in but setting the value to javascript:void(0); which will nullify any effect clicking on it has, while preserving a style.

To my knowledge, IE6 doesn't support attribute selectors so I'd probably not bother with them.

If you're looking to say remove the underline when you're hovering you could do this with JS:

onmouseover="this.style.textDecoration='none';" onmouseout="this.style.textDecoration='underline';"

Hope this helps.

VIPStephan
01-23-2007, 10:45 PM
There is a slightly more obvious method I'd like to point out- you could simply leave the href attribute in but setting the value to javascript:void(0); which will nullify any effect clicking on it has, while preserving a style.

You didn't read the link Excavator posted earlier, did you?


3. href="javascript: ", onclick="javascript:" There is no such thing as a JavaScript protocol on the web. Links use protocols to connect documents. Create real links or dont use any link at all – do or do not, there is no try!

4. onclick="void(0)" Why would one put effort into creating something that by definition is not doing anything? Glossing over bugs and bad scripting, thats why. A link that only points to a JavaScript function should be added via JavaScript.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum