Jack McKalling Posted October 9, 2009 Share Posted October 9, 2009 Hmm, I just came accross the statement "There is no such thing as dynamic CSS." on the Dhtml tutorial. I think that this statement needs rethinking, as there is ONE thing that makes CSS dynamic in an incredibly beneficial way.May I remind you, there is the ":hover" pseudo-class for anchor elements. This is what makes CSS dynamic, because you can alter the way a hyperlink is rendered when it is hovered, and let it automatically change back when you move out There is a technique that I developed (credit also goes to www.runescape.com), that specifically uses the hover thing. Example: ...<style type="text/css">a {background: url(background.png) no-repeat; background-position: 0px 0px;width: 30px; height: 30px;text-decoration: none;display: block; cursor: pointer;}a:hover {background-position: 0px 30px;}</style>...<a href="#">Hover me</a>(assume the image is 30x60 px)This trick will move the background of the hyperlink as soon as you point to it, reveiling the other part of the same image, and resets automatically if you move away. It can be used to highlight a button-like hyperlink for instance, but instead of replacing the image, you just move it.No more need for image preloaders or heavy load javascripts! This is much faster and more neat I basically learned about this technique at runescape (see the "Play RuneScape" button), though I improved it. I have no more need of adding embedded elements. Also, I use one image for the whole thing. Link to comment Share on other sites More sharing options...
Ingolme Posted October 9, 2009 Share Posted October 9, 2009 Hmm, I just came accross the statement "There is no such thing as dynamic CSS." on the Dhtml tutorial. I think that this statement needs rethinking, as there is ONE thing that makes CSS dynamic in an incredibly beneficial way.May I remind you, there is the ":hover" pseudo-class for anchor elements. This is what makes CSS dynamic, because you can alter the way a hyperlink is rendered when it is hovered, and let it automatically change back when you move out There is a technique that I developed (credit also goes to www.runescape.com), that specifically uses the hover thing. Example:(assume the image is 30x60 px)This trick will move the background of the hyperlink as soon as you point to it, reveiling the other part of the same image, and resets automatically if you move away. It can be used to highlight a button-like hyperlink for instance, but instead of replacing the image, you just move it.No more need for image preloaders or heavy load javascripts! This is much faster and more neat I basically learned about this technique at runescape (see the "Play RuneScape" button), though I improved it. I have no more need of adding embedded divs. Also, I use one image for the whole thing.Yes, that's a commonly used technique. Some people take it further and have a single image for several buttons.The :hover pseudo-class can be applied to any element, not just the <a> element. Link to comment Share on other sites More sharing options...
Jack McKalling Posted October 9, 2009 Author Share Posted October 9, 2009 Oh but I know it can be used for more elements, but I'm talking in cross-browser tongue; Internet Explorer only accepts for the <a> tag.I also never seen this anywhere before, but I may just haven't looked. At least I still see websites hanging around with dirty hover effects, that flicker because they still use javascript. How Awfull Link to comment Share on other sites More sharing options...
thescientist Posted October 9, 2009 Share Posted October 9, 2009 Oh but I know it can be used for more elements, but I'm talking in cross-browser tongue; Internet Explorer only accepts for the <a> tag.I also never seen this anywhere before, but I may just haven't looked. At least I still see websites hanging around with dirty hover effects, that flicker because they still use javascript. How Awfull but people could just pre-load the images first if they knew better though.but yes, CSS is a much more pragmatic method for accomplishing :hover effect Link to comment Share on other sites More sharing options...
Ingolme Posted October 10, 2009 Share Posted October 10, 2009 Oh but I know it can be used for more elements, but I'm talking in cross-browser tongue; Internet Explorer only accepts for the <a> tag.I also never seen this anywhere before, but I may just haven't looked. At least I still see websites hanging around with dirty hover effects, that flicker because they still use javascript. How Awfull And I still see websites everywhere using tables for layout. A lot of people have trouble getting rid of old techniques.The :hover pseudo-class works on any element in Internet Explorer as long as your page is running in standards-compliant mode. Link to comment Share on other sites More sharing options...
Jack McKalling Posted October 11, 2009 Author Share Posted October 11, 2009 Aha! That is very true. Though cross-browser programming means compatible for all used major browsers, and IE7 and IE6 are too one of those. As long as they don't support it, well I'm looking forward when only 8 is still used, but it may take a little while.This technique had existed before I figured it out, I could say that I reinvented it. But I won't take so much credit. Related to this technique, adding you say it is common and some take it even a little further Ingolme, I was thinking.How can I use one image that has several hyperlinks, to hover differently for each child? Like applying style to say a div, when one of its child hyperlinks receives hover?Something like "div > a:hover {}", and this meaning the selector targets specifically the div, not the a. Maybe this is already valid, but I cannot find it anywhere on w3schools. It relates to an imagemap, but cannot be one because the image would be its background. Link to comment Share on other sites More sharing options...
Synook Posted October 11, 2009 Share Posted October 11, 2009 By the way, the technique is known as "CSS sprites". Search on Google.You can always just use the descendant syntax: div a:hover { } The child selector is not supported by IE 7 and lower. Link to comment Share on other sites More sharing options...
Jack McKalling Posted October 11, 2009 Author Share Posted October 11, 2009 That is good to know. So.....where is it in the tutorial? :)I would like to read how it really works evenstill. Link to comment Share on other sites More sharing options...
Synook Posted October 11, 2009 Share Posted October 11, 2009 The "tutorials" in W3Schools are more like "usage guides". For specific technique implementations, you'll probably have to look elsewhere. ALA has a good article on CSS sprites. http://www.alistapart.com/articles/sprites Link to comment Share on other sites More sharing options...
Jack McKalling Posted October 11, 2009 Author Share Posted October 11, 2009 But couldn't it be listed in the references? It's certainly something that might prove to be beneficial in some cases like this. Link to comment Share on other sites More sharing options...
Synook Posted October 11, 2009 Share Posted October 11, 2009 Maybe, but I suppose they don't believe it relevant. Or else, why not put image preloading, CSS dropdowns, advanced form styling, etc. in as well? Link to comment Share on other sites More sharing options...
Jack McKalling Posted October 11, 2009 Author Share Posted October 11, 2009 I am sorry, I mean the ">" thing in selectors really. Preloading or CSS sprites are wonderfull, but not meant for tutorials or references indeed. The syntax for targeting elements that have some specific childs, could be usable to further enhance the CSS sprite technique I think, which is what this topic was about, now that I know the technique's name Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.