Как изменить background_image с помощью JS

bgraf · December 9, 2009

Добрый день всем !

Помогите , как мне решить проблему .

У меня есть меню , при нажатии на кнопку выпадает подменю , при этом я хочу изменить картинку на меню , т.е. при закрытом подменю у меня на кнопке картинка с плюсиком , а при открытом подменю мне надо эту картинку изменить на картинку с минусом .

Вот css для этой картинки:

div.menu_open{
float:left;
background-image: url(menu/images/menu_plus.jpg);
width:33px;
height:31px;
cursor:pointer;
}

а вот код JS :

menu_plus = new Image();
menu_plus.src = "menu/images/menu_plus.jpg";
menu_minus = new Image();
menu_minus.src = "menu/images/menu_minus.jpg";

function show(num) 
{


	if (document.getElementById("showdetailes" + num).style.display=="none")
	{		
		document.getElementById("showdetailes" + num).style.display="";
		document.getElementById("p" + num).style.backgroundImage = 'url('+menu_minus.src+')'; 
	}
	else 
	{
		document.getElementById("showdetailes" + num).style.display="none";
		document.getElementById("p" + num).style.backgroundImage = 'url('+menu_plus.src+')';
	}
}

функция show вызывается по средствам onclick на картинку .

с помощью этой функции я пытаюсь изменить стиль background_image , но что то не получается , подскажите как мне правельно написать

спасибо всем огромное

Great Rash · December 9, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		.n {
			display: none;
		}
	</style>

	<script type="text/javascript">

	</script>
</head>

<body>

	<div id="q" class="n"></div>

	<script type="text/javascript">
		alert(document.getElementById('q').style.display);
	</script>

</body>
</html>

Как видно из вышеприведенного кода alert показывает пустую строку (или null), из этого должно быть ясно, что у вас просто не выполняется условие:

if (document.getElementById("showdetailes" + num).style.display=="none")

т.к.

null != "none"

естественно ничего не работает.

bgraf · December 9, 2009

спасибо за пример , не хочу показаться не благодарным но дело в том что именно это работает так как при помощи этой проверки див с подменю появляется и исчезает , а вот backgroundimage

document.getElementById("p" + num).style.backgroundImage = 'url('+menu_minus.src+')';

не меняет картинку

Great Rash · December 9, 2009

тогда попробуйте написать в условие по алерту и посмотреть. что происходит.

а в идеале неплохо бы сварганить тестовую страничку на подобие моей с проблемным местом - тогда дело пойдет в разы быстрее

bgraf · December 9, 2009

тогда попробуйте написать в условие по алерту и посмотреть. что происходит.
а в идеале неплохо бы сварганить тестовую страничку на подобие моей с проблемным местом - тогда дело пойдет в разы быстрее

вот посмотрите я сделал это при помощи дополнительного css и это работает а вот прямо изменить через яву скрипт не получается .

function show(num)

{

/*alert(num);*/

if (document.getElementById("showdetailes" + num).style.display=="none")

{

document.getElementById("showdetailes" + num).style.display="";

/*document.getElementById("p" + num).style.backgroundImage = 'url('+menu_minus.src+')';*/

document.getElementById("p" + num).className = 'menu_close';

}

else

{

document.getElementById("showdetailes" + num).style.display="none";

/*document.getElementById("p" + num).style.backgroundImage = 'url('+menu_plus.src+')';*/

document.getElementById("p" + num).className = 'menu_open';

}

Great Rash · December 9, 2009

Вы можете сделать страницу тестовую или нет? Так очень сложно разбираться.

bgraf · December 9, 2009

Вы можете сделать страницу тестовую или нет? Так очень сложно разбираться.

да конечно вот вам ссылка http://www.otium.co.il/otium/menu/test.php

в данном примере работает как я и сказал выше с еще одним стилем но не на прямую как хотелось бы

Great Rash · December 9, 2009

Сварганил тестовую страницу, разбирайтесь:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
	<title>An XHTML 1.0 Strict standard template</title>
	<meta http-equiv="content-type" content="text/html;charset=utf-8" />
	<meta http-equiv="Content-Style-Type" content="text/css" />

	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font: 12px Arial;
		}

		body {
			margin: 10px;
		}

		.cont, ul {
			list-style: none;
		}

		.cont {
			width: 270px;
			padding: 15px;
			background: lightgreen;
			-moz-border-radius-topleft: 25px;
			-moz-border-radius-bottomright: 25px;
		}

		.cont a {
			display: block;
			padding: 5px 0 5px 33px;
			background: url('http://www.otium.co.il/otium/menu/images/menu_plus.jpg') left center no-repeat;
		}

		.cont li ul {
			display: none;
		}

		.cont li li {
			padding-left: 33px;
		}
	</style>

	<script type="text/javascript">
		menu_plus = new Image();
		menu_plus.src = "http://www.otium.co.il/otium/menu/images/menu_plus.jpg";
		menu_minus = new Image();
		menu_minus.src = "http://www.otium.co.il/otium/menu/images/menu_minus.jpg";

		function toggleVisibity(obj) {
			var objParent = obj.parentNode;
			var links = objParent.getElementsByTagName('ul')[0];

			if (!links.style.display || links.style.display == 'none') {
				links.style.display = 'block';
				obj.style.backgroundImage = 'url(' + menu_minus.src + ')';
			} else {
				links.style.display = 'none';
				obj.style.backgroundImage = 'url(' + menu_plus.src + ')';
			}
		}
	</script>
</head>

<body>

	<ul class="cont">
		<li>
			<a href="#" onclick="toggleVisibity(this);">Отдых и развлечения</a>
			<ul>
				<li>test</li>
				<li>test</li>
				<li>test</li>
			</ul>
		</li>
		<li>
			<a href="#" onclick="toggleVisibity(this);">Отели и гостиницы</a>
			<ul>
				<li>test</li>
				<li>test</li>
				<li>test</li>
			</ul>
		</li>
		<li>
			<a href="#" onclick="toggleVisibity(this);">Передвижение по стране</a>
			<ul>
				<li>test</li>
				<li>test</li>
				<li>test</li>
			</ul>
		</li>
	</ul>

</body>
</html>

bgraf · December 9, 2009

Спасибо огромное Вам !!!

Sign In

Как изменить background_image с помощью JS

Question

bgraf

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Great Rash

Link to comment

Share on other sites

bgraf

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

bgraf

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

bgraf

Link to comment

Share on other sites

Great Rash

Link to comment

Share on other sites

bgraf

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information