Новые сообщения · Участники · Правила форума · Поиск
  • Страница 1 из 1
  • 1
Модератор форума: pikasso  
Форум о uCoz и Web » Система uCoz » Прочее » Таблица с фоном
Таблица с фоном
Ильдаr)))Дата: Понедельник, 01.07.2013, 15:58 | Сообщение # 1
Полковник
Сообщений: 164
Репутация: 3
Социальная репутация:

Статус: Offline
Задумал сделать категории для сайта в таблице и украсить таблицу как нибудь необычно.
Вот пример: (windows 8)

Пробовал сделать что бы после наведения мыши на ячейку цвет ячейки менялся на фоновую картинку. Ничего не получилось пришёл за помощью)
Брал за основу вот этот код:
Код
<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center>
<tr>  
<td align=center bgcolor=#CCCCCC onMouseOver="this.style.background='#FFCC33'" onMouseOut="this.style.background='#CCCCCC'"><a href="link1.htm">Пункт 1</a></td>
<td align=center bgcolor=#CCCCCC><a href="link2.htm">Пункт 2</a></td>
</tr>
</table>
Как установить кнопки социальных сетей?

Ссылка
 
SleepWalkerДата: Понедельник, 01.07.2013, 17:49 | Сообщение # 2
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
то, что ты показал на скрине делается дивами. делать такое таблицей - извращенство

а где же пример того, что ты делал? с чем нам помагать? тот код, что ты кинул работает, его менять нету смысла (правда тот код весьма устаревший... сейчас это точно не так делается, для этого достаточно цсс).
если ты хочешь использовать текущий код для своих целей, то тебе нужно редактировать не цвет фона, а саму фоновую картинку, то есть:
Код
<table width=60% border=1 cellspacing=0 cellpadding=4 bordercolor=#333333 align=center>  
<tr>   
<td align=center style="background:no-repeat #ccc" onMouseOver="this.style.backgroundImage='url(\'KARTINKA\')'" onMouseOut="this.style.backgroundImage=''"><a href="link1.htm">Пункт 1</a></td>  
<td align=center bgcolor=#CCCCCC><a href="link2.htm">Пункт 2</a></td>  
</tr>  
</table>

Демо: http://jsfiddle.net/bnKYW/1/

Time Waits For No One
 
Ильдаr)))Дата: Понедельник, 01.07.2013, 21:39 | Сообщение # 3
Полковник
Сообщений: 164
Репутация: 3
Социальная репутация:

Статус: Offline
Вот что получилось:

Код

<html>
<head>
<title>Проверка</title>

<style type="text/css">

.style2   
{
background:url(http://apokalipses2012.ucoz.ru/4yjoe/1/coment/Italy.png);
width: 300px;   
height: 150px;
} <!-- Это картинка при наведении мышкой  -->
.res   
{
background:url(http://apokalipses2012.ucoz.ru/4yjoe/1/coment/fon1.png);
width: 300px;   
height: 150px;
}   

</style>

<script>
function ser(obj){
obj.className="style2"; <!-- Это функция отвечает за то чтобы при наведении мышкой менялся стиль-->
}
</script>

<script>
function serr(obj)
{
obj.className="res"; <!-- Это функция отвечает за то что если вашка мышка не наведена на ячейку то стиль останется прежним-->
}
</script>

<link rel="nofollow" href="css/style.css" rel="stylesheet" type="text/css">
</head>
<body>

<table style="width: 610px; border-collapse: collapse;" align="center" cellspacing="3" cellpadding="3"><tbody>
<tr>
<td style="width: 305px; text-align: center; vertical-align: middle;">
<div class="res" onMouseOver=ser(this) onMouseOut=serr(this)>1</div></td>
<td style="width: 305px; text-align: center; vertical-align: middle;">
<div class="res" onMouseOver=ser(this) onMouseOut=serr(this)>2</div></td>
</tr><tr>
<td style="width: 305px; text-align: center; vertical-align: middle;">3</td>
<td style="width: 305px; text-align: center; vertical-align: middle;">4</td>
</tr><tr>
<td style="width: 305px; text-align: center; vertical-align: middle;">5</td>
<td style="width: 305px; text-align: center; vertical-align: middle;">6</td>
</tr><tr>
<td style="width: 305px; text-align: center; vertical-align: middle;">7</td>
<td style="width: 305px; text-align: center; vertical-align: middle;">8</td>
</tr><tr>
<td style="width: 305px; text-align: center; vertical-align: middle;">9</td>
<td style="width: 305px; text-align: center; vertical-align: middle;">10</td>
</tr><tr>
<td style="width: 305px; text-align: center; vertical-align: middle;">11</td>
<td style="width: 305px; text-align: center; vertical-align: middle;">12</td>
</tr><tr>
<td style="width: 305px; text-align: center; vertical-align: middle;">13</td>
<td style="width: 305px; text-align: center; vertical-align: middle;">14</td>
</tr><tr>
<td style="width: 305px; text-align: center; vertical-align: middle;">15</td>
<td style="width: 305px; text-align: center; vertical-align: middle;">16</td>
</tr><tr>
<td style="width: 305px; text-align: center; vertical-align: middle;">17</td>
<td style="width: 305px; text-align: center; vertical-align: middle;">18</td>
</tr><tr>
<td style="width: 305px; text-align: center; vertical-align: middle;">19</td>
<td style="width: 305px; text-align: center; vertical-align: middle;">20</td>
</tr>
</tbody></table>
</body>
</html>


Вот такая штука получается и хотелось бы без таблицы:) и ещё что бы фон с рамкой был не картинкой ну и что бы для каждой ячейки был свой цвет и фон:)

