problem s javascriptom

ahoj, na stránke mám dve menu. Jedno je naštýlované pomocou css a javascriptu a druhé len css. Problém je, že javascript z druhého menu ovplyvňuje odkazy na stránke globálne. Ako nastaviť aby bolo jedno menu len css? Do samotného javascriptu šahať nechcem. dík

Musíš ten css mierne upresniť. Teda budeš používať niečo ako

Kód: Vybrať všetko

.menu1 a 
.menu2 a

nie, nepochopil si ma. Mam dve menu a javascript a css. Jedno menu ma byt ovplyvnene javascriptom i css, druhe len css. A ten debil javascript mi globalne ovplyvnuje vsetky linky, cize potrebujem daco ako <noscript> ktory prepusti css ale javascript nie. Ale diik za snahu

Tak sem daj ukážku toho, ako to vyzerá.

Kód: Vybrať všetko

<div class="container">
  
  <!-- lavy stlpec -->
  <div class="left_collumn">
   <div class="left_collumn_picture">
   <img src="" alt="pekny obrazok">
   </div>
   <!-- tu budu odkazy -->
     [b]<div class="odkazy_left">[/b]
     <a href="index.html" title="domov">Hlavná stránka</a><br>
     <a href="omne.html" title="o mne">O autorovi</a><br>
     <a href="vlastnatvorba.html" title="tvorba photoshop, www">Prezentacia mojej<br> tvorby</a><br>
     <a href="kontakt.html" title="kontakt">Kontakt</a><br>
     </div>
     

  <!-- pravy stlpec-->
  <div class="right_collumn">
  <p>
  Zabava
  </p>
   
   <div class="obraz_right">
     <img src="" alt="pekny obrazok">
   </div>
   
   <br>
   [b]<script type="text/javascript" src="files/grade.js"></script>[/b]
   [b]<div class="menu_right">[/b]
   <a href="odkazy.html" title="oblubene odkazy">Oblubene odkazy</a><br><br>
   <a href="poviedky.html" title="poviedky">Poviedky a kratka proza</a><br><br>
   <a href="fotky.html" title="fotografie">Fotky</a>
  </div>

Kód: Vybrať všetko


div.top_page {width:100%; height:100px; background-color:eee8aa;}
div.container {width:100%; height:100%; background-color:white;}
div.left_collumn {width:200px; height:100%; background-color:f0e68c; float:left;margin-right:30px;}
div.left_collumn_picture {width:50px; height:100%; float:left}
div.text {width:600px; height:100%; background-color:white; float:left; align: justify}
div.right_collumn {width:200px; height:100%; background-color:9acd32;float:left; margin-left: 80px;}
div.odkazy_left {border-bottom: 3px solid rgb(139,69,19); margin-left:50px; padding-bottom:20px}
div.prislovia {text-align:justify;margin-top:20px}

div.left_collumn a {display:block; background-image:url('tlacitko2.gif'); height:38px; color: green; font-size:15;}
div.left_collumn a:hover{background-repeat:no-repeat; background-image:url('tlacitko2_hover.gif')}

div.menu_right a {margin-left:50px; color: black; font-size:13;}
div.obraz_right {text-align:right}

div.text h1 {font-size: 20; font-family: arial; color: a0522d}

a ten javascript - nie je to moja praca, do javascriptu sa royumiem len trochen

Kód: Vybrať všetko

/******************************************************************* 
* File    : LinkFader.js  © JavaScript-FX.com
* Created : 2002/09/05 
* Author  : Roy Whittle  ([email protected]) www.Roy.Whittle.com 
* Purpose : To create a more dynamic a:hover using fading
* History 
* Date         Version        Description 
* 2002-09-05	1.0		First version
***********************************************************************/
/*** Create some global variables ***/
if(!window.JSFX)JSFX=new Object();

var LinkFadeInStep=5;
var LinkFadeOutStep=10;
var LinkEndColor="faea59"

var LinkStartColor="f0f8ff";
var LinkFadeRunning=false;

document.onmouseover = theOnOver;
document.onmouseout  = theOnOut;
if(document.captureEvents)
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);

