Dodanie Tabs menu (mouseover)

Dla specjalistów Webmastering
#1

Witam

Otóż nie wiem jak dodać na strone tzw Tabs Menu (mouseover)http://www.dynamicdrive.com/dynamicindex1/tabmouseover.htm

Chce aby pojawiało sie (znaczy wiecie pojawiały sie linki do artykułów) w tym małym białym prostokącie gdy najeżdżamy na którąś z ikon pod logiem (np Soul Eater) link do strony >> http://www.lmtest.yoyo.pl/news.php

Poniżej przedstawiam moje theme.php i style.css owego theme^^

<?php

if (!defined("IN_FUSION")) { header("Location: ../../index.php"); exit; }

require_once INCLUDES."theme_functions_include.php";


define("THEME_WIDTH", "935");

define("THEME_BULLET", "·");


function render_page($license=false) {


global $aidlink, $locale, $settings, $main_style;


echo "

| \n"; //Header Start echo ’

| header_01.png | header_02.png | header_03.png |
| '; echo THEME_BULLET." Edit Profile \n"; echo THEME_BULLET." Messages \n"; echo THEME_BULLET." Memberlist \n"; if (iADMIN (iUSER_RIGHTS != “” || iUSER_RIGHTS != “C”)) { echo THEME_BULLET." Control Panel \n"; } echo THEME_BULLET." Logout \n"; //Quest Header Start } else { if (isset($_POST[‘Regh’])) { redirect(‘register.php’); } echo ’ | '; include LOCALE.LOCALESET.“global.php”; echo "
\n"; echo “\n”; echo $locale[‘global_101’]." \n"; echo $locale[‘global_102’]." \n"; echo " \n"; echo “Remember?\n”; echo “\n”; if ($settings[‘enable_registration’]) { echo 'Click here to register. '; } echo 'Forgot Your Password?
'; } echo ’ |
| header_05.png |
'; // Menus Starts echo ’

| menu_01.png | menu_02.png | menu_03.png | menu_04.png | menu_05.png | menu_06.png | menu_08.png | menu_09.png | menu_10.png | menu_11.png | menu_12.png | menu_13.png | menu_14.png | menu_15.png |’; echo ’ tree.png |’; // Menu Ends echo "

| \n"; // Content echo "

| “.LEFT.” | | “.U_CENTER.CONTENT.L_CENTER.” | | “.RIGHT.” |

\n"; //Footer echo " |

"; echo "

".stripslashes($settings['footer']);

echo “Design by dawedante
Modification Aru”;

if (!$license) { echo "
\n".showcopyright(); }

echo “

\n”; } function render_news($subject, $news, $info) { echo "
  $subject
\n"; echo "
“.$news.”
\n"; echo "
\n"; echo newsposter($info,"·").newsopts($info,"·").itemoptions(“N”,$info[‘news_id’]); echo "
\n"; echo " “; } function render_article($subject, $article, $info) { echo "
  $subject
\n”; echo "
“.($info[‘article_breaks’] == “y” ? nl2br($article) : $article).”
\n"; echo "
\n"; echo articleposter($info,"·").articleopts($info,"·").itemoptions(“A”,$info[‘article_id’]); echo "
\n"; echo " "; } function opentable($title) { echo "

|   $title |
| \n"; } function closetable() { echo " |

\n"; } function openside($title, $collapse = false, $state = “on”) { global $panel_collapse; $panel_collapse = $collapse; echo "

| “; if ($collapse == true) { $boxname = str_replace(” “, “”, $title); echo "
“.panelbutton($state,$boxname).”
“; } echo $title.” |
| \n”; if ($collapse == true) { echo panelstate($state, $boxname); } } function closeside($collapse = false) { global $panel_collapse; if ($panel_collapse == true) { echo “\n”; } echo " |

"; } ? [/code]

[code]a { color : #000000; text-decoration : none; } a:hover { color : #005599; text-decoration : none; } a.side { color : #482b4c; text-decoration : none; } a:hover.side { color : #005599; text-decoration : none; } a.white, li.white a { color: #ddd; text-decoration: none; } a:hover.white, li.white a:hover { color: #ddd; text-decoration: underline; } body { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 11px; background-color : #000; background-image: url(images/bg.jng); margin:0px; } form { margin : 0px; } hr { border:none; height:10px; background:url(images/hr.png) no-repeat center; border:0px; } hr-normal { border:1px; } hr.side-hr { height:10px; background:url(images/hr.png) no-repeat center; } td { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 11px; } pre { font-family : Verdana, Tahoma, Arial, Sans-Serif; font-size : 11px; } .alt { color : #555; } .outer-border { border : 1px solid #000; } .sub-header { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #000; background-color : #888; border-top : 1px solid #000; border-bottom : 1px solid #000; padding : 5px; } .sub-header ul{ margin: 0; padding: 0; } .sub-header ul li{ display: inline; } .sub-header ul li.first-link .bullet{ display: none; } .full-header { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #ddd; background-color : #444; padding : 10px; } .footer { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #fff; padding : 5px; } .admin-message { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 11px; text-align : center; color : #fff; background-color : #313538; padding : 3px 4px 5px 4px; margin : 5px; } .button { font-family:Tahoma,Arial,Verdana,Sans-Serif; font-size:10px; color:#fff; background-color: #4C80B0; background-image:url(images/buttonh.gif); background-repeat:repeat-x; border:#1E5288 1px solid; margin-top:0px; padding-bottom:2px; height:16px; } .bbcode { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; color : #555; background-color : #f1f1f1; border : 1px solid #ccc; margin-top : 2px; } .textbox { font-family:Verdana,Tahoma,Arial,Sans-Serif; font-size:10px; font-weight:bold; color:#000; background-color: #FDFBFC; background-image:url(images/textbox.jpg); background-repeat:repeat-x; border:1px #3c3c3c solid; width: 100%; } .main-body { font-size : 11px; color : #482b4c; background-color : #ffffff; background-image:url(images/newss.ng); padding-left:15px; padding-right:15px; padding-bottom:15px; margin-left:5px; margin-right:5px; border-left : 1px solid #482b4c; border-right : 1px solid #482b4c; border-bottom : 0px solid #ffffff; text-align: left } .treemenu { font-size : 11px; color : #482b4c; background-image:url(images/tree.png); } .side-body { font-size : 10px; color : #555; background-color : #10161D; background-image:url(images/panel.png); padding : 4px; border-left : 1px solid #482b4c; border-right : 1px solid #482b4c; border-bottom : 1px solid #482b4c; } #main-bg { color : #555; background-color : #070707; padding : 10px 5px 5px 5px; } .side-both #main-bg {margin: 0 187px;} .side-left #main-bg {margin-left: 187px;} .side-right #main-bg {margin-right: 187px;} .side-left #side-border-right {display:none;} .side-right #side-border-left {display:none;} .center { margin : 0 auto; } * html #main-bg{ height: 0px; } .border { border : 1px solid #333A44; } #side-border-left { color : #777; background-color : #fff; float:left; padding : 10px 0px 10px 10px; width: 180px; } #side-border-right { color : #777; background-color : #fff; float:right; padding : 10px 10px 10px 0px; width: 180px; } .news-category { border:0; margin:0px 5px 0 0; float:left; } .news-footer { text-align: left; font-size : 8px; color : #555; background-color : #ffffff; background-image : url(images/panelbg.jng); padding : 3px 4px 4px 4px; border-left : 1px solid #482b4c; border-right : 1px solid #482b4c; border-bottom : 0px solid #ffffff; margin-left:5px; margin-right:5px; } .barmain { font-family : Verdana, Tahoma, Arial, Sans-Serif; font-size : 10px; color : #aaa; padding : 4px; } .capmain { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 10px; font-weight : bold; color : #fff; background-image : url(images/panelbg.png); padding : 6px 6px 6px 6px; border-top : 1px solid #482b4c; border-left : 1px solid #482b4c; border-right : 1px solid #482b4c; margin-left:5px; margin-right:5px; text-align: left; } .scapmain { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 11px; font-weight : bold; color : #fff; background-image : url(images/sidebg.png); border-top : 1px solid #482b4c; border-left : 1px solid #482b4c; border-right : 1px solid #482b4c; padding : 4px; text-align: right; } .tbl { font-size : 11px; color : #482b4c; background-color : #f6f6f6; padding : 4px; } .tbl1 { font-size : 11px; color : #482b4c; background-color : #f6f6f6; padding : 4px; } .tbl2 { font-size : 11px; color : #482b4c; background-color : #ffffff; padding : 4px; } .forum-caption { font-size : 11px; font-weight : bold; color : #fff; background-color : #273343; padding : 2px 4px 4px 4px; } .quote { font-size : 11px; color : #555; background-color : #f8f8f8; padding : 4px; margin : 0px 20px 0px 20px; border : 1px solid #bbb; } .poll { height : 12px; border : 1px solid #bbb; } .comment-name { font-weight : bold; color : #005599; } .shoutboxname { font-weight : bold; color : #ffffff; background-color : #634467; } .shoutbox { color : #ffffff; background-color : #482b4c; } .shoutboxdate { font-size : 8px; color : #ffffff; background-color : #482b4c; } .small { font-size : 10px; font-weight : normal; } .small2 { font-size : 10px; font-weight : normal; color : #555; } .side-small { font-size : 10px; font-weight : normal; color : #555; background-color : #f6f6f6; } .side-label { color : #555; background-color : #f1f1f1; padding : 2px 2px 3px 2px; } /* Vertical Navigation */ #navigation h2 { font-size: 10px; color : #555; background-color: #10161D; margin: 0; padding: 4px; } #navigation ul { margin: 0; padding: 0; list-style-type: none; } * html #navigation ul li{ height: 1%; } #navigation a { display: block; color: #B5D8F6; background-color: #10161D; padding: 2px; text-decoration : none; } #navigation a:hover { color: #f6f6f6; background-color: #4F6D8F; margin-left:2px; } /* Page Navigation */ .pagenav { padding: 0.4em; } .pagenav span { color: #fff; background-color: #005599; border: 1px solid #e1e1e1; padding: 0.2em 0.4em 0.2em 0.4em; margin: 0.2em; } .pagenav a { color: #005599; background-color: #fff; border: 1px solid #e1e1e1; padding: 0.2em 0.4em 0.2em 0.4em; margin: 0.2em; text-decoration: none; } .pagenav a:hover { color: #fff; background-color: #005599; margin: 0.2em; text-decoration: none; } /*Helpers*/ .center {margin: 0 auto;} .content_center {text-align: center;} .flleft {float: left !important;} .flright {float: right !important;} .clear {clear: both;} /*IE Fixes*/ * html #main-bg { height: 1%; width: auto; } .clearfix:after { content:"."; display:block; height:0; clear:both; visibility:hidden; } /* Hide from IE Mac */ .clearfix {display:block;} /* End hide from IE Mac */ .floatfix {overflow:hidden;} * html .floatfix {width:100%;} .center, *[align=“center”] {margin: 0 auto;} .MemberForm { padding-top:0; padding-bottom:5; padding-left:35; padding-right:0; } .LoginForm { padding-top:0; padding-bottom:8; padding-left:20; padding-right:0; } .buttonReg { font-family:Tahoma,Arial,Verdana,Sans-Serif; font-size:10px; color:#fff; background-color: #4C80B0; background-image:url(images/buttonr.gif); background-repeat:repeat-x; border:#000 1px solid; margin-top:0px; padding-bottom:2px; height:16px; } .main { font-family : Verdana, Arial, Helvetica, sans-serif; font-size : 11px; color : #482b4c; background-color : #ffffff; padding : 2px 0px 4px 0px; border-left : 1px solid #482b4c; border-bottom : 1px solid #482b4c; border-right : 1px solid #482b4c; text-align: left } .buttonHeader { font-family:Tahoma,Arial,Verdana,Sans-Serif; font-size:10px; color:#000; background-color: #4C80B0; background-image:url(images/buttonh.gif); background-repeat:repeat-x; border:#1E5288 1px solid; margin-top:0px; padding-bottom:2px; height:16px; } #bigbuttons { padding: 0 0 0 0; margin: 0; width: 81px; } #bigbuttons li{ list-style: none; padding: 0 0 0 0; margin: 0; .homemenu { background-image: url(images/menu_02_hover.jpg); background-repeat: no-repeat; height: 30px; width: 81px; } .homemenu a{ background-image: url(images/menu_02.jpg); background-repeat: no-repeat; height: 30px; width: 81px; display: block; } .homemenu a:hover{ background: none; } #wrap { position: relative; margin: 0 auto; padding: 0; font-size: 95%; text-align: left; width: 800px; background: #0b415f; }

|

#2

znalazłeś kodzik, chcesz uzyskasz deczko inny efekt i za darmo my ci to mamy zrobić?

wygodnie…

#3

Zastrzegam że nie przerabiałem jeszcze thema z cms’a więc nie wiem czy coś jest dozwolone czy nie więc lepiej sprawdź to na jakiejś “kopii”

Odnajdź linijki

Następnie odnajdź linijki

echo '';

i zamień je na

echo '

'; [/code] możesz jak chcesz wywalić z tego vertical-align:top; i niestety musisz nadać konkretną wysokość dla tabeli. Następnie kod skryptu

[code]

musi znajdować się poniżej miejsca gdzie chcesz wyświetlać te linki (np. na samym dole strony - przed znacznikiem

[/code]




To jest Twoje menu podopisuj do każdego znacznika - onMouseover="showit(X)" gdzie X to numer wyświetlanego panelu

np.

[code]menu_02.png

#4
#5

Hmm, nie za bardzo to wychodzi, ale temat można zamknąc, bo zajmie się tym moj kolega^^

Dzięki za udzielenie pomocy^^