DeffТогда пусть будет так:
Просто картинка: http://s008.radikal.ru/i304/1010/71/8fad264b8ac2.png
Картинка+ не нажатые кнопки: http://s008.radikal.ru/i306/1010/4a/34e40e541061.png
Картинка+ нажатые кнопки: http://s008.radikal.ru/i303/1010/9c/ec6 … ngОтдельно не нажатые кнопки: http://s012.radikal.ru/i320/1010/e0/61835e932674.png
Отдельно нажатые кнопки: http://s007.radikal.ru/i300/1010/3e/f7b42e5bf8ef.png
И при нажатии выплывающие окна с черной рамочкой в 2 пикселя Х)
Зачит Рамочку чёрную не стал делать..
А результат Вот > http://hostjs-mybb2011.narod.ru/Francemoon_table.htm
Как то... многа времени потрачено на скрипт затемнения волка, не связанного с кнопкаме, визуальный жа эффект от этой кропотливости - мал - имхо - яркие глаза волка -тож было неплохо, а наложить узор можно было и напостоянно
Итоговый код для вставки:
<!--============== Начало Таблички =========== -->
<style type="text/css">
#Mytable01{
background-image: url(http://savepic.net/98744.jpg);
background-position:left top;
border: 0px #fff none!important;/**/
width:600px;
height:400px!important;
}
#tbody01{
background: url()left top!important;
}
.td2{
vertical-align:top;
border: 0px #fff none!important;/**/
/*border: 1px #fff solid!important;*/
padding:0;
width:196px;
background-color: transparent !important;
}
.Mybutton {
/*border: 1px #fff solid!important;*/
width:167px;
height:84px;
padding:0!important;
margin: 0 -26px 19px 26px;
}
/* Стиль всплывающего меню */
.divContent{
z-index: 2;
width:216px;
height: auto;
margin: 5px 0 0 -9px!important;
padding: 10px;
border: 1px dotted #002000;
font-size: 10px;
height: auto;
background: #D2B48C;
z-index: 10;
border: 2px solid #D2B48C;
font-size: 12px;
font-family: Lucida Sans Unicode;
text-align: left;
}
/* Прозрачка в Всплывающем меню */
.divContent {background-color: transparent !important;/**/ background: url(http://savepic.net/60004.png)!important;
border-radius:15px;
-webkit-border-radius:15px;
-khtml-border-radius:15px;
-moz-border-radius:15px;
-o-border-radius:15px;
box-shadow:-4px 5px 14px #365258;
-webkit-box-shadow:-4px 5px 14px #365258;
-khtml-box-shadow:-4px 5px 14px #365258;
-moz-box-shadow:0px 5px 14px #365258;
}/* Конец Стиля всплывающего меню */
.divContent .lipsum:first-letter,.divContent ul li:first-child:first-letter,.divContent p:first-letter{
font-family: "Times New Roman", Times, serif!important; /* Гарнитура шрифта первой буквы */
font-size: 200% !important; /* Размер шрифта первого символа */
color: red!important; /* Красный цвет текста */
}
.divContent b {
background-color: transparent!important;
border: 0px #0A434C none!important;/**/
}
.divContent ul li a{color:#9B59FF!important;
}
#ShadowImg{
position: absolute!important;
z-index: 0;
margin: 4px -1px -4px 1px;
visibility: hidden;/**/
}
</style>
<center><table id="Mytable01" cols="3" rows="2" cellpadding="0" cellspacing="0" border"0">
<tbody id="tbody01" style="background: transparent !important;">
<tr style="background: transparent !important;">
<td height="293" colspan="3" align="left" valign="top" cellpadding="0" cellspacing="0" style="background: transparent !important; border: 0px #fff none!important;">
<img id="ShadowImg" src="http://savepic.net/107967.gif"/><!-- onmouseover="this.src='http://savepic.net/79235.png'" onmouseout="this.src='http://savepic.net/65921.jpg'" -->
</td>
</tr>
<tr cellpadding="0" cellspacing="0" valign="top" align="left">
<td class="td2">
<div class="spll"><DIV jQuery1259073801391="4"><div class="Mybutton" alt="Новости"><img class="Myimage" src='http://savepic.net/122248.png' onMouseOver="part1ON(),this.src='http://savepic.net/101768.png'" onMouseOut="part1OFF(),this.src='http://savepic.net/122248.png'" href="javscript://" jQuery1259073801391="2"/></div><!--&&&-->
<div class=divContent jQuery1259073801391="5" id="part1" style="DISPLAY: none; position: absolute;" onMouseOver="part1ON()" onMouseOut="part1OFF()">
<div align="left" width="210" style="margin: 7px; height: 175px; padding;0; overflow-y: auto; overflow: hidden;" >
<marquee id="abs" height="100%" direction="up" behavior="scroll" scrolldelay="143" scrollamount="1" onmouseout="document.all.abs.start()" onmouseover="document.all.abs.stop()">
<div align="left" class='lipsum' style="width:90%; margin-left: 17px; ">
<!--Новости п.п.1== Начало Заполнения пункта -->
Гости регистрируйтесь!Не упустите свой шанс.Идёт активный набор персонала, по всем вопросам в личку админам или в специальную для этого тему, то есть в Техническое оснащение!
<!--ХХ Конец Заполнения пункта -->
</div>
</marquee>
</div>
</div></div></div>
</td>
<td class="td2">
<div class="spll"><DIV jQuery1259073801391="4"><div class="Mybutton" align="center" href="javscript://" jQuery1259073801391="2" alt="Новости"><img class="Myimage" src='http://savepic.net/125323.png' onMouseOver="part2ON(),this.src='http://savepic.net/85384.png' " onMouseOut="part2OFF(),this.src='http://savepic.net/125323.png'"/></div><!--&&&-->
<div class=divContent jQuery1259073801391="5" id="part2" style="DISPLAY: none; position: absolute;" id="part2" style="padding: 12px 0 0 12px!important; height: auto; width:240px!important;" onMouseOver="part2ON()" onMouseOut="part2OFF()">
<ul type="disc" align="left" style="padding: 0 0 0 6px;" >
<center><li>М<b>еню навигации</b></li></center>
<!--Навигация п.п.2== Начало Заполнения пункта -->
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=380">.....1. Ваши вопросы - задавайте их здесь. Что то не получается на форуме?</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=696#p4143">2. Как ЗАРЕГИСТРИРОВАТЬСЯ на форуме?</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=734#p4310">3. Как создать НОВУЮ ТЕМУ на форуме?</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=290">4. Как прикрепить МУЗЫКАЛЬНЫЙ файл в сообщении (музыка в постах)?</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=466">5. Как прикрепить ФОТО в сообщении (фото в постах)?</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=196">6. Как работать с ТЕКСТОМ на форуме? (Видеоурок)</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=178">7. Для чего и какие есть КНОПКИ в поле ответа? (Создание своего сообщения).</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=174">8. Как пользоваться поиском по форуму перед открытием новой темы</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=161">9. Как установить АВАТАР?</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=181">10. Как загрузить свое ИЗОБРАЖЕНИЕ
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=180">11. Простая-удобная программа для снятия СКРИНШОТОВ с экрана компьютера</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=217">12. Общие соображения о темах с большим количеством печатного текста</a></li>
<li><a href="http://mjacksoninfo.userforum.ru/viewtopic.php?id=959#p6176">13. Как добавить БЕГУЩУЮ СТРОКУ в сообщение?</a></li>
<!--ХХ Конец Заполнения пункта -->
</ul>
</div></div></div>
</td>
<td class="td2">
<div class="spll"><DIV jQuery1259073801391="4"><div class="Mybutton" align="center" href="javscript://" jQuery1259073801391="2" alt="Новости"><img class="Myimage" src='http://savepic.net/119179.png' onMouseOver="part3ON(),this.src='http://savepic.net/87435.png'" onMouseOut="part3OFF(),this.src='http://savepic.net/119179.png'"/></div><!--&&&-->
<div class=divContent jQuery1259073801391="5" id="part3" style="DISPLAY: none; position: absolute;" onMouseOver="part3ON()" onMouseOut="part3OFF()">
<p align="left">
<!--Игровой Процесс п.п.3== Начало Заполнения пункта -->
Итак, остается последний месяц лета и все ребята стараются насладиться отдыхом. Шарпей возвращается с очередного путешествия,и снова намерена завоевать сердце гламурного Троя. Келси написала тьму новых песен, Трой и Чед как всегда весь в баскетболе, но находит время встречаться с Габриэллой, она же помогает маме по саду. В школе много новеньких, недавно переехавших в Альбукерке, учеников. Сэм надеется влиться в компанию новых друзей и стать немного смелее, что ей не очень хорошо дается. Тэйлор переехала в другой город и очень скучает по Диким котам,они стали ее семьей. Райан не отстает от сестры, он вместе с ней ездит по разным странам. Габи и Трой почему то стали ссориться из-за всякой ерунды, кстати Трой стал поглядывать на новую ученицу Сэм, которая не упускает момента поулыбаться и построить глазки в ответ. Но Габи старается не замечать перемен и живет обычной жизнью. В последний месяц все ребята будут работать в Лава Спринкс, все, за исключением Райана и Шарпей, ведь они элитные члены клуба. Скоро состоится важное событие,в Лава Спринкс будет проводится конкурс талантов.И конечно же,никто не хочет остаться незамеченным. Шарпей намерена завоевать главный приз и настроена очень серьезно.Если вы знаете ее,то уверены она всегда идет напролом, но у нее внезапно появляется конкурентка, новая ученица Девонн Фуллер Лефевр, которая также не прочь заполучить главный приз!
Посмотрим,что будет дальше..<br><br><br><br>
<!--ХХ Конец Заполнения пункта -->
</p>
</div></div></div>
</td>
</tr>
</tbody>
</table></center>
<script language="JavaScript">
function part1ON(){document.getElementById("ShadowImg").style.visibility='visible'}
function part2ON(){document.getElementById("ShadowImg").style.visibility='visible'}
function part3ON(){document.getElementById("ShadowImg").style.visibility='visible'}
function part1OFF() {document.getElementById("ShadowImg").style.visibility='hidden'}
function part2OFF(){document.getElementById("ShadowImg").style.visibility='hidden'}
function part3OFF(){document.getElementById("ShadowImg").style.visibility='hidden'}
</script>
<script type="text/javascript">
$(document).ready(function(){
$('.Mybutton').click(function(){
$(this).parent().children('div.divContent').toggle('normal');
return false;
});
});
</script>
<!--============== Конец Таблички =========== -->Заполнение таблички так:
<!--Новости п.п.1== Начало Заполнения пункта -->
Гости регистрируйтесь!Не упустите свой шанс.Идёт активный набор персонала, по всем вопросам в личку админам или в специальную для этого тему, то есть в Техническое оснащение!
<!--ХХ Конец Заполнения пункта -->
Cиние теги не трогаем - красным это всё Ваше творчество
Отредактировано Deff (Ср, 3 Ноя 2010 19:54:46)