Bloqueador NSFW usando MooTools y CSS -

Uno de mis placeres culpables es descubrir los últimos chismes sobre celebridades en PerezHilton.com, DListed.com y JoBlo.com. Desafortunadamente, estos sitios ocasionalmente publican fotografías NSFW, lo que hace que visitar estos sitios durante el almuerzo sea una gran apuesta: un viaje a la oficina de Recursos Humanos podría estar a solo un clic de distancia.

Dado que la mayoría de las veces es sólo una parte de una imagen determinada que podría considerarse inapropiada, me pregunté si había una manera de obtener la esencia del gráfico de un artículo sin tener que ocultar la imagen completa. Por esa razón, creé un bloqueador NSFW usando CSS y MooTools.

Paso 1: el XHTML

divdiv/divimg src="https://soloprogramadores.top/bloqueador-nsfw-usando-mootools-y-css/johnny-cash.jpg" alt="Johnny Cash" //divdivdiv/divdiv/divimg src="2pac.jpg" alt="Tupac Shakur" //divdivdiv/divimg src="bush.jpg" alt="Presidente Bush" //div

A cada DIV contenedor se le asigna la clase nsfw-wrapper. Dentro del DIV hay otro DIV que sirve como bloqueador para el otro elemento, la imagen. Recomiendo usar un estilo en línea para definir la altura, el peso y la posición del bloqueador.

Paso 2: el CSS

.nsfw-wrapper { ancho: 200px; flotador izquierdo; margen:0 20px 0 0; }.bloqueador{ fondo:#f00; posición:absoluta; }

La clase nsfw-wrapper se puede formatear como desee. La clase nsfw debe estar posicionada de manera absoluta y puedes elegir cualquier color de fondo que desees para tu bloqueador.

Paso 3: El JavaScript de Mootools

// ventana en dom readywindow.addEvent('domready', function() {$$('.nsfw-wrapper').each(function(el) {el.addEvents({'mouseenter': function() {// desvanecer blockerel.getElements('div').each(function(div) {div.fade('out');});},'mouseleave': function() {// desvanecer blockerel.getElements( 'div').each(function(div) {div.fade('in');}); }});});});

Una vez que el DOM esté listo, tomamos cada contenedor. Para cada contenedor, agregamos un evento que desvanece los bloqueadores al ingresar el mouse y vuelve a desvanecer el bloqueador cuando el mouse sale.

Este ejemplo es seguro para el trabajo: solo dedos medios bloqueados.