Версия сайта для слабовидящих, вывод картинки - Joomla 3.x: Шаблоны, разметка и макеты вывода

window.onload = funonload;
function funonload() {
var coocka = ReadSpec('special');
addButton(coocka);
checkSpec(coocka);
}

function checkSpec(spec) {
  setButton(spec);
if (spec == 'y')
{
  addStyleSheet('http://xn--16-vlchf1cxb.xn--p1ai/js/vi.css');
}
}

function ReadSpec(name)
{
 var matches = document.cookie.match(new RegExp(
 "(?:^|; )" + name.replace(/([\.$?*|{}\(\)\[\]\\\/\+^])/g, '\\$1') + "=([^;]*)"
  ));
  return matches ? decodeURIComponent(matches[1]) : undefined;
}

function SetCookieSpec(name,value) {
    document.cookie = name + "=" + value;
}

function addButton() {
    var button = document.createElement('input');
    var parentElem = document.body;
    var s = ReadSpec('special');
    button.type = 'button';
    button.id = 'spec';
    button.value = ' ';
    button.setAttribute("onclick", "Spec()");
    button.setAttribute("style","width: 300px; height: 70px; margin-bottom: 5px; background-image: url(js/vers_for_slabovid.png)");
    parentElem.insertBefore(button, parentElem.firstChild);
    setButton(s);
}

function addStyleSheet(url)
{
  // Создаём элемент LINK/STYLE и добавляем в документ
  var style;

//  

//    if (typeof url == 'undefined')
//  {
//    style = document.createElement('style');
//  }
//  else
//  {
    style = document.createElement('link');
   style.rel = 'stylesheet';
   style.type = 'text/css';
    style.href = url;
//    style.id = 'speccss';
//  }
  
   document.getElementsByTagName('head')[0].appendChild(style);
  // Находим новый стиль в коллекции styleSheets
  style = document.styleSheets[document.styleSheets.length - 1];

  // Делаем объект совместимыми с W3C DOM2 (для IE)
  return StyleSheet_makeCompatible(style);

}
function delStyleSheet()
{
style=document.getElementsByTagName('head')[0].lastChild;//document.styleSheets[document.styleSheets.length - 1]
document.getElementsByTagName('head')[0].removeChild(style);//
}


function Spec() {
var spec = ReadSpec('special');
//alert (spec);

if (spec == 'y')
{
   delStyleSheet();
   SetCookieSpec('special','n');  setButton('n');
}
else {
   addStyleSheet('http://xn--16-vlchf1cxb.xn--p1ai/js/vi.css');
   SetCookieSpec('special','y');  setButton('y');

}
}

function setButton(spec) {
var inputTag = document.getElementById("spec");
 if (inputTag.hasAttribute("value"))               // если есть атрибут value
   defaultValue = inputTag.getAttribute("value");
//if (spec == 'y')
//{
//  inputTag.setAttribute("value", "");
//}
//else {
//  inputTag.setAttribute("value", "версия для слабовидящих");
//}
//}
if (spec == 'y')
{
  inputTag.setAttribute("style", "width: 300px; height: 70px; margin-bottom: 5px; background-image: url(js/stand_vers.png)");

}
else {
  inputTag.setAttribute("style", "width: 300px; height: 70px; margin-bottom: 5px; background-image: url(js/vers_for_slabovid.png)");
}
}


function StyleSheet_makeCompatible(style)
{
  // Mozilla не даёт доступа к cssRules до загрузки стиля
  try
  {
    style.cssRules;
  }
  catch (e)
  {
    return style;
  }

  // Создаём CSSStyleSheet.cssRules
  if (typeof style.cssRules == 'undefined' && typeof style.rules != 'undefined')
    style.cssRules = style.rules;

  // Создаём CSSStyleSheet.insertRule и CSSStyleSheet.deleteRule
  if (typeof style.insertRule == 'undefined' && typeof style.addRule != 'undefined')
    style.insertRule = StyleSheet_insertRule;
  if (typeof style.deleteRule == 'undefined' && typeof style.removeRule != 'undefined')
    style.deleteRule = style.removeRule;

  // Проверяем, существуют ли все нужные свойства
  if (typeof style.cssRules == 'undefined' || typeof style.insertRule == 'undefined'
      || typeof style.deleteRule == 'undefined')
    return null;
  else
    return style;
}

function StyleSheet_insertRule(rule, index)
{
  // Выделяем селектор и стиль из параметра
  if (rule.match(/^([^{]+)\{(.*)\}\s*$/))
  {
    this.addRule(RegExp.$1, RegExp.$2, index);
    return index;
  }
  throw "Syntax error in CSS rule to be added";
}

* {
	color: #000 !important;
	font-style: normal !important;
	font-family: Arial, Helvetica, sans-serif !important;
   font-size: x-large !important;
   font-weight: bold !important;
	overflow: visible;
	line-height: 150% !important;
	letter-spacing: 2px !important;	
}

h1 {
   	font-size: xx-large !important;
}
h2, h3 {
   font-size: x-large !important;
}
div#wrapper {
  width: 1200px !important;
}
div#leftcolumn {
  width: 25% !important;
  float: left;
}
div#maincolumn {
    width: 72% !important;/**/
    margin-top: 0 !important;
    padding-top:0;
}
div#rightcolumn, div#tabarea {
display: none !important;
visibility: hidden;
  width: 0 !important; 
 margin: 0 !important;
 padding: 0 !important;
}
/*p, li {
	padding-bottom: 1.5em  !important;
}*/
a:link, a:hover {
    text-decoration: underline;
}
#spec {
    width: 300px !important;
    height: 70px !important;
    background-image: url(http://xn--16-vlchf1cxb.xn--p1ai/js/stand_vers.png)!important;
     margin-bottom: 5px;
}

h1, h2, h3{
	font-size: xx-large !important;
}

#nav, #menu{
    height: 8em !important;
}
#nav a, #menu a {
    height: 1.6em !important;
}

<?php
$vi = JFactory::getApplication()->input->getString('vi', '');
       $session = JFactory::getSession();
if ($vi=='1' or $vi=='0') {$session->set("vi",  $vi);}
?>
 
<?php if ($session->get("vi")=='1') { ?>
      <link rel="stylesheet" href="js/vi.css" type="text/css" />
    <?php } else { ?>
      <link rel="stylesheet" href="templates/allrounder-3/css/template.css" type="text/css" />
    <?php } ?>

<p style="text-align: center;">
	<a href="http://кулиш16.рф/index.php?vi=1"><img class="download" src="js/vers_for_slabovid.png" title="Версия для слабовидящих" /></a><br />
	<a href="http://кулиш16.рф/index.php?vi=0"><img class="download" src="js/stand_vers.png" title="Обычная версия" /></a></p>