Reputation: 115
I'm adding an accessibility tool of users being able to increase the font-size of all the text on the page, and being able to go back to the default font-size if they wanted to. I have made a second CSS file which holds the css rules for the text to increase. However when I click on the icons I made for the text larger/text smaller it does not work. Can anybody understand why? Thanks for the help.
HTML code on the home page:
<div id="font-size-buttons">
<a href="#" onclick="changeCSS('notaccessible.css', 2);"><img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmin.png" width="25" height"25" alt="Switch to original text size and colours"></a>
<a href="#" onclick="changeCSS('stylesheet.css', 2);"><img src="http://www.me14ch.leedsnewmedia.net/slate/images2/fontmax.png" width="30" height="30" alt="Switch to larger text and improved colour contrast"></a>
</div>
Some of the default CSS stylesheet code:
.body {
height: 100%;
overflow: auto;
padding-bottom: 25px;
font-size: 0.75em;
}
/* accessibility */
#font-size-buttons {
float: right;
clear: both;
margin-right: 5px;
}
And the CSS from the alternative stylesheet:
body {
font-size: 1.5em;
}
And the linking stylesheet code at the top of my index.html page:
<link href="stylesheet.css" rel="stylesheet" type="text/css" />
<link href="http://me14ch.leedsnewmedia.net/slate/notaccessible.css" rel=alternate stylesheet" type="text/css" title="access"/>
The website link: www.me14ch.leedsnewmedia.net/slate
Upvotes: 0
Views: 97
Reputation: 4157
That's because changeCSS
is not defined.
in onclick="....">
you execute a piece of Javascript, in your case a function called changeCSS
with the variables 'notaccessible.css'
and 2
.
But nowhere in your code you have a function called changeCSS
. So you either have to write that function, or change your html.
[edit]
Upvotes: 1