Autor Zpráva
jvackar
Profil
#1 · Zasláno: 5. 9. 2007, 17:03:29
Odpovědět Citovat
Kde mám chybu, resp. jak to přepsat, aby to fungovalo i v Opeře a Firefoxu?
IE používá soubor hovermenu.htc:
<attach event="onmouseover" handler="hoverRollOver" />
<attach event="onmouseout" handler="hoverRollOff" />
<script type="text/javascript">
//
// Simple behaviour for IE5+ to emulate :hover CSS pseudo-class.
// Experimental ver 0.1
//
// This is an experimental version! Handle with care!
// Manual at: http://www.hszk.bme.hu/~hj130/css/list_menu/hover/
//

function hoverRollOver() {
element.origClassName = element.className; // backup origonal className
var tempClassStr = element.className;
tempClassStr += "Hover"; // convert name+'Hover' the last class name to emulate tag.class:hover
tempClassStr = tempClassStr.replace(/s/g,"Hover "); //convert name+'Hover' the others to emulate tag.class:hover
tempClassStr += " hover"; // add simple 'hover' class name to emulate tag:hover
element.className = element.className + " " + tempClassStr;
//window.status = element.className; // only for TEST
}
function hoverRollOff() {
element.className = element.origClassName;
}

</script>




soubor menu.html:

