On Mon, Aug 15, 2011 at 12:34 AM, Geoff Lane <ge...@gjctech.co.uk> wrote:
>
> Hi All,
> My son has just asked for my help. Part of this needs me to style a
> set of anchor tags to give fixed width and also 'mouseover' effect.
> Unfortunately, this is to be incorporated in someone else's web page
> and we don't have access to the head (and so can't link a stylesheet
> there or embed a style block).
>
> Is there any way to link a stylesheet within the page body? Can this
> be done with Javascript? Any other ideas?
I think you can use a <style></style> block in the body.
It could also be done with JavaScript:
var anchors = document.getElementsByTagName("A");
var i;
for (i=0; i<anchors.length; i++){
anchors[i].style.width = "100px";
anchors[i].onmouseover = "this.style.backgroundImage =
\"url('/images/highlighted.png')\"";
anchors[i].onmouseout = "this.style.backgroundImage =
\"url('/images/regular.png')\"";
}
That JS probably has syntax errors, but you get the idea.
There's guaranteed to be better ways to do it, but this will get the job done.
I don't know how to target the style of the :hover pseudo-element
using JavaScript, but if there's a way, that's probably better.
You could also use inline styles, but I also don't know if you can
target the hover pseudo-class inline.
>
> All help gratefully received.
>
> --
> Geoff
--
Ghodmode
http://www.ghodmode.com/blog
______________________________________________________________________
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
