Censured text

[the_paco]

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!

[jlhaslip]

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)

[the_paco]

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!?"...

[jlhaslip]

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...

[pulpfiction]

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...

[the_paco]

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!

[pulpfiction]

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.

[jlhaslip]

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)

[pulpfiction]

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>?

[the_paco]

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!

[jesh]

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.

[the_paco]

Well thanks!Sooner or later I'll have to get into JAVA anyway...!