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)