Как сделать изображения доступными для javascript?

Question

Недавно я установил настраиваемые поворотные баннеры на моем блогере, используя этот код, с которым я сталкиваюсь, но я не могу понять, как сделать изображения доступными для ссылки на главную страницу. Любая помощь будет высоко оценена.

Heres код:

<script type='text/javascript'> 
var HeaderImage= new Array() 

HeaderImage[0]=&quot;http://Example1.png&quot; 
HeaderImage[1]=&quot;http://Example2.png&quot; 
HeaderImage[2]=&quot;http://Example3.png&quot; 
HeaderImage[3]=&quot;http://Example4.png&quot; 
HeaderImage[4]=&quot;http://Example5.gif&quot; 
HeaderImage[5]=&quot;http://Example6.png&quot; 
HeaderImage[6]=&quot;http://Example7.png&quot; 
var random=Math.round(6*Math.random()); 

document.write(&quot;<style>&quot;); 
document.write(&quot;#header {&quot;); 
document.write(&#39; background:url(&quot;&#39; + HeaderImage[random] + &#39;&quot;) no-repeat left TOP;&#39;); 
document.write(&quot; }&quot;); 
document.write(&quot;</style>&quot;); 

</script> 

его рабочих Теперь ребята. Я просто не был уверен, где разместить теги, которые меня связывают. Большое спасибо за вашу помощь.

Answer 1

Этот код имеет проблемы с &quot вместо ". Но помимо этого, что делает этот код, устанавливается фоновое изображение для объекта с id="header". Чтобы сделать этот объект кликабельным, вы можете окружить объект заголовка тегом <a>. Например, если объект заголовка был ДИВ, то вы бы использовать что-то вроде этого:

<a href="xxx"><div id="header"></a></a> 

Если есть какая-то причина, почему вы не хотите использовать ссылку, чтобы сделать область кликабельным (который является самым простым способ сделать это), то вы можете также использовать JavaScript, как это:

document.getElementById("header").onclick = function() { 
    window.location = "http://my.example.com"; 
} 

Это будет либо помещен после страницы HTML (так рассматриваемый объект уже загружен при выполнении этого кода).

Если вы покажете нам фактический HTML-код, содержащий объект заголовка, мы могли бы уточнить, как сделать его интерактивным.

Из рассмотрения вашего HTML, если вы хотите, чтобы сделать его интерактивным только с вашим HTML, вы можете изменить эту часть вашего HTML:

<b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> 
<b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/> 
</b:section> 

к этому (который только окружает его с <a> тегом:

<a href="http://my.example.com"> 
    <b:section class='header' id='header' maxwidgets='2' showaddelement='yes'> 
     <b:widget id='Header1' locked='true' title='Mum4d.com (Header)' type='Header'/> 
    </b:section> 
</a> 

Answer 2

У вас на самом деле нет элементов изображения, так что это ваша первая проблема.

Простейшее решение (чтобы сделать изображения кликабельными) заключается в том, чтобы обернуть изображения в тегах привязки с атрибутом href, установленным в ваш индекс. Кажется, что вы на самом деле выполняете динамическое написание некоторого css для элемента с id #header и установки его фона для изображения. Когда вы это делаете, нет фактических элементов img, поэтому пользователю нечего нажимать, кроме самого элемента.

Не видя больше вашей разметке, я предлагаю просто оборачивать ваш #header элемент якоря, как этот <a href='/'><some_element id='header'></some_element></a>

Answer 3

ИДК, как работает Blogger, так что я просто скажу вам быстрый и грязный путь к заставить его работать с javascript.

Поместите это после того, как код, который вы показали нам, даже после закрытия тег сценария

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script> 
<script> 
$(function() { 
    $('#header').click(function() { 
     window.location = '/'; 
    }); 
}); 
</script>