Tema: Podria hacer esto (javascript) solo con CSS?...
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 12/12/2008, 15:03
Avatar de Null_
Null_
 
Fecha de Ingreso: octubre-2008
Ubicación: Santiago
Mensajes: 530
Antigüedad: 15 años, 6 meses
Puntos: 30
Podria hacer esto (javascript) solo con CSS?...
Podria llegar a crear mi ejemplo de mi web que está creado con Javascript+HTML+CSS en puro HTML+CSS???... quiero evolucionar mi ejemplo y transformarlo a CSS completamente para lograr un mejor puntaje de accesibilidad en la web...
En realidad este código es accesible y estandar... el uso o no de javascript solo limita al usuario a utilizar los botones funcionales...
pero estoy obsecionado con ganarme esos puntitos de accesibilidad además de reducir las lineas de código HTML y también que mi archivo .js muera definitivamente...

aqui pueden ver un ejemplo en funcionamiento

y tambien el código (no se asusten) xD

Código HTML:
<div id="Contenido">

<h1>Ejemplo</h1>

<div class="iconos">
<div id="abrir_1" style="display:none;"><a href="javascript:abrir_1()"><img src="/img/icono-codigo-fuente.png" alt="Abrir ejemplo" /><br />Ejemplo.html (C&oacute;digo Fuente)</a></div>
</div>

<div id="ejemplo_html">
<div id="titulo_1"><div style="float:right;">

<span id="min_1"><a href="javascript:minimizar_1()" title="Minimizar ejemplo"><img src="/img/boton_minimizar.gif" alt="Minimizar ejemplo" /></a></span><span id="min_1_x" style="display:none;"><a href="javascript:minimizar_1_x()" title="Desminimizar ejemplo"><img src="/img/boton_minimizar_x.gif" alt="Desminimizar ejemplo" /></a></span>
<span id="rest_1"><a href="javascript:restaurar_1()" title="Restaurar ejemplo"><img src="/img/boton_restaurar.gif" alt="Restaurar ejemplo" /></a></span><span id="max_1" style="display:none;"><a href="javascript:maximizar_1()" title="Maximizar ejemplo"><img src="/img/boton_maximizar.gif" alt="Maximizar ejemplo" /></a></span>
<a href="javascript:cerrar_1()" title="Cerrar ejemplo"><img src="/img/boton_cerrar.gif" alt="Cerrar ejemplo" /></a>
</div>Ejemplo.html - Block de Notas
</div>
<div id="ContEjemplo"><span class="ejemplo_doctype">&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Strict//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd&quot;&gt;</span><br />
&lt;html <span class="ejemplo_doctype">xmlns=&quot;http://www.w3.org/1999/xhtml&quot; xml:lang=&quot;es&quot; lang=&quot;es&quot;</span>&gt;<br />

&lt;head&gt;<br />
&lt;title&gt;Ejemplo XHTML CodigodeMaquina&lt;/title&gt;<br />
<span class="ejemplo_doctype">&lt;meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /&gt;</span><br />
&lt;/head&gt;<br />
&lt;body&gt;<br />
<br />

&lt;p&gt;<br />

Este es el ejemplo de código XHTML<br />
&lt;/p&gt;

<br /><br />
&lt;/body&gt;<br />

&lt;/html&gt;
</div>
</div>

<div class="iconos">
<div id="abrir_2" style="display:none;"><a href="javascript:abrir_2()"><img src="/img/icono-navegador.png" alt="Abrir ejemplo" /><br />Ejemplo.html (Navegador)</a></div>
</div>

<div id="ejemplo_naveg">
<div id="titulo_2">
<div style="float:right;">
<span id="min_2"><a href="javascript:minimizar_2()" title="Minimizar ejemplo"><img src="/img/boton_minimizar.gif" alt="Minimizar ejemplo" /></a></span><span id="min_2_x" style="display:none;"><a href="javascript:minimizar_2_x()" title="Desminimizar ejemplo"><img src="/img/boton_minimizar_x.gif" alt="Desminimizar ejemplo" /></a></span>

<span id="rest_2"><a href="javascript:restaurar_2()" title="Restaurar ejemplo"><img src="/img/boton_restaurar.gif" alt="Restaurar ejemplo" /></a></span><span id="max_2" style="display:none;"><a href="javascript:maximizar_2()" title="Maximizar ejemplo"><img src="/img/boton_maximizar.gif" alt="Maximizar ejemplo" /></a></span>
<a href="javascript:cerrar_2()" title="Cerrar ejemplo"><img src="/img/boton_cerrar.gif" alt="Cerrar ejemplo" /></a>
</div>Ejemplo XHTML CodigodeMaquina - Mozilla Firefox
</div>
<div id="ContResultado">

<p>
Este es el ejemplo de código XHTML
</p>

</div>
</div>

</div>
CSS
Código: 
body		{ font-family : 'Trebuchet MS', Verdana, 'MS sans Serif', arial, tahoma, Helvetica; } 
img		{ border : 0; } 
#Contenido	{ width : 620px; } 

/* VENTANA DEL EJEMPLO XHTML */

#ejemplo_html {
	background:url('/img/fondo_titulo_ejemplo.png') repeat-x top;
	margin:10px 0px 15px;
	border:2px solid #CCC;
	}

#ejemplo_html #titulo_1 {
	background:url('/img/icono-notepad.gif') no-repeat 6px 2px;
	border:1px solid #444;
	border-top:1px solid #222;
	padding:2px 6px 4px 24px;
	font:8pt verdana;color:#FFF;
	text-align:left;
	}

#ejemplo_html #ContEjemplo {
	border:1px solid #444;
	border-top:0px;padding:3px;
	font-size:10pt;
	font-family:"lucida console";
	color:black;
	background:url(img/fondo_ejemplo.gif) center no-repeat #FFF;
	}


/* VENTANA DEL RESULTADO EN NAVEGADOR */

#ejemplo_naveg {
	background:url('/img/fondo_titulo_ejemplo.png') repeat-x top;
	margin:10px 0px 15px;
	border:2px solid #CCC;
	}

#ejemplo_naveg #titulo_2 {
	background:url('/img/icono-firefox.gif') no-repeat 5px 2px;
	border:1px solid #444;border-top:1px solid #222;
	padding:2px 6px 4px 36px;
	font:8pt verdana;color:#FFF;
	text-align:left;
	}

#ejemplo_naveg #ContResultado {
	background-color:#FFF;
	border:1px solid #444;
	border-top:0px;padding:5px 8px;
	font-size:12pt;font-family:'times new roman';
	color:black;
	}


/* ICONOS DEL EJEMPLO */

#abrir_1, #abrir_2 {
	line-height:8px;
	width:80px;
	margin:0px 2px 10px 0px;
	text-align:center;
	}

#abrir_1 a, #abrir_2 a {
	letter-spacing:0px;
	font-size:x-small;
	text-decoration:none;
	color:#444;
	}
Javascript
Código: 
function minimizar_1() { document.getElementById('ContEjemplo').style.display='none';
			 document.getElementById('min_1_x').style.display='inline';
			 document.getElementById('min_1').style.display='none';
			 }

function minimizar_1_x() { document.getElementById('ContEjemplo').style.display='block';
			 document.getElementById('min_1').style.display='inline';
			 document.getElementById('min_1_x').style.display='none';
			 }

function restaurar_1() { document.getElementById('ContEjemplo').style.display='block';
			 document.getElementById('ContEjemplo').style.height='150px';
			 document.getElementById('ejemplo_html').style.width='450px';
			 document.getElementById('ContEjemplo').style.overflow='auto';
			 document.getElementById('min_1_x').style.display='none';
			 document.getElementById('min_1').style.display='inline';
			 document.getElementById('rest_1').style.display='none';
			 document.getElementById('max_1').style.display='inline';
			 }

function maximizar_1() { document.getElementById('ContEjemplo').style.display='block';
			 document.getElementById('min_1_x').style.display='none';
			 document.getElementById('min_1').style.display='inline';
			 document.getElementById('ContEjemplo').style.height='100%';
			 document.getElementById('ejemplo_html').style.width='100%';
			 document.getElementById('ContEjemplo').style.overflow='auto';
			 document.getElementById('max_1').style.display='none';
			 document.getElementById('rest_1').style.display='inline';
			 }

function cerrar_1()    { document.getElementById('ejemplo_html').style.display='none';
			 document.getElementById('abrir_1').style.display='block';
			 }

function abrir_1()     { document.getElementById('ejemplo_html').style.display='block';
			 document.getElementById('abrir_1').style.display='none';
			 }



function minimizar_2() { document.getElementById('ContResultado').style.display='none';
			 document.getElementById('min_2_x').style.display='inline';
			 document.getElementById('min_2').style.display='none';
			 }

function minimizar_2_x() { document.getElementById('ContResultado').style.display='block';
			 document.getElementById('min_2').style.display='inline';
			 document.getElementById('min_2_x').style.display='none';
			 }

function restaurar_2() { document.getElementById('ContResultado').style.display='block';
			 document.getElementById('ContResultado').style.height='150px';
			 document.getElementById('ejemplo_naveg').style.width='450px';
			 document.getElementById('ContResultado').style.overflow='auto';
			 document.getElementById('min_2_x').style.display='none';
			 document.getElementById('min_2').style.display='inline';
			 document.getElementById('rest_2').style.display='none';
			 document.getElementById('max_2').style.display='inline';
			 }

function maximizar_2() { document.getElementById('ContResultado').style.display='block';
			 document.getElementById('min_2_x').style.display='none';
			 document.getElementById('min_2').style.display='inline';
			 document.getElementById('ContResultado').style.height='100%';
			 document.getElementById('ejemplo_naveg').style.width='100%';
			 document.getElementById('ContResultado').style.overflow='auto';
			 document.getElementById('max_2').style.display='none';
			 document.getElementById('rest_2').style.display='inline';
			 }

function cerrar_2()    { document.getElementById('ejemplo_naveg').style.display='none';
			 document.getElementById('abrir_2').style.display='block';
			 }

function abrir_2()     { document.getElementById('ejemplo_naveg').style.display='block';
			 document.getElementById('abrir_2').style.display='none';
			 }
bueno el que pueda indicarme alguna técnica o guiarme para lograr esto solamente con CSS se lo agradeceria mucho, si no, tendre que estar de porvida con este código feo...
__________________
Diego Escares
• Twitter: @diegoescares
• Web: diegoescares.com