<HTML>
<HEAD>
<META HTTP-EQUIV=CONTENT-TYPE CONTENT="text/html; charset=windows-1250">
<TITLE>
</TITLE>
<LINK REL="stylesheet" TYPE="text/css" HREF="../styly.css">
<STYLE>
BODY {background: url("../obr/i_pozadi_obsah.jpg") no-repeat;}
.odkaz {text-decoration:none;color:#ffffff;display:block;width:100%;text-alig n:center;font-size: 12px;padding:2;cursor:default;}
div.tlacitko1{position:absolute;left:230px;top:250;width:100px;height: 100px;}
div.tlacitko2{position:absolute;left:630px;top:250;width:100px;height: 100px;}
div.tlacitko3{position:absolute;left:430px;top:150;width:100px;height: 100px;}
.menu{padding:0;margin:0;}
.menu a{text-decoration:none;color:#ffffff;display:block;width:100%;text-ali gn:center;font-size: 12px;padding:2;}
.menu ul,.menu li{list-style-type:none;}
.menu a:hover{text-decoration:none;}
ul.uroven1{width:100px;}
ul.uroven1 li.polozka1{position:relative;font-weight:bold;height:100px;line-heigh t:50px;background:#444 url('../obr/pozadi_menu_1.jpg') 0 0 no-repeat;}
ul.uroven2{position:absolute;line-height:100%;left:100px;top:0;width:1 00px;height:100px;visibility:hidden;}
ul.uroven3{position:absolute;line-height:100%;left:0px;top:-100;width: 100px;height:100px;visibility:hidden;}
ul.uroven4{position:absolute;line-height:100%;left:100px;top:0;width:1 00px;height:100px;visibility:hidden;}
ul.uroven5{position:absolute;line-height:100%;left:0px;top:100;width:1 00px;height:100px;visibility:hidden;}
ul.uroven6{position:absolute;line-height:100%;left:-100px;top:0;width: 100px;height:100px;visibility:hidden;}
ul.uroven7{position:absolute;line-height:100%;left:100px;top:0;width:1 00px;height:100px;visibility:hidden;}
ul.uroven2 li a{font-weight:bold;text-align:center;height:100px;line-height:30px;bac kground:#222 url('../obr/pozadi_menu_2.jpg') 0 0 no-repeat;position:absolute;color:#00FFFF;cursor:default;}
ul.uroven3 li a,ul.uroven4 li a,ul.uroven5 li a,ul.uroven6 li a,ul.uroven7 li a{font-weight:bold;text-align:center;width:100px;height:100px;line-hei ght:30px;background:#333 url('../obr/pozadi_menu_3.jpg') 0 0 no-repeat;position:absolute;color:#00FF00;cursor:hand;}

ul.uroven2 li.polozka2 a{left:-100px;top:-100px;}
ul.uroven2 li.polozka3 a{left:0px;top:0px;}
ul.uroven2 li.polozka4 a{left:-100px;top:100px;}
ul.uroven2 li.polozka5 a{left:-200px;top:0px;}
ul.uroven7 li.polozka2 a{left:-100px;top:-100px;}
ul.uroven7 li.polozka3 a{left:0px;top:0px;}
ul.uroven7 li.polozka4 a{left:-100px;top:100px;}
ul.uroven7 li.polozka5 a{left:-200px;top:0px;}
ul.uroven7 li.polozka18 a{left:0px;top:-100px;}
ul.uroven7 li.polozka19 a{left:0px;top:100px;}
ul.uroven7 li.polozka20 a{left:-200px;top:-100px;}
ul.uroven7 li.polozka21 a{left:-200px;top:100px;}
ul.uroven3 li.polozka6 a,ul.uroven4 li.polozka11 a,ul.uroven6 li.polozka15 a{left:-100px;top:-100px;}
ul.uroven3 li.polozka7 a,ul.uroven4 li.polozka9 a,ul.uroven5 li.polozka14 a{left:0px;top:0px;}
ul.uroven4 li.polozka10 a,ul.uroven5 li.polozka12 a,ul.uroven6 li.polozka16 a{left:-100px;top:100px;}
ul.uroven3 li.polozka8 a,ul.uroven5 li.polozka13 a,ul.uroven6 li.polozka17 a{left:-200px;top:0px;}

ul.uroven3 li.polozka6 a,ul.uroven4 li.polozka11 a,ul.uroven6 li.polozka15 a,ul.uroven3 li.polozka7 a,ul.uroven4 li.polozka9 a,ul.uroven5 li.polozka14 a,ul.uroven4 li.polozka10 a,ul.uroven5 li.polozka12 a,ul.uroven6 li.polozka16 a,ul.uroven3 li.polozka8 a,ul.uroven5 li.polozka13 a,ul.uroven6 li.polozka17 a,ul.uroven7 li.polozka18 a,ul.uroven7 li.polozka19 a,ul.uroven7 li.polozka20 a,ul.uroven7 li.polozka21 a{height:100px;width:100px;}

ul.uroven2 li a:hover{color:#00ffff0;}
ul.uroven7 li a:hover{color:#ff0000;}
ul.uroven3 li a:hover,ul.uroven4 li a:hover,ul.uroven5 li a:hover,ul.uroven6 li a:hover{color:#FF0000;}
ul.uroven1 li.polozka1{behavior:url(hovermenu.htc);}
ul.uroven2 li.polozka2{behavior:url(hovermenu.htc);}
ul.uroven2 li.polozka3{behavior:url(hovermenu.htc);}
ul.uroven2 li.polozka4{behavior:url(hovermenu.htc);}
ul.uroven2 li.polozka5{behavior:url(hovermenu.htc);}
ul.uroven7 li.polozka2{behavior:url(hovermenu.htc);}
ul.uroven7 li.polozka3{behavior:url(hovermenu.htc);}
ul.uroven7 li.polozka4{behavior:url(hovermenu.htc);}
ul.uroven7 li.polozka5{behavior:url(hovermenu.htc);}
ul.uroven7 li.polozka18{behavior:url(hovermenu.htc);}
ul.uroven7 li.polozka19{behavior:url(hovermenu.htc);}
ul.uroven7 li.polozka20{behavior:url(hovermenu.htc);}
ul.uroven7 li.polozka21{behavior:url(hovermenu.htc);}
ul.uroven1 li.polozka1:hover,ul.uroven1 li.polozka1Hover{background:#000 url('../obr/pozadi_menu_1.jpg') 0px 0 no-repeat;}
ul.uroven1 li.polozka1Hover ul.uroven2, ul.uroven1 li.polozka1:hover ul.uroven2, ul.uroven2 li.polozka2Hover ul.uroven3, ul.uroven2 li.polozka2:hover ul.uroven3, ul.uroven2 li.polozka3Hover ul.uroven4, ul.uroven2 li.polozka3:hover ul.uroven4, ul.uroven2 li.polozka4Hover ul.uroven5, ul.uroven2 li.polozka4:hover ul.uroven5, ul.uroven2 li.polozka5Hover ul.uroven6, ul.uroven2 li.polozka5:hover ul.uroven6, ul.uroven1 li.polozka1Hover ul.uroven7, ul.uroven1 li.polozka1:hover ul.uroven7, {
visibility: visible;
}

</STYLE>
</HEAD>
<BODY>
<DIV CLASS="tlacitko1">
<UL CLASS="menu uroven1">
<LI CLASS="polozka1" style="z-index:100;">
<SPAN CLASS="odkaz">TLAČÍTKO 1</SPAN>
<UL CLASS="menu uroven2">
<LI CLASS="polozka2">
<A HREF="">1</A>
<UL CLASS="menu uroven3">
<LI CLASS="polozka6">
<A HREF="">X</A></LI>
<LI CLASS="polozka7">
<A HREF="">Y</A></LI>
<LI CLASS="polozka8">
<A HREF="">Z</A></LI>
</UL></LI>
<LI CLASS="polozka3">
<A HREF="">2</A>
<UL CLASS="menu uroven4">
<LI CLASS="polozka9">
<A HREF="">X</A></LI>
<LI CLASS="polozka10">
<A HREF="">Y</A></LI>
<LI CLASS="polozka11">
<A HREF="">Z</A></LI>
</UL></LI>
<LI CLASS="polozka4">
<A HREF="">3</A>
<UL CLASS="menu uroven5">
<LI CLASS="polozka12">
<A HREF="">X</A></LI>
<LI CLASS="polozka13">
<A HREF="">Y</A></LI>
<LI CLASS="polozka14">
<A HREF="">Z</A></LI>
</UL></LI>
<LI CLASS="polozka5">
<A HREF="">4</A>
<UL CLASS="menu uroven6">
<LI CLASS="polozka15">
<A HREF="">X</A></LI>
<LI CLASS="polozka16">
<A HREF="">Y</A></LI>
<LI CLASS="polozka17">
<A HREF="">Z</A></LI>
</UL></LI>
</UL></LI>
</UL></DIV>
<DIV CLASS="tlacitko2">
<UL CLASS="menu uroven1">
<LI CLASS="polozka1" style="z-index:100;">
<SPAN CLASS="odkaz">TLAČÍTKO 2</SPAN>
<UL CLASS="menu uroven2">
<LI CLASS="polozka2">
<A HREF="">1</A>
<UL CLASS="menu uroven3">
<LI CLASS="polozka6">
<A HREF="">X</A></LI>
<LI CLASS="polozka7
jvackar
Profil
#2 · Zasláno: 5. 9. 2007, 17:06:49
Odpovědět Citovat
Koukám,že se to sem nevešlo celé, tak jsem to umístil na web:
http://www.ata4.cz/pokus/menu.htm
jvackar
Profil
#3 · Zasláno: 7. 9. 2007, 14:35:20
Odpovědět Citovat
Chybu už jsem našel - dělala to čárka na konci v css stylech :-))
uroven7, {
visibility: visible;
Časová prodleva: 17 let
Toto téma je uzamčeno. Odpověď nelze zaslat.

0