Jump to content
  • 0

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


Горбушка
 Share

Question

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

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

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

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

Подробнее:

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

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

КОНТЕНТ

КОНТЕНТ

КОНТЕНТ

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

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

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

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

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

Edited by Горбушка
Link to comment
Share on other sites

8 answers to this question

Recommended Posts

  • 0

<!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 by Dima_2015
Link to comment
Share on other sites

  • 0

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

Dima_2015

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

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

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

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

Edited by Горбушка
Link to comment
Share on other sites

  • 0

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

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

Link to comment
Share on other sites

  • 0

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

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

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

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

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

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

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

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

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

Link to comment
Share on other sites

  • 0

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

<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 by Горбушка
Link to comment
Share on other sites

  • 0
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

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

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

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Answer this question...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

 Share

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy