Jean said:
I need to have some of my documents viewable in larger fonts. I have seen
some websites that have three or four different size A's and when you
click
on one, it enlarges the font size of that page. I am not sure what it is
called but I would like to know how to do this for user accessibility.
Thanks.
Try this javascript:
Put this in your <head> section.
<script type="text/javascript">
var min=8;
var max=18;
/*increase font Paragraph */
function increaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p
.style.fontSize) {
var s = parseInt(p.style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=max) {
s += 1;
}
p.style.fontSize = s+"px"
}
}
/*Decrease Font Paragraph*/
function decreaseFontSize() {
var p = document.getElementsByTagName('p');
for(i=0;i<p.length;i++) {
if(p.style.fontSize) {
var s = parseInt(p.style.fontSize.replace("px",""));
} else {
var s = 12;
}
if(s!=min) {
s -= 1;
}
p.style.fontSize = s+"px"
}
}
</script>
Add links (text) or create your own images and add the <href> tags as below
to call the javascript functions.
Put these lines where you want the links to be on the page.
<a href="javascript:increaseFontSize();">Increase Text</a>
<a href="javascript:decreaseFontSize();">Decrease Text</a>
The above are normal text links, but you can add an <img> tag to make the
link instead of text.
e.g instead of text, you can use images with for example "A+" (for increase)
and "A-" (for decrease)
This script has two links - one to increase, and one to descrease.
Clicking increase multiple times will increase the text exponentionally (in
the script you can specify the "max" and "min" sizes.
Also it only works on a particular HTML element e.g. its default is set to
work on <p> (paragaraphs) but it won't affect text in tables, or lists <ul>
or <ol> you can change it from <p> to <td> (table data) or the <li> (list),
<ul> (unordered list).
You can change the element, but it seems to only accept one element, not
multiples.
