Aktiver Link will nicht

Maxm123 · 5. Dezember 2008

Nach 2 stündigen Suchen gebe ich jetzt auf. Ich habe mir eine Navigation mit Bilder und Hover gebaut. Ich möchte das das Angelickte Bild das Hoverbild behält. Hab rausgefunden das das mit a.nav:active nicht geht. Dann bin ich auf ein JavaScript gestoßen

Code:

<script type="text/javascript">
<!--
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}

//-->
</script>

Code:

<style type="text/css">
<!--
a.nav, a.clicked {
color: #b9b9b9;
}

a.nav:hover, a.clicked {
color: #0090E0;
}
-->
</style>

Code:

<a href="#link1" class="nav" onclick="aktivieren(this.href)">link 1</a>
<a href="#link2" class="nav" onclick="aktivieren(this.href)">link 2</a>
<a href="#link3" class="nav" onclick="aktivieren(this.href)">link 3</a>

Geht aber auch nicht. Hat noch jemand eine Lösung?

Danke für die Hilfe

Maik · 5. Dezember 2008

Hi,

und wo sind in der Navigation die Bilder versteckt?

Ich seh da nirgends welche, und wo keine enthalten sind, kann dein "Patient" auch schwer "gehen"

Diese müssen in den beiden gezeigten CSS-Regeln als Hintergrundbilder für die Links definiert werden.

Falls für jeden Link ein individuelles "Hover-Set" erwünscht ist, wird das Menü mit einem Listenelement und seine Listeneinträge jeweils mit einem eindeutigen ID-Bezeichner ausgezeichnet (hier: #link1, #link2, #link3), und das Stylesheet entsprechend erweitert.

Code:

<ul>
    <li id="link1"><a href="#link1" class="nav" onclick="aktivieren(this.href)">link 1</a></li>
    <li id="link2"><a href="#link2" class="nav" onclick="aktivieren(this.href)">link 2</a></li>
    <li id="link3"><a href="#link3" class="nav" onclick="aktivieren(this.href)">link 3</a></li>
</ul>

CSS:

a.nav, a.clicked {
display:block; /* Inline-Element wird als Block-Element interpretiert */
width:80px; /* entspricht der Grafikbreite */
height:20px; /* entspricht der Grafikhöhe */
}
#link1 a.nav, #link1 a.clicked {
background:url(link1.png);
}
#link2 a.nav, #link2 a.clicked {
background:url(link2.png);
}
#link3 a.nav, #link3 a.clicked {
background:url(link3.png);
}
#link1 a.nav:hover, #link1 a.clicked {
background:url(link1_hover.png);
}
#link2 a.nav:hover, #link2 a.clicked {
background:url(link2_hover.png);
}
#link3 a.nav:hover, #link3 a.clicked {
background:url(link3_hover.png);
}

mfg Maik

//edit

Da hab ich doch glatt vergessen, dir zum Thema "CSS-Rollover" mein gleichnamiges Tutorial weiterzuempfehlen

Maxm123 · 6. Dezember 2008

oops hab vergessen den angepassten code auf meiner seite zu posten

hier is er:

Code:

<script type="text/javascript">
<!--
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(home|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'home';
                        }
                }
        }
}

//-->
</script>

Code:

<div class="nav"><a target="main" href="http://www.tutorials.de/forum/images/background.jpg" onclick="aktivieren(this.href)" class="home"></a></div>

Code:

a {}

.home, home.clicked
	{
	background-image:url(../images/home-n.png);
	display:block;
	height:40px;
	width:114px;
	}

.home:hover, home.clicked
	{
	background-image:url(../images/homeh-n.png);
	display:block;
	height:40px;
	width:114px;
	}

ich gucke mal ob es mit deinem klappt

//EDIT: Kann man denn Listenelemente auch nebeneinander darstellen und nicht untereinander?

Maik · 6. Dezember 2008

Moin,

die Ursache für den Funktionsausfall sind bei dir die rotmarkierten Passagen, die dort entfernt gehören:

Code:

.home, home.clicked
	{
	background-image:url(../images/home-n.png);
	display:block;
	height:40px;
	width:114px;
	}

.home:hover, home.clicked
	{
	background-image:url(../images/homeh-n.png);
	display:block;
	height:40px;
	width:114px;
	}

mfg Maik

Maxm123 · 6. Dezember 2008

also schreibe ich: .home, a.clicked ?

//EDIT: Ja es geht

)))))

danke

Maik · 6. Dezember 2008

Maxm123 hat gesagt.:
//EDIT: Kann man denn Listenelemente auch nebeneinander darstellen und nicht untereinander?

Selbstverständlich kann man das

CSS:

a.home, a.clicked {
background-image:url(../images/home-n.png);
float:left; /* Element wird vom benachbarten Element rechts umflossen */
width:114px;
height:40px;
}

a.home:hover, a.clicked {
background-image:url(../images/homhe-n.png);
}

li {
display:inline; /* Element erzeugt keinen Absatz / automatischen Zeilenumbruch im Textfluß */
}

mfg Maik

Maxm123 · 6. Dezember 2008

so hab das ganz jetzt erst mal mit 2 buttons auf ner seite gemacht. es funktioniert weinwand frei bis ich den 2ten button anklicken. ich will das dann der "aktiv-effekt" weg geht. wie mache ich das?