/***********************************************
*
* Function    : getColor
*
* Parameters  :	start - the start color (in the form "RRGGBB" e.g. "FF00AC")
*			end - the end color (in the form "RRGGBB" e.g. "FF00AC")
*			percent - the percent (0-100) of the fade between start & end
*
* returns	  : color in the form "#RRGGBB" e.g. "#FA13CE"
*
* Description : This is a utility function. Given a start and end color and
*		    a percentage fade it returns a color in between the 2 colors
*
* Author	  : www.JavaScript-FX.com
*
*************************************************/
function hex2dec(hex){return(parseInt(hex,16));}
function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);} 
function getColor(start, end, percent)
{

	var r1=hex2dec(start.slice(0,2));
	var g1=hex2dec(start.slice(2,4));
	var b1=hex2dec(start.slice(4,6));

	var r2=hex2dec(end.slice(0,2));
	var g2=hex2dec(end.slice(2,4));
	var b2=hex2dec(end.slice(4,6));

	var pc=percent/100;

	var r=Math.floor(r1+(pc*(r2-r1)) + .5);
	var g=Math.floor(g1+(pc*(g2-g1)) + .5);
	var b=Math.floor(b1+(pc*(b2-b1)) + .5);

	return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
}
/************************************************/
JSFX.getCurrentElementColor = function(el) 
{ 
	var result = LinkStartColor;

	if (el.currentStyle) 
		result = (el.currentStyle.color); 
	else if (document.defaultView) 
		result = (document.defaultView.getComputedStyle(el,'').getPropertyValue('color'));
	else if(el.style.color) //Opera
		result = el.style.color;

	if(result.charAt(0) == "#")      //color is of type #rrggbb
		result = result.slice(1, 8);
	else if(result.charAt(0) == "r") //color is of type rgb(r, g, b)
	{
		var v1 = result.slice(result.indexOf("(")+1, result.indexOf(")") );
		var v2 = v1.split(",");
		result = (dec2hex(parseInt(v2[0])) + dec2hex(parseInt(v2[1])) + dec2hex(parseInt(v2[2])));
	}

	return result;
} 
JSFX.findTagIE = function(el)
{
      while (el && el.tagName != 'A')
            el = el.parentElement;
	return(el);
}
JSFX.findTagNS= function(el)
{
      while (el && el.nodeName != 'A')
            el = el.parentNode;
	return(el);
}
function theOnOver(e)
{
	var lnk;
	if(window.event)
		lnk=JSFX.findTagIE(event.srcElement);
	else
		lnk=JSFX.findTagNS(e.target);

	if(lnk)
		JSFX.linkFadeUp(lnk);
}
JSFX.linkFadeUp = function(lnk)
{
	if(lnk.state == null)
	{
		lnk.state = "OFF";
		lnk.index = 0;
		lnk.startColor = JSFX.getCurrentElementColor(lnk);
		lnk.endColor = LinkEndColor;
	}

	if(lnk.state == "OFF")
	{
		lnk.state = "FADE_UP";
		JSFX.startLinkFader();
	}
	else if( lnk.state == "FADE_UP_DOWN"
		|| lnk.state == "FADE_DOWN")
	{
		lnk.state = "FADE_UP";
	}
}
function theOnOut(e)
{
	var lnk;
	if(window.event)
		lnk=JSFX.findTagIE(event.srcElement);
	else
		lnk=JSFX.findTagNS(e.target);

	if(lnk)
		JSFX.linkFadeDown(lnk);
}
JSFX.linkFadeDown = function(lnk)
{
	if(lnk.state=="ON")
	{
		lnk.state="FADE_DOWN";
		JSFX.startLinkFader();
	}
	else if(lnk.state == "FADE_UP")
	{
		lnk.state="FADE_UP_DOWN";
	}
}
JSFX.startLinkFader = function()
{
	if(!LinkFadeRunning)
		JSFX.LinkFadeAnimation();
}
/*******************************************************************
*
* Function    : LinkFadeAnimation
*
* Description : This function is based on the Animate function
*		        of animate.js (animated rollovers).
*		        Each fade object has a state. This function
*		        modifies each object and changes its state.
*****************************************************************/
JSFX.LinkFadeAnimation = function()
{
	LinkFadeRunning = false;
	for(i=0 ; i<document.links.length ; i++)
	{
		var lnk = document.links[i];
		if(lnk.state)
		{
			if(lnk.state == "FADE_UP")
			{
				lnk.index+=LinkFadeInStep;
				if(lnk.index > 100)
					lnk.index = 100;
				lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

				if(lnk.index == 100)
					lnk.state="ON";
				else
					LinkFadeRunning = true;
			}
			else if(lnk.state == "FADE_UP_DOWN")
			{
				lnk.index+=LinkFadeOutStep;
				if(lnk.index>100)
					lnk.index = 100;
				lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

				if(lnk.index == 100)
					lnk.state="FADE_DOWN";
				LinkFadeRunning = true;
			}
			else if(lnk.state == "FADE_DOWN")
			{
				lnk.index-=LinkFadeOutStep;
				if(lnk.index<0)
					lnk.index = 0;
				lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);
	
				if(lnk.index == 0)
					lnk.state="OFF";
				else
					LinkFadeRunning = true;
			}
		}
	}
	/*** Check to see if we need to animate any more frames. ***/
	if(LinkFadeRunning)
		setTimeout("JSFX.LinkFadeAnimation()", 40);
}

