Смена логотипа при наведении на облость

Горбушка · January 20, 2009

Тему переименовать не смог. Немного поменялся смысл после приложения мозгов к задаче :unsure:

Задача для меня невыполнимаю, но для гуру элементарна.

Имеется: таблица в одну колонку и несколько (2-4) сторк. первая ячейка - НАЗВАНИЕ + ФОН.

Задача: при наведении на таблицу, сменить ФОН на другой.

Подробнее:

Имеется некая таблица

НАЗВАНИЕ+ФОН

КОНТЕНТ

Всю таблицу (вместе с контентом) нужно считать активной облостью. При наведении на эту область (не только текст, а вообще в зону таблицы) необходимо сменить ФОН. Как только мышка ушла из зоны - необходимо всё вернуть обратно.

Сложность: На странице будет 2-3 таких зоны. Каждая должна менять свой ФОН. Код же должен проходить проверку на validator.w3.org

Если реально без JS - буду рад любому решению(css будет даже лучше - его я пойму :rolleyes: )

Кто-нить может помочь?

Заранее сори, если повтор.

Edited January 20, 2009 by Горбушка

Dima_2015 · January 20, 2009

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html>
<head>
<title>Меняем фон</title>
<script type="text/javascript">
function change_backgroundcolor(element, color_code) {
	element.style.backgroundColor = color_code; 
}
</script>
</head>
<body>
<table onmouseover="change_backgroundcolor(this, '#cccfff')" onmouseout="change_backgroundcolor(this, '#ffffff')" border="1" 

style="background-color:#ffffff">
<tr>
	<td>1</td><td>2</td>
</tr>
<tr>
	<td>1</td><td>2</td>
</tr>
<tr>
	<td>1</td><td>2</td>
</tr>
</table>
<br/>
<br/>
<table onmouseover="change_backgroundcolor(this, '#fffccc')" onmouseout="change_backgroundcolor(this, '#cccccc')" border="1" 

style="background-color:#cccccc">
<tr>
	<td>1</td><td>2</td>
</tr>
<tr>
	<td>1</td><td>2</td>
</tr>
<tr>
	<td>1</td><td>2</td>
</tr>
</table>
</body>
</html>

покатит?

Edited January 20, 2009 by Dima_2015

Vlad · January 20, 2009

Если надо без JS и не для IE6, то hover можно использовать.

Горбушка · January 20, 2009

hover - немного не то, да и IE6 хотелось бы..

Dima_2015

Близко, но не то.

Речь шла о фоновой картинке только в первой ячейке. С остальными ячейчами ничего делать не надо =)

Всем спасибо за отклик, но жду более близкий вариант к нужному...

Если не понятно, что нужно - к вечеру выложу флешку, где будет работать как надо =) Но нужно не на флеш, а на HTML ((

Edited January 20, 2009 by Горбушка

Dima_2015 · January 20, 2009

Vlad, ах как часто хочется сделать красиво, лишь бы не для ИЕ 6 )))))

Горбушка, картинка фона 1-й ячейки таблицы говоришь... ну тогда так:

	height: 100px;
}
</style>
<script type="text/javascript">
/**
* Меняет фон всей таблицы, пусть останется, пригодится;)
*/
function change_backgroundcolor(element, color_code) {
	element.style.backgroundColor = color_code; 
}
/**
* Находит 1ю ячейку таблицы и делает заданную картинку ей бэкграундом
*
*/
function change_background(table_element, image_src) {
		// Получаем 1ю ячейку таблицы
	var td = table_element.getElementsByTagName('td')[0];
	   // Меняем ее фон
	td.style.background = 'transparent url(' + image_src + ') left top no-repeat';
}
</script>
</head>
<body>
<table onmouseover="change_background(this, '1.jpeg')" onmouseout="change_background(this, '2.jpeg')" border="1" 

style="background-color:#ffffff">
<tr>
	<td>12345</td><td>12345</td>
</tr>
<tr>
	<td>12345</td><td>12345</td>
</tr>
<tr>
	<td>12345</td><td>12345</td>
</tr>
</table>
<br/>
<br/>
<table onmouseover="change_background(this, '1.jpeg')" onmouseout="change_background(this, '2.jpeg')" border="1" 

style="background-color:#cccccc">
<tr>
	<td>1</td><td>2</td>
</tr>
<tr>
	<td>1</td><td>2</td>
</tr>
<tr>
	<td>1</td><td>2</td>
</tr>
</table>
</body>
</html>

Предполагается, что картинки 1.jpeg и 2.jpeg лежат в 1й папке с хтмл-файлом.

Как работает смотри тут: http://krizisov.net/table/test.html

Если опять не то, давай флешку...

Горбушка · January 21, 2009

То. Спасибо...

Осталась одна проблема - пока не наведёшь на таблицу - картинки нет...

Тут нужно просто указать фон таблицы или через JS делать?

И второй вопрос: менять местоположение картинки можно? Т.е. имеется двиг - в нём папка с стилями... Можно ли картинку ззапихнуть туда и поправить путь?

Офф: поэксперементирую до ответа.

Ещё раз спасибо - это на 99% то, что нужно.

Dima_2015, Поэксперементил - всё именно так, как задумывалось!!!

Огроменное спасибо!!! *Бьюсь головой ап стену от счастья*

Vlad, тебе тоже спасибо за предложение... Но вариант от Dima_2015 мне подошёл на 100%

Dima_2015 · January 21, 2009

Горбушка, всегда пожалуйста :rolleyes:

Горбушка · January 26, 2009

Спасибо! Код получился такой - всё прекрасно работает!

<script type="text/javascript">
function change_background(table_element, image_src) {
	var th = table_element.getElementsByTagName('th')[0];
	th.style.background = 'transparent url(' + image_src + ') left top';
}
</script>
<style type="text/css">
.block {
	height: 40px; 
	background-image: url('img/titlebar.png');
	color : #FFFFFF;
}
</style>

- - - - - - -
<table style="width: 250px" onmouseover="change_background(this, 'img/titlebar-active.png')" onmouseout="change_background(this, 'img/titlebar.png')">
	<tr>
		<th class="block">Заголовок</th>
	</tr>
	<tr>
		<td>Контект</td>
	</tr>
	<tr>
		<td>Низ</td>
	</tr>
</table>

Edited January 26, 2009 by Горбушка

Doctor_Joy · March 7, 2009

Vlad, ах как часто хочется сделать красиво, лишь бы не для ИЕ 6 )))))

Горбушка, картинка фона 1-й ячейки таблицы говоришь... ну тогда так:

	height: 100px;
}
</style>
<script type="text/javascript">
/**
* Меняет фон всей таблицы, пусть останется, пригодится;)
*/
function change_backgroundcolor(element, color_code) {
	element.style.backgroundColor = color_code; 
}
/**
* Находит 1ю ячейку таблицы и делает заданную картинку ей бэкграундом
*
*/
function change_background(table_element, image_src) {
		// Получаем 1ю ячейку таблицы
	var td = table_element.getElementsByTagName('td')[0];
	   // Меняем ее фон
	td.style.background = 'transparent url(' + image_src + ') left top no-repeat';
}
</script>
</head>
<body>
<table onmouseover="change_background(this, '1.jpeg')" onmouseout="change_background(this, '2.jpeg')" border="1" 

style="background-color:#ffffff">
<tr>
	<td>12345</td><td>12345</td>
</tr>
<tr>
	<td>12345</td><td>12345</td>
</tr>
<tr>
	<td>12345</td><td>12345</td>
</tr>
</table>
<br/>
<br/>
<table onmouseover="change_background(this, '1.jpeg')" onmouseout="change_background(this, '2.jpeg')" border="1" 

style="background-color:#cccccc">
<tr>
	<td>1</td><td>2</td>
</tr>
<tr>
	<td>1</td><td>2</td>
</tr>
<tr>
	<td>1</td><td>2</td>
</tr>
</table>
</body>
</html>

Предполагается, что картинки 1.jpeg и 2.jpeg лежат в 1й папке с хтмл-файлом.

Как работает смотри тут: http://krizisov.net/table/test.html

Если опять не то, давай флешку...

Пасиб, супер получилось ))

Sign In

Смена логотипа при наведении на облость

Question

Горбушка

Link to comment

Share on other sites

8 answers to this question

Recommended Posts

Dima_2015

Link to comment

Share on other sites

Vlad

Link to comment

Share on other sites

Горбушка

Link to comment

Share on other sites

Dima_2015

Link to comment

Share on other sites

Горбушка

Link to comment

Share on other sites

Dima_2015

Link to comment

Share on other sites

Горбушка

Link to comment

Share on other sites

Doctor_Joy

Link to comment

Share on other sites

Join the conversation

Обсуждения

Forums

Important Information