Ссылка

Сообщение отредактировал Ильдаr))) - Вторник, 02.07.2013, 00:07
 
SleepWalkerДата: Понедельник, 01.07.2013, 23:54 | Сообщение # 4
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
Ильдаr))), ну если убрать html комменты из css и javascript, то должно работать. это ты выложил как пример готового решения или все же у тебя там что-то не работает?

З.Ы. ты можешь вместо смены класса с помощью js использовать :hover в css

Time Waits For No One
 
Ильдаr)))Дата: Вторник, 02.07.2013, 00:06 | Сообщение # 5
Полковник
Сообщений: 164
Репутация: 3
Социальная репутация:

Статус: Offline
Цитата (SleepWalker)
З.Ы. ты можешь вместо смены класса с помощью js использовать :hover в css

Не понял(

Ссылка
 
SleepWalkerДата: Вторник, 02.07.2013, 00:10 | Сообщение # 6
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
ну типа

Код
.res
{
background:url(http://apokalipses2012.ucoz.ru/4yjoe/1/coment/fon1.png);  
  width: 300px;    
  height: 150px;
}
.res:hover
{
background:url(http://apokalipses2012.ucoz.ru/4yjoe/1/coment/Italy.png);  
  width: 300px;    
  height: 150px;
}

Time Waits For No One
 
Ильдаr)))Дата: Вторник, 02.07.2013, 02:23 | Сообщение # 7
Полковник
Сообщений: 164
Репутация: 3
Социальная репутация:

Статус: Offline
SleepWalker, ну да так лучше:))

Добавлено (02.07.2013, 02:23)
---------------------------------------------
SleepWalker, Вот что получилось:
Картинки

Код
<html>  
<head>  
<title>Проверка</title>  

<style type="text/css">  

.res { background:url(fon1.png); width: 300px; height: 150px; }  
.res:hover { background:url(Australia1.png);  width: 300px; height: 150px; }
.res1 { background:url(fon2.png); width: 300px; height: 150px; }  
.res1:hover { background:url(China2.png);  width: 300px; height: 150px; }
.res2 { background:url(fon3.png); width: 200px; height: 150px; }  
.res2:hover { background:url(Germany31.png);  width: 200px; height: 150px; }
.res3 { background:url(fon3.png); width: 200px; height: 150px; }  
.res3:hover { background:url(Украина41.png);  width: 200px; height: 150px; }
.res4 { background:url(fon3.png); width: 200px; height: 150px; }  
.res4:hover { background:url(Iran51.png);  width: 200px; height: 150px; }
.res5 { background:url(fon3.png); width: 150px; height: 300px; }  
.res5:hover { background:url(United_Kingdom6.png);  width: 150px; height: 300px; }
.res6 { background:url(fon3.png); width: 400px; height: 150px; }  
.res6:hover { background:url(Нидерланды71.png);  width: 400px; height: 150px; }
.res7 { background:url(fon3.png); width: 200px; height: 150px; }  
.res7:hover { background:url(Япония81.png);  width: 200px; height: 150px; }
.res8 { background:url(fon3.png); width: 200px; height: 150px; }  
.res8:hover { background:url(India91.png);  width: 200px; height: 150px; }
.res9 { background:url(fon3.png); width: 300px; height: 150px; }  
.res9:hover { background:url(Ispain10.png);  width: 300px; height: 150px; }
.res10 { background:url(fon3.png); width: 300px; height: 150px; }  
.res10:hover { background:url(Корея11.png);  width: 300px; height: 150px; }
.res11{ background:url(fon3.png); width: 607px; height: 150px; }  
.res11:hover { background:url(Россия12.png);  width: 607px; height: 150px; }
.res12{ background:url(fon3.png); width: 300px; height: 150px; }  
.res12:hover { background:url(США13.png);  width: 300px; height: 150px; }
.res13 { background:url(fon3.png); width: 300px; height: 150px; }  
.res13:hover { background:url(Чехия14.png);  width: 300px; height: 150px; }
.res14 { background:url(fon3.png); width: 300px; height: 150px; }  
.res14:hover { background:url(Франция15.png);  width: 300px; height: 150px; }
.res15 { background:url(fon3.png); width: 300px; height: 150px; }  
.res15:hover { background:url(Румыния16.png);  width: 300px; height: 150px; }
.res16 { background:url(fon3.png); width: 300px; height: 150px; }  
.res16:hover { background:url(Турция17.png);  width: 300px; height: 150px; }
.res17 { background:url(fon3.png); width: 300px; height: 150px; }  
.res17:hover { background:url(Швеция18.png);  width: 300px; height: 150px; }
.res18 { background:url(fon3.png); width: 300px; height: 150px; }  
.res18:hover { background:url(Italy19.png);  width: 300px; height: 150px; }
.res19 { background:url(fon3.png); width: 300px; height: 150px; }  
.res19:hover { background:url(Малайзия20.png);  width: 300px; height: 150px; }
</style>  