www.dj-max-mueller.de zum angucken was ich meine

Maik · 6. Dezember 2008

Hi,

lies dir bitte nochmal meine erste Antwort durch, und schau dir darin meinen gezeigten HTML- und CSS-Code genauer an, mit dem sich für jeden einzelnen Menüpunkt sein eigenes Hintergrundbild-Set für die einzelnen Link-Zustände festlegen lässt - diesen erforderlichen Teil hast du bei dir im Quellcode bislang nicht übernommen.

mfg Maik

Maxm123 · 6. Dezember 2008

so hab das jetzt gemacht...doch nun sind die links nicht mehr da wo sie sein soll, weder noch nebeneinander und hinter der grafik versteckt. ich hab schon ein bisschen probiert. bekomme es aber nicht hin. muss ich das über die listenelemente machen?

CSS

Code:

@charset "utf-8";
/* CSS Document */
BODY 
	{
	background-image: url(../images/background.jpg);
	}
	
img, div, a { behavior: url(iepngfix/iepngfix.htc) }

hr 
	{}

.bottomline	
	{
	width:99%;
	border: dashed;
	border-color:#FFFFFF;
	bottom:40px;
	position: absolute;
	}

div {}

.header
	{
	background-image:url(../images/header.png);
	position:absolute;
	top:10px;
	left:10px;
	width:600px;
	height:325px;
	}

.navdiv 
	{
	position:absolute;
	bottom:0xp;
	left: 8px;
	}

.dates
	{
	position:absolute;
	top:210px;
	left:180px;
	font-family:Arial, Helvetica, sans-serif;
	font-size:18px;
	}

.maindiv
	{
	position:absolute;
	top:20px;
	left:500px;
	}

iframe {}

.datesif
	{
	frameborder:0px;
	border:0px;
	background-color:transparent;
	filter: chroma(color=#FFFFFF);
	height:150px;
	width:190px;
	}

.mainif
	{
	frameborder:0px;
	border:0px;
	background-color:transparent;
	filter: chroma(color=#FFFFFF);
	height:450px;
	width:500px;
	}
	
table{}

.mainframetb 
	{
	width:500px;
	height:450px;
	}
	
td {}

.mainframetd
	{
	border:1px solid #000;
	border-color:#FFFFFF;
	}
	
li {}

.navli
	{
	display:inline;
	}
	
a {}

.nav, a.clicked 
	{
	display:block;
	height:40px;
	}

#home .nav, #home a.clicked 
	{
	background:url(../images/home-n.png);
	width:114px;
	}
	
#djing .nav, #djing a.clicked 
	{
	background:url(../images/djing-n.png);
	width:109px;
	}
	
#home .nav:hover, #home a.clicked 
	{
	background:url(../images/homeh-n.png);
	width:114px;
	}
	
#djing .nav:hover, #djing a.clicked 
	{
	background:url(../images/djingh-n.png);
	width:109px;
	}

HTML

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>DJ-Max-M&uuml;ller</title>
<link rel=stylesheet type="text/css" href="css/mm.css">
<script type="text/javascript" src="js/mm.js"></script>
</head>
<body>
<div class="header"></div>
<div class="dates">Partydates:<br />
<iframe scrolling="no" class="datesif" src=""></iframe>
</div>
<div class="maindiv">
<table class="mainframetb">
	<tr>
    	<td class="mainframetd">
			<iframe name="main" value="main" src="site/home.html" class="mainif"></iframe>
		</td>
    </tr>
</table>
</div>  
<hr class="bottomline" />
<div class="navdiv">
		<ul>
    		<li class="navli" id="home"><a href="site/home.html" target="main" class="nav" onclick="aktivieren(this.href)"></a></li>
            <li class="navli" id="home"><a href="site/home.html" target="main" class="nav" onclick="aktivieren(this.href)"></a></li>
    	</ul>
</div>
</body>
</html>

JS

Code:

// JavaScript Document
<script type="text/javascript">
<!--
function aktivieren(strHref)
{
    if(document.getElementById)
        {
            for(i=0;i<document.links.length;++i)
                {
                    if(String(document.links[i].className).match(/^(nav|clicked)$/))
                        {
                            document.links[i].className=(document.links[i].href==strHref)?'clicked':'nav';
                        }
                }
        }
}

//-->
</script>

Maik · 6. Dezember 2008

Dass die Links nun nicht mehr wie zuvor am unteren Fensterrand angezeigt werden, liegt daran, dass die Box navdiv2 nicht die absolute Positionsangaben besitzt, so wie zuvor navdiv, und somit nun im normalen Textfluß oben links beginnend ausgerichtet wird.

Außerdem hast du im HTML-Code die beiden Listeneinträgen <li> mit dem gleichlautenden ID-Bezeichner "#home" ausgezeichnet, der dort aber nur einmalig vergeben werden darf - im Stylesheet hast du ja auch für den zweiten Menüpunkt die ID #djing vorgesehen (in meinem gestrigen Beispiel waren dies die IDs #link1, #link2, #link3).

mfg Maik

Aktiver Link will nicht

Maxm123

Mitglied

Maik

Maxm123

Mitglied

Maik

Maxm123

Mitglied

Maik

Maxm123

Mitglied

Maik

Maxm123

Mitglied

Maik

Neue Beiträge