the_paco Posted March 1, 2007 Share Posted March 1, 2007 Here a little something I came up with to censured some text... it doesn't seem to be Valid but... <style type="text/css">censure { background-color: #000000; color:#000000;}censure:hover { background-color: #ff00ff; color:#ffffff;}</style><censure>Some text to not show to public</censure> Thanks a lot to a bunch who share their knowledge here; I've learn quite a bit recently searching the forum for specific answers.Keep up the good work to all! Link to comment Share on other sites More sharing options...
jlhaslip Posted March 1, 2007 Share Posted March 1, 2007 Excellent that you are learning some html and css. That is known as a "spoiler" tag because you make the information available to people, but if they don't want to "spoil", say, the ending of a movie, they don't hover over the black spot.And, yes, your code works in all Modern Browsers. Unfortunately, IE throws a wobbly and the on:hover doesn't work except in IE7. You might be able to use this code to achieve a similar effect. It works in IE, FF, Netscape8, and sort-of works in Opera. ( click on the tooltip for Opera 9) Link to comment Share on other sites More sharing options...
the_paco Posted March 1, 2007 Author Share Posted March 1, 2007 I noticed the problem with IE 6... thanks for the link.I did try this one that seem to be valid and working in the 3 browser that I've tested... (I needed it to work inside a sentence) <style type="text/css">#censure a { background-color: #000000; color:#000000;}#censure a:hover { background-color: #ff00ff; color:#ffffff; text-decoration: none;}</style>this <span id="censure"><a href="#nogo">word</a></span> should not be seen... ...recommendation(s)?This sort of formatting is intended to be use inside a sentence so chances are good (I believe) that people will be tempted to hover over wondering "what the!?"... Link to comment Share on other sites More sharing options...
jlhaslip Posted March 1, 2007 Share Posted March 1, 2007 a.info { background-color: #000000; color:#000000;a.info:hover { background-color: #ffffff; color:#000000; I haven't test the use of this code, but try it and see if it works... Link to comment Share on other sites More sharing options...
pulpfiction Posted March 1, 2007 Share Posted March 1, 2007 Im not sure what "inside a sentence" meant, but this seems to be working fine in IE 6. you can also change the CSS like below CSS:a.censure { background-color: #000000; color:#000000; text-decoration: none;}a.censure:hover { background-color: #ff00ff; color:#ffffff;}HTML:this <a href="#nogo" class="censure">word</a> should not be seen... Link to comment Share on other sites More sharing options...
the_paco Posted March 1, 2007 Author Share Posted March 1, 2007 In a such case, is it better to use 'class' or 'id'... sound to me that 'class' is better suited...? Is there a way to achieve the same result but without the <a> tag?... in other words; can I use :hover with something else than 'a'?I finally changed the non-hover state to dark Grey text color (hard to read but can see there something) to trigger people to get there pointer at the censured text. Paco Humm... so that's a spoiler...? I kind of prefer my version! Link to comment Share on other sites More sharing options...
pulpfiction Posted March 1, 2007 Share Posted March 1, 2007 In a such case, is it better to use 'class' or 'id'... sound to me that 'class' is better suited...?Since you will be using this effect many times in your code its best to have CSS class. Link to comment Share on other sites More sharing options...
jlhaslip Posted March 1, 2007 Share Posted March 1, 2007 can I use :hover with something else than 'a'Not if you want it to work in IE6 or earlier IE's.They don't perform on:hover effect except on the <a> tag. (without javascript) Link to comment Share on other sites More sharing options...
pulpfiction Posted March 1, 2007 Share Posted March 1, 2007 can I use :hover with something else than 'a'If you really want to avoid using <a> then JavaScript [mouseover, mouseout] is the option.... just out of curiosity, is there any reason you wanna avoid using <a>? Link to comment Share on other sites More sharing options...
the_paco Posted March 1, 2007 Author Share Posted March 1, 2007 If you really want to avoid using <a> then JavaScript [mouseover, mouseout] is the option.... just out of curiosity, is there any reason you wanna avoid using <a>?Not really... the more I know the better I get! Thanks a lot to all for your time! Link to comment Share on other sites More sharing options...
jesh Posted March 1, 2007 Share Posted March 1, 2007 There is a trick - it's a bit advanced and uses event handlers - you can use if you don't want to use anchors (<a></a>) and you don't want to explicitly type the onmouseover and onmouseout. It's a little overkill but it might help.If you put the spans like this: function SetUpCensuredElements(){ // get all the spans on the page. var spans = document.getElementsByTagName("span"); var span; // loop through all the spans. for(var i = 0; i < spans.length; i++) { span = spans[i]; if(span.className == "Censure") { // if the span has the appropriate class // set up the mouse events for this element span.onmouseover = CensureHover; span.onmouseout = CensureOut; } }}function CensureHover(e){ e = (e) ? e : window.event; var element = (e.target) ? e.target : e.srcElement; element.className = "CensureHover";}function CensureOut(e){ e = (e) ? e : window.event; var element = (e.target) ? e.target : e.srcElement; element.className = "Censure";}// This line tells the window to run your function when the page loads. This will// overwrite any other page load event handlers that you have set up, so // watch out when you use this. There are other ways to attach an event listener, but// I went for simplicity here...window.onload = SetUpCensuredElements; I'm sure you're all set with what you're doing, I just thought I'd show another way. Link to comment Share on other sites More sharing options...
the_paco Posted March 2, 2007 Author Share Posted March 2, 2007 Well thanks!Sooner or later I'll have to get into JAVA anyway...! Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now