</head>  
<body>  

<table width="610" border="0" align="center" cellpadding="1" cellspacing="1">
   <tr>
     <td colspan="3" align="center" valign="middle"><div class="res" onMouseOver=ser(this) onMouseOut=serr(this)>1</div></td>
     <td colspan="3" align="center" valign="middle"><div class="res1" onMouseOver=ser1(this) onMouseOut=serr1(this) colspan="3">2</div></td>
   </tr>
   <tr>
     <td colspan="2" align="center" valign="middle"><div class="res2" onMouseOver=ser(this) onMouseOut=serr(this) >3</div></td>
     <td colspan="2" align="center" valign="middle"><div class="res3" onMouseOver=ser(this) onMouseOut=serr(this)>4</div></td>
     <td colspan="2" align="center" valign="middle"><div class="res4" onMouseOver=ser(this) onMouseOut=serr(this)>5</div></td>
   </tr>
   <tr>
     <td rowspan="2" align="center" valign="middle"><div class="res5" onMouseOver=ser(this) onMouseOut=serr(this)>6</div></td>
     <td colspan="5" align="center" valign="middle"><div class="res6" onMouseOver=ser(this) onMouseOut=serr(this)>7</div></td>
   </tr>
   <tr>
     <td colspan="2" align="center" valign="middle"><div class="res7" onMouseOver=ser(this) onMouseOut=serr(this)>8</div></td>
     <td colspan="3" align="center" valign="middle"><div class="res8" onMouseOver=ser(this) onMouseOut=serr(this)>9</div></td>
   </tr>
   <tr>
     <td colspan="3" align="center" valign="middle"><div class="res9" onMouseOver=ser(this) onMouseOut=serr(this)>10</div></td>
     <td colspan="3" align="center" valign="middle"><div class="res10" onMouseOver=ser(this) onMouseOut=serr(this)>11</div></td>
   </tr>
   <tr>
     <td colspan="6" align="center" valign="middle"><div class="res11" onMouseOver=ser(this) onMouseOut=serr(this)>12</div></td>
   </tr>
   <tr>
     <td colspan="3" align="center" valign="middle"><div class="res12" onMouseOver=ser(this) onMouseOut=serr(this)>13</div></td>
     <td colspan="3" align="center" valign="middle"><div class="res13" onMouseOver=ser(this) onMouseOut=serr(this)>14</div></td>
   </tr>
   <tr>
     <td colspan="3" align="center" valign="middle"><div class="res14" onMouseOver=ser(this) onMouseOut=serr(this)>15</div></td>
     <td colspan="3" align="center" valign="middle"><div class="res15" onMouseOver=ser(this) onMouseOut=serr(this)>16</div></td>
   </tr>
   <tr>
     <td colspan="3" align="center" valign="middle"><div class="res16" onMouseOver=ser(this) onMouseOut=serr(this)>17</div></td>
     <td colspan="3" align="center" valign="middle"><div class="res17" onMouseOver=ser(this) onMouseOut=serr(this)>18</div></td>
   </tr>
   <tr>
     <td colspan="3" align="center" valign="middle"><div class="res18" onMouseOver=ser(this) onMouseOut=serr(this)>19</div></td>
     <td colspan="3" align="center" valign="middle"><div class="res19" onMouseOver=ser(this) onMouseOut=serr(this)>20</div></td>
   </tr>
</table>

</body>  
</html>


Вот что получается:



Повсякому пробывал выровнить ничего не помогло:( Как можно выровнить?

Ссылка

Сообщение отредактировал Ильдаr))) - Вторник, 02.07.2013, 02:36
 
SleepWalkerДата: Вторник, 02.07.2013, 21:54 | Сообщение # 8
Admin
Сообщений: 5493
Репутация: 487
Социальная репутация:

Статус: Offline
я тебе в самом начале говорил, что делать такое в таблице - запаришся.


я вставил твой код на jsfiddle. я ничего не редактировал, только подсветил фон и как видишь все ровное. тебе надо ровнять картинки)
http://jsfiddle.net/54CAm/

а вот туториалы, как такое сделать с помощью дивов:
http://mrbool.com/creating-a-metro-style-menu-in-html-and-css/26266
http://inspiretrends.com/metro-s....elopers

Time Waits For No One
 
Ильдаr)))Дата: Четверг, 04.07.2013, 16:30 | Сообщение # 9
Полковник
Сообщений: 164
Репутация: 3
Социальная репутация:

Статус: Offline
smile
Ссылка

Сообщение отредактировал Ильдаr))) - Четверг, 04.07.2013, 16:35
 
Форум о uCoz и Web » Система uCoz » Прочее » Таблица с фоном
  • Страница 1 из 1
  • 1
Поиск: