Eden Ridgway's Blog

.Net and Web Development Information

  Home :: Contact :: Syndication  :: Login
  105 Posts :: 1 Stories :: 78 Comments :: 3 Trackbacks

Search

Article Categories

Archives

Post Categories

Development

General

One of those generally useless but interesting pieces. As I'm sure you know that you can use JavaScript in CSS expressions in IE, but did you know that where one can use a URL, say for example on a background, JavaScript works as well. It makes sense of course, we do it for hyperlinks all the time, but one would not usually think of doing it in this fashion.

I got this trick from http://www.quirksmode.org/css/contents.html and http://milov.nl/2389. Here is the code demonstrating the approach:

.JSTest:hover {
background
: url("javascript:alert('You are hovering')");
}

Of course JavaScript doesn't really belong in a stylesheet, but I enjoy these kinds of tricks despite their practical use :). Another note is that even though one can refer to this in the javascript here, for example url("javascript:alert(this)"), the object returned is not the element that the psudeo element/event is firing on. I have not bothered to find out what it is, I'll leave that up to you. Also note that it only fires the first time, after which I assume that some wierd caching comes in to play which stops it from firing or making the request again.

Here is the trick in action: Hover over me

The following site also has quite a nice write up of CSS support in various browsers http://www.quirksmode.org/css/contents.html.

posted on Monday, July 04, 2005 5:16 AM
Comments have been closed on this topic.