Ja by som mierne upravil javascript a potom aj tie linky (tak, aby ten javascript reagoval iba na linky s určitým atribútom class).

V Javascripte som pridal premennú LinkFadeClass (tam nastavíš, akú hodnotu to má v class hľadať) a potom ešte funkcie findTagIE a findTagNS.

Kód: Vybrať všetko

/*******************************************************************
* File    : LinkFader.js  © JavaScript-FX.com
* Created : 2002/09/05
* Author  : Roy Whittle  ([email protected]) www.Roy.Whittle.com
* Purpose : To create a more dynamic a:hover using fading
* History
* Date         Version        Description
* 2002-09-05	1.0		First version
***********************************************************************/
/*** Create some global variables ***/
if(!window.JSFX)JSFX=new Object();

var LinkFadeInStep=5;
var LinkFadeOutStep=10;
var LinkEndColor="faea59"

var LinkStartColor="f0f8ff";
var LinkFadeRunning=false;

var LinkFadeClass="fade_link";

document.onmouseover = theOnOver;
document.onmouseout  = theOnOut;
if(document.captureEvents)
    document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT);

/***********************************************
*
* Function    : getColor
*
* Parameters  :	start - the start color (in the form "RRGGBB" e.g. "FF00AC")
*			end - the end color (in the form "RRGGBB" e.g. "FF00AC")
*			percent - the percent (0-100) of the fade between start & end
*
* returns	  : color in the form "#RRGGBB" e.g. "#FA13CE"
*
* Description : This is a utility function. Given a start and end color and
*		    a percentage fade it returns a color in between the 2 colors
*
* Author	  : www.JavaScript-FX.com
*
*************************************************/
function hex2dec(hex){return(parseInt(hex,16));}
function dec2hex(dec){return (dec < 16 ? "0" : "") + dec.toString(16);}
function getColor(start, end, percent)
{

	var r1=hex2dec(start.slice(0,2));
	var g1=hex2dec(start.slice(2,4));
	var b1=hex2dec(start.slice(4,6));

	var r2=hex2dec(end.slice(0,2));
	var g2=hex2dec(end.slice(2,4));
	var b2=hex2dec(end.slice(4,6));

	var pc=percent/100;

	var r=Math.floor(r1+(pc*(r2-r1)) + .5);
	var g=Math.floor(g1+(pc*(g2-g1)) + .5);
	var b=Math.floor(b1+(pc*(b2-b1)) + .5);

	return("#" + dec2hex(r) + dec2hex(g) + dec2hex(b));
}
/************************************************/
JSFX.getCurrentElementColor = function(el)
{
	var result = LinkStartColor;

	if (el.currentStyle)
		result = (el.currentStyle.color);
	else if (document.defaultView)
		result = (document.defaultView.getComputedStyle(el,'').getPropertyValue('color'));
	else if(el.style.color) //Opera
		result = el.style.color;

	if(result.charAt(0) == "#")      //color is of type #rrggbb
		result = result.slice(1, 8);
	else if(result.charAt(0) == "r") //color is of type rgb(r, g, b)
	{
		var v1 = result.slice(result.indexOf("(")+1, result.indexOf(")") );
		var v2 = v1.split(",");
		result = (dec2hex(parseInt(v2[0])) + dec2hex(parseInt(v2[1])) + dec2hex(parseInt(v2[2])));
	}

	return result;
}
JSFX.findTagIE = function(el)
{
      while (el && el.tagName != 'A')
            el = el.parentElement;
        if (el && el.getAttribute("class") == LinkFadeClass) return(el);
        else return null;
}
JSFX.findTagNS= function(el)
{
      while (el && el.nodeName != 'A')
            el = el.parentNode;
        if (el && el.getAttribute("class") == LinkFadeClass) return(el);
        else return null;
}
function theOnOver(e)
{
	var lnk;
	if(window.event)
		lnk=JSFX.findTagIE(event.srcElement);
	else
		lnk=JSFX.findTagNS(e.target);

	if(lnk)
		JSFX.linkFadeUp(lnk);
}
JSFX.linkFadeUp = function(lnk)
{
	if(lnk.state == null)
	{
		lnk.state = "OFF";
		lnk.index = 0;
		lnk.startColor = JSFX.getCurrentElementColor(lnk);
		lnk.endColor = LinkEndColor;
	}

	if(lnk.state == "OFF")
	{
		lnk.state = "FADE_UP";
		JSFX.startLinkFader();
	}
	else if( lnk.state == "FADE_UP_DOWN"
		|| lnk.state == "FADE_DOWN")
	{
		lnk.state = "FADE_UP";
	}
}
function theOnOut(e)
{
	var lnk;
	if(window.event)
		lnk=JSFX.findTagIE(event.srcElement);
	else
		lnk=JSFX.findTagNS(e.target);

	if(lnk)
		JSFX.linkFadeDown(lnk);
}
JSFX.linkFadeDown = function(lnk)
{
	if(lnk.state=="ON")
	{
		lnk.state="FADE_DOWN";
		JSFX.startLinkFader();
	}
	else if(lnk.state == "FADE_UP")
	{
		lnk.state="FADE_UP_DOWN";
	}
}
JSFX.startLinkFader = function()
{
	if(!LinkFadeRunning)
		JSFX.LinkFadeAnimation();
}
/*******************************************************************
*
* Function    : LinkFadeAnimation
*
* Description : This function is based on the Animate function
*		        of animate.js (animated rollovers).
*		        Each fade object has a state. This function
*		        modifies each object and changes its state.
*****************************************************************/
JSFX.LinkFadeAnimation = function()
{
	LinkFadeRunning = false;
	for(i=0 ; i<document.links.length ; i++)
	{
		var lnk = document.links[i];
		if(lnk.state)
		{
			if(lnk.state == "FADE_UP")
			{
				lnk.index+=LinkFadeInStep;
				if(lnk.index > 100)
					lnk.index = 100;
				lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

				if(lnk.index == 100)
					lnk.state="ON";
				else
					LinkFadeRunning = true;
			}
			else if(lnk.state == "FADE_UP_DOWN")
			{
				lnk.index+=LinkFadeOutStep;
				if(lnk.index>100)
					lnk.index = 100;
				lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

				if(lnk.index == 100)
					lnk.state="FADE_DOWN";
				LinkFadeRunning = true;
			}
			else if(lnk.state == "FADE_DOWN")
			{
				lnk.index-=LinkFadeOutStep;
				if(lnk.index<0)
					lnk.index = 0;
				lnk.style.color=getColor(lnk.startColor, lnk.endColor, lnk.index);

				if(lnk.index == 0)
					lnk.state="OFF";
				else
					LinkFadeRunning = true;
			}
		}
	}
	/*** Check to see if we need to animate any more frames. ***/
	if(LinkFadeRunning)
		setTimeout("JSFX.LinkFadeAnimation()", 40);
}

V html potom použiješ:

Kód: Vybrať všetko

   <div class="menu_right">
   <a class="fade_link" href="odkazy.html" title="oblubene odkazy">Oblubene odkazy</a><br><br>
   <a class="fade_link" href="poviedky.html" title="poviedky">Poviedky a kratka proza</a><br><br>
   <a class="fade_link" href="fotky.html" title="fotografie">Fotky</a>
  </div>

(ten odkaz na files/grade.js môžeš presunúť do html hlavičky).

vdaka, super, si zlaty, diiiiiiiiik za help. S javascriptom len zacinam

k+