| |
|
|
| | Как сделать чтобы при наведении мышки на ячейку из таблицы, ячейка увеличивалась?
Я сделал, но не могу сделать чтобы остальные ячейки не смещались...
html файл
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>MAP</title>
<link rel="StyleSheet" type="text/css" href="style.css">
</head>
<body>
<center>
<table>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
<tr>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
<td>
<div></div>
</td>
</tr>
</table>
</center>
</body>
</html>
|
css файл
body {
background-color: #C6F77D;
}
div{
background-color: #6EB10D;
border: 1px double #008201;
height: 150px;
width: 150px;
}
div:hover{
background-color: #FFE239;
height: 300px;
width: 300px;
}
|
также, файлы прикреплены в аттач | |
| |
|
|
| |
|
|
| |
для: Gendalf
(27.02.2008 в 20:02)
| | | 1. конструкция div:hover неработоспособна в большинстве браузеров; псевдокласс :hover (как и псевдоклассы :active, :link, :visited) применимы только к тегу <A> (что и требует спецификация w3c)
Т.е. вам надо или заменить <DIV> на <A> (или включить <DIV> в <A>), или же перейти к скриптовому решению (onmouseover, onmouseout)
2. Размер тегов <DIV> является у вас определяющим размеры таблицы. Неудивительно, что изменение размера любого из тегов <DIV> приводит к изменению конфигурации таблицы.
Т.е. выбранный вами путь неверен в принципе.
3. Решений этой задачи множество.
Например, всем ячейкам можно задать начальные width: 300px; height: 300px; padding: 150px, а всем тегам <DIV> - width: 100%; height: 100%. При наведении мыши на <DIV>, уменьшить padding этой ячейки до нуля - тогда <DIV> автоматически увеличится до 300х300. Но тогда изначально промежуток между всеми <DIV> у вас будет равен 300px (и по высоте, и по ширине), что нельзя считать удачным дизайном :-)
4. Но лучшим решением данной задачи, ИМХО, будет применение позиционирования тегов <DIV>, т.е. полный отказ от таблицы вовсе. Решение реализуется довольно просто - для каждого браузера в отдельности. Единственная сложность потом - сложить все браузерные решения в одно. Или же пойти иным путем и использовать одну из существующих JS-библиотек.
И вот вам пример для 9-ти блоков в браузере MSIE:
<html>
<head>
<script>
var BORD = '1px double #008201';
var T = 10, L = 10; //координаты начала блоков
var W0 = 100, H0 = 50, BG0 = '#6EB10D'; //начальные ширина-высота-фон блоков
var W1 = 200, H1 = 100, BG1 = '#FFE239'; //"ховерные" ширина-высота-фон блоков
//у вас ширина-высота изменяется от 150-150 до 300-300
//я в примере для наглядности сделал их поменьше, да и разными
function funcOver ()
{
with (event.srcElement.style)
{
backgroundColor = BG1;
width = W1 + 'px';
height = H1 + 'px';
top = (parseInt (top, 10) - (H1 - H0) / 2) + 'px';
left = (parseInt (left, 10) - (W1 - W0) / 2) + 'px';
}
}
function funcOut ()
{
with (event.srcElement.style)
{
backgroundColor = BG0;
width = W0 + 'px';
height = H0 + 'px';
top = (parseInt (top, 10) + (H1 - H0) / 2) + 'px';
left = (parseInt (left, 10) + (W1 - W0) / 2) + 'px';
}
}
onload = function ()
{
var e = document.createElement ('div');
with (e.style)
{
border = BORD;
backgroundColor = BG0;
position = 'absolute';
width = W0 + 'px';
height = H0 + 'px';
}
var rL = new Function ('x', 'y = x % 3; return (W1 - W0) / 2 * (y + 1) + W0 * y');
var rT = new Function ('x', 'y = parseInt (x / 3, 10); return (H1 - H0) / 2 * (y + 1) + H0 * y');
for (var j = 0; j < 9; j++)
{
var e1 = e.cloneNode (0);
with (e1)
{
attachEvent ('onmouseover', funcOver);
attachEvent ('onmouseout' , funcOut );
with (style)
{
top = T + rT (j) + 'px';
left = L + rL (j) + 'px';
}
}
document.body.appendChild (e1);
}
}
</script>
</head>
<body bgcolor="#C6F77D">
</body>
</html>
|
| |
| |
|
|
| |
|
|
| |
для: CNTv2.0
(28.02.2008 в 03:42)
| | | >1. конструкция div:hover неработоспособна в большинстве браузеров;
хм, но у меня во IE, Opera, Firefox прекрасно работает.. ну да ладно, в данной задаче мне не важна кроссбраузерность, лишь бы в Оpera работало...
>Но лучшим решением данной задачи, ИМХО, будет применение позиционирования тегов <DIV>, т.е. полный отказ от таблицы вовсе.
Спасибо, что подсказали этот способ! Он мне намного облегчил работу, так в таблице мне нужны были только определенные ячейки, а не вся таблица, и ее размеры я заранее не знаю.... | |
| |
|
|
