Помогите дописать скрипт

myspace2000 · April 28, 2012

Здравствуйте, друзья!

Мне нужно написать скриптик, который сначала при загрузке страницы каждому элементу <а> присваивает обработчик на событие onclick. В самом обработчике нужно поменять картинку img с определенным id (src на другой файл)

Я профан в js. погуглив тему собрал такой скрипт



<script type="text/javascript">
i=0;
img_a=new Array()
img_a[0]=new Image()
img_a[1]=new Image()
img_a[2]=new Image()
img_a[0].src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/back1.jpg"
img_a[1].src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/back2.jpg"
img_a[2].src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/back3.jpg"


function img_d()
{
    var a, links, i;
    links = document.getElementsByTagName('a');
    for (i = 0; i < links.length; i++) {
        links[i].onclick = function() { 
                img_b();
				}
    }
};

function img_b()
{
	var ChangingImg = document.getElementById("ChangingImg");
    ChangingImg.src = img_a[i].src
	i++
	if(i>2) i=0;

}

</script>

................

<body onLoad=img_d()> 


	<div id="page-background"><img id="ChangingImg" src="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/images/background.jpg" width="100%" height="100%"></div>


.................

</body>

При таком подходе картинка при клике на ссылку меняется например на back1.jpg, но потом снова "сбрасывается" в начальное background.jpg. Как это обойти? Кроме того, наверняка будут подсказки как можно это оптимизировать - буду признателен и за них!

Либо даже все проще: при загрузке страницы присваивать одно из значений параметру src тэга img с id ChangingImg. Как это проще всего реализовать?

Заранее спасибо!!!!

Edited April 28, 2012 by myspace2000

ruslan.savenok · April 29, 2012

Вас возвращает назад, потому что у события

onclick

не стоит

return false;

, который сбрасывает стандартное действие при переходе на ссылку.

Как я понял, при клике на ссылку вам нужно менять фон страницы, я бы сделал это так:

P.S. — не уверен что синтаксис JS правильный, т.к. более полугода не писал на чистом JavaScript без jQuery

CSS

.bg-1 {}
.bg-2 {}
.bg-3 {}

HTML

<body>
<a href="#switch-bg_bg-1">.bg-1</a>
<a href="#switch-bg_bg-2">.bg-2</a>
<a href="#switch-bg_bg-3">.bg-3</a>
</body>

JS

var links = document.getElementsByTagName('a');

for (var item in links) {
  item.onclick = function () {
    document.body.className = this.hash.replace('#switch-bg_', '');

    return false;
  }
}

Edited April 29, 2012 by ruslan.savenok

nerv · April 30, 2012

ruslan.savenok, может function declaration было бы достаточно ? )

Sign In

Помогите дописать скрипт

Question

myspace2000

Link to comment

Share on other sites

2 answers to this question

Recommended Posts

ruslan.savenok

Link to comment

Share on other sites

nerv

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information