NEURONASOFT: Cambiar tamaño de letra mediante javascript

Para lograr el efecto agradable de reducir / agrandar el tamaño del texto de una página web simplemente usamos un poquito de javascript con css.
Vamos a mostrar una página web, con un menú y un contenido al lado derecho. La idea es que sólo se redimensione el tamaño de letra del lado derecho de la página, no de toda la página.
Adicionalmente a esto, desde el javascript le damos un tratamiento especial a algunas etiquetas html, como el H1 o el H4, los cuales deben redimensionarse pero siempre deben ser de tamaño superior al resto del artículo.
Para lograr este efecto de redimensionar el texto, contamos con tres enlaces: pequeña, normal, grande, debiendo quedar seleccionado el enlace que está aplicándose.
No es necesario que prueben este ejemplo en una página aspx, simplemente usen una html, pero igual funcionará.
Este es el código completo:

<html>
<head>
<title>Cambiando el tamaño de letra con javascript</title>
<style type='text/css'>
*  {   font-size: 12pt; font-family: verdana;   }
h1 {   font-size: 18pt;  }
#MediumFont  {  background-color: orange;   }
#bar {  text-align: right; background-color: yellow; border: solid 1px orange; padding: 5px; margin-bottom: 10px;  }
#menu  {  background-color: Green; width: 29%;  float: left; }
#PostContent  { width: 70%;  background-color: lightgreen; float: right; padding: 5px; }
</style>
<script type="text/javascript">
var Counter = 0;
function ResizeText(size) 
{
if ((size == '10') && (Counter == 0)) return;
var HtmlTags = document.getElementById('PostContent').getElementsByTagName('*');

for (i = 0; i < HtmlTags.length; i++) 
{
if (HtmlTags[i].tagName == "H4") 
{
if (size == '8') 
{
HtmlTags[i].style.fontSize = 10 + "pt"
}
else if (size == '10') 
{
HtmlTags[i].style.fontSize = 12 + "pt"
}
else if (size == '12') 
{
HtmlTags[i].style.fontSize = 14 + "pt"
}
}
else if (HtmlTags[i].tagName == "H1") 
{
if (size == '8')
HtmlTags[i].style.fontSize = 14 + "pt"
else if (size == '10')
HtmlTags[i].style.fontSize = 16 + "pt"
else if (size == '12')
HtmlTags[i].style.fontSize = 18 + "pt"
}
else 
{
HtmlTags[i].style.fontSize = size + "pt"
}
}

if (size == '8') 
{
Counter = 1;
document.getElementById('SmallFont').style.backgroundColor = 'orange';
document.getElementById('MediumFont').style.backgroundColor = 'yellow';
document.getElementById('LargeFont').style.backgroundColor = 'yellow';
}
else if (size == '10') 
{
document.getElementById('SmallFont').style.backgroundColor = 'yellow';
document.getElementById('MediumFont').style.backgroundColor = 'orange';
document.getElementById('LargeFont').style.backgroundColor = 'yellow';
}
else if (size == '12') 
{
Counter = 1;
document.getElementById('SmallFont').style.backgroundColor = 'yellow';
document.getElementById('MediumFont').style.backgroundColor = 'yellow';
document.getElementById('LargeFont').style.backgroundColor = 'orange';
}
}
</script>
</head>
<body>
<div id="bar">
Letra: <a href="javascript:;" onclick="ResizeText('8');" id="SmallFont">Pequeña</a>
<a href="javascript:;" onclick="ResizeText('10');" id="MediumFont">Normal</a> <a
href="javascript:;" onclick="ResizeText('12');" id="LargeFont">Grande</a>
</div>

<div id="menu">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Quiénes somos</a></li>
<li><a href="#">Nuestros Servicios</a></li>
<li><a href="#">Productos</a></li>
<li><a href="#">Contáctenos</a></li>
</ul>
</div>

<div id="PostContent">
<h1>
Título Principal</h1>
<h4>
Este es un subtítulo</h4>
<p>
<strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting
industry. Lorem Ipsum has been the industry's standard dummy text ever since the
1500s, when an unknown printer took a galley of type and scrambled it to make a
type specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in the
1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more
recently with desktop publishing software like Aldus PageMaker including versions
of Lorem Ipsum.
</p>
<a href="http://www.google.com">Enlace a Google</a>
</div>

</body>
</html>

Espero que les sea de utilidad ;)

NEURONASOFT

Páginas

miércoles, 18 de mayo de 2011

Cambiar tamaño de letra mediante javascript

No hay comentarios.: