a:active problem

12 svar · 698 visningar · startad av miramira 20 maj 2006

miramiraMedlem sedan maj 200610 inlägg

Frågan20 maj 2006 15:58#1

Hej!

Har ett litet problem med min meny. Jag vill ha en bild på den länk som är aktiv.
Lyckas lägga in bilden på t ex visited och hover men inte på active. Jag vill alltså att den länk som man besöker sticker ut så att man vet var man befinner sig.

Väldigt tacksam för svar

nitro2k01Medlem sedan aug. 20039 340 inlägg

20 maj 2006 16:06#2

a:active syftar på den länk som har fokus, och har inget att göra med vilken sida som är laddad för tillfället.

<script type="text/javascript">
window.onload=function(){
  var links=document.getElementByTagName("A");
  for (var i=0; i<links.length; i++){
    if (links[i].href==location.href)
      for (var j=0; j<links[i].childNodes; j++){
        if (links[i].childNodes[j].tagName == "IMG" && -1 &= links[i].childNodes[j].src.indexOf("normal.gif"))
          links[i].childNodes[j].src = "aktiv.gif";
      }
  }
}
</script>

Typ så. Koden är bara testad i mitt huvud, men utgör en mall för kod som gör det du vill.

NiponMedlem sedan juli 2003270 inlägg

20 maj 2006 16:12#3

Hej och välkommen till WF! :)

Tror att jag förstår vad du vill åstadkomma... Men vill du verkligen använda active?

"active" funkar bara när länken är "aktiv" dvs efter "hover" och innan den blivit "visited".

Det jag tror att du vill åt brukar man åstadkomma med en class eller ett id på den länken som är aktuell - på just den sidan...

Men jag kan ju ha missuppfatat!

Presentera lite kod ( HTML och CSS ) så kan du säkert få hjälp!

miramiraMedlem sedan maj 200610 inlägg

20 maj 2006 16:16#4

Ok, men det jag är ute efter är att den länk som jag besöker för tillfället ska sticka ut ifrån dem andra länkarna. Jag kan ju styra utseendet på länkarna med t ex. a:hover eller a:visited men varför kan jag inte få a:active att (i mitt fall) visa en bakgrundsbild?

NiponMedlem sedan juli 2003270 inlägg

20 maj 2006 16:25#5

Vad vill du åt? Att bilden ska visas när man tabbar på sidan?
Eller vill du att den aktuella sidans länk ska ha ett visst utseende?

På en vanlig sida (utan ramar och sånt) är en länk bara "active" efter man tryckt på den (typ 1 sekund) - sedan laddas ju en ny sida in och då har den länken inte fokus längre.

nitro2k01Medlem sedan aug. 20039 340 inlägg

20 maj 2006 16:31#6

a:active påverkar en länk som är markerad. Från det att musknappen trycks ner till länken förlorar fokus (eller sidan laddas om) i FF's tolkning och så länge länken har fokus i IE's tolkning. Pröva att trycka ner musknappen på en länk med a:active och dra bort pekaren.

<style type="text/css">
a:link{color: blue;}
a:active{color:green;}
</style>
<a href="foo">bar</a>

thresholdMedlem sedan maj 20068 inlägg

20 maj 2006 16:32#7

Hej,

länkarna på sidan vet inte själva om de länkar till den aktuella sidan - så de kan inte veta om de ska vara markerade på något speciellt sätt. Men detta går alltså att lösa med t.ex. en css-class, som Nipon nämnde. Man måste då också sätta attributet class på a-taggen som ska visas på ett speciellt sätt.

Till exempel:

<html>
<head>
 <style type="text/css">
   a.aktuell-sida {font-weight:bold; background-image: url(bilden.gif);}
  </style>
</head>
<body>
  <a href="sida1.html">länk 1</a><br />
  <a class="aktuell-sida" href="sida2.html">länk 2</a><br />
  <a href="sida3.html">länk 3</a><br />
  <a href="sida4.html">länk 4</a><br />
</body>
</html>

/David

miramiraMedlem sedan maj 200610 inlägg

20 maj 2006 16:33#8

Ok, nu fattar jag!

De jag vill är att när jag besöker en av mina sidor ska länken för just den sidan vara annorlunda än dem andra länkarna. Man ska alltså kunna urskilja den från dem andra länkarna! Använder man bara a:visited vet man ju inte var man befinner sig om man redan klickat på alla länkarna.

Red ut detta för mig så jag kan gå vidare =)

NiponMedlem sedan juli 2003270 inlägg

20 maj 2006 16:44#9

Förslag:

[B]HTML:[/B] (på sida 1):

<ul>
<li><a href="#" id="aktuell" title="Denna sida">Sida 1</a></li>
<li><a href="#" title="Sida 2">Sida 2</a></li>
<li><a href="#" title="Sida 3">Sida 3</a></li>
<li><a href="#" title="Sida 4">Sida 4</a></li>
<li><a href="#" title="Sida 5">Sida 5</a></li>
</ul>

[B]CSS:[/B]

a#aktuell {här stajlar du hur du vill att den aktuella länken ska se ut}

På de andra sidorna måste du ju flytta på id="aktuell" i HTML-koden - förstås... :)

RED:
Ja - eller som treshold föreslog! Förlåt såg inte det... :r

miramiraMedlem sedan maj 200610 inlägg

20 maj 2006 17:04#10

Tack för alla svar ! Tror att jag ska kunna fixa de här nu...

cayaMedlem sedan aug. 20051 448 inlägg

20 maj 2006 17:07#11

eller såhär

<body id="startsida">

<div id="huvudmeny">
<ul>
<li class="hem"><a href="/">start</a></li>
<li class="om"><a href="/">info</a></li>
<li class="blog"><a href="/">blogg</a></li>
<li class="kont"><a href="/">kontakt</a></li>
</ul>
</div>

body#startsida #huvudmeny li.hem a, 
body#information #huvudmeny li.om a,
body#blogg #huvudmeny li.blog a,
body#kontakt #huvudmeny li.kont a
 { color:#000; }

så slipper man ha olika menyer på varje sida...

zcorpanMedlem sedan dec. 20042 245 inlägg

20 maj 2006 23:16#12

caya skrev:

body#startsida #huvudmeny li.hem a, 
body#information #huvudmeny li.om a,
body#blogg #huvudmeny li.blog a,
body#kontakt #huvudmeny li.kont a
 { color:#000; }

Det verkar vara lite onödigt specifika selektorer. Följande borde räcka:

#startsida .hem a, 
#information .om a,
#blogg .blog a,
#kontakt .kont a
 { color:#000; }

NiponMedlem sedan juli 2003270 inlägg

21 maj 2006 08:39#13

caya skrev:

eller såhär
<body id="startsida">
så slipper man ha olika menyer på varje sida...

Visst caya - det där är ju hur fiffigt som helst - men inte så användarvänligt. :)

Eftersom man åtminstone bör indikera med "title" att man befinner sig på "denna sida" så kan man ju lika gärna flytta på "id=aktuell" också... :)

Helst ska inte listpunkten på "denna sida" innehålla någon länk överhuvud taget - så att den "länken" inte indikeras som länk.

Så här typ:

<ul id="meny">
<li><span id="aktuell" title="Denna sida">Sida 1</span></li>
<li><a href="#" title="Sida 2">Sida 2</a></li>
<li><a href="#" title="Sida 3">Sida 3</a></li>
<li><a href="#" title="Sida 4">Sida 4</a></li>
<li><a href="#" title="Sida 5">Sida 5</a></li>
</ul>

Och sen:

#meny a, #meny span { stajla länkarna }

#meny span#aktuell { stajla aktuell länk }