Søg
Avatar billede noobsaibot Nybegynder
29. marts 2006 - 00:02 Der er 20 kommentarer og
1 løsning

document.[variabel]

Hej experter, har lige et spørgsmål til js (har ikke kodet så meget i js, men mere .NET)...

Jeg har skrevet en lille funktion der skifter et billede når man trykker på et link (den tager paramteren LinkName):

onmousedown="activeLink('profil')"

-------------------------------------
js-funktionen
-------------------------------------


function activeLink(LinkName)
{
    if(LinkName=="profil")
    {
        document.profil.src ="graa.jpg";
        document.cv.src ="lysGraa.jpg";               
    }
   
    if(LinkName=="cv")
    {
        document.cv.src ="graa.jpg";
        document.profil.src ="lysGraa.jpg";   
    }
}

Jeg vil gerne gøre min funktion lidt bedre/dynamisk, idet jeg synes det er træls at skulle hardcode hvert eneste menupunkt ind i min funktion.

Kan man ikke lave noget i stil med:
-------------------------------------

function activeLink(LinkName)
{
    if(LinkName=="profil")
    {
        document.LinkName.src ="graa.jpg";
        document.LinkName.src ="lysGraa.jpg";               
    }
}

Altså hvor "profil" skiftes ud med den variabel der hedder LinkName?

På forhånd tak!
Avatar billede noobsaibot Nybegynder
29. marts 2006 - 00:03 #1
Nej det skulle i hvert nærmere være ngt i stil med:
-------------------------------------

function activeLink(LinkName)
{
  document.LinkName.src ="graa.jpg";
}
Avatar billede mclemens Nybegynder
29. marts 2006 - 00:14 #2
noget i den stil her?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type"

content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
<!--
tmpprev="";
actlink="";

function activeLink(actlink)
{
  actlink.src ="graa.jpg";
  tmpprev.src="lysgraa.jpg";
  tmpprev=actlink;
}

//-->
</script>

</head>


<body>
<img src="lysgraa.jpg" onmousedown="activeLink(this);">
<img src="lysgraa.jpg" onmousedown="activeLink(this);">
</body></html>
Avatar billede noobsaibot Nybegynder
29. marts 2006 - 00:20 #3
hvilken Value får "actlink" når du sender "this" med?

Kan ikke lige få det til at fungere.
Avatar billede thesurfer Nybegynder
29. marts 2006 - 00:22 #4
"this" sender selve elementet med, dvs, billedet du klikker på.
"this" virker med alle elementer.

/theSurfer
Avatar billede mclemens Nybegynder
29. marts 2006 - 00:22 #5
ellers prøv denne..

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
<!--
tmpprev=0;
actid="";

function activeLink(actid)
{
  document.getElementById(actid).src ="graa.jpg";
  if((tmpprev!=0)&&(tmpprev!=actid)){document.getElementById(tmpprev).src="lysgraa.jpg";}
  tmpprev=actid;
}

//-->
</script>

</head>


<body>

<img src="lysgraa.jpg" id="profil">
<img src="lysgraa.jpg" id="cv"><br>

<a href="2.html" target="frame" onclick="activeLink('profil');">Skift profil</a><br>
<a href="2.html" target="frame" onclick="activeLink('cv');">Skift profil</a>
vælg selv...
<a href="java script: activeLink('profil');">Skift cv</a>
<a href="java script: activeLink('cv');">Skift cv</a>
</body></html>
Avatar billede mclemens Nybegynder
29. marts 2006 - 00:25 #6
ups teksten var lidt dum i eksemplet :P
Avatar billede mclemens Nybegynder
29. marts 2006 - 00:27 #7
ovenstående bruger skift via id på billedet
activeLink('id_der_viser_hen_til_en_img');
Avatar billede noobsaibot Nybegynder
29. marts 2006 - 00:29 #8
ahh.. har fået exemplet i: 29/03-2006 00:14:03 til at virke ..

Fordi jeg havde funktionskaldet på <a> og ikke <img> .. Hvilket egentlig ikke er optimalt .. Funktionen skulle helst kaldes fra <a> jo ..
Avatar billede mclemens Nybegynder
29. marts 2006 - 00:31 #9
editer lige 29/03-2006 00:22:47
Avatar billede mclemens Nybegynder
29. marts 2006 - 00:33 #10
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
<!--
tmpprev=0;
actid="";

function activeLink(actid)
{
  document.getElementById(actid).src ="graa.jpg";
  if((tmpprev!=0)&&(tmpprev!=actid)){document.getElementById(tmpprev).src="lysgraa.jpg";}
  tmpprev=actid;
}

//-->
</script>

</head>


<body>

<a href="#" onclick="activeLink('profil');"><img src="lysgraa.jpg" id="profil"></a> profilen...<br><br>


<a href="#" onclick="activeLink('cv');"><img src="lysgraa.jpg" id="cv"></a> cv'et...<br><br><br><br><br><br><br><br><br>

</body></html>
Avatar billede mclemens Nybegynder
29. marts 2006 - 00:34 #11
tilføj evt target="frame" til a'tagget og ret href'en
Avatar billede noobsaibot Nybegynder
29. marts 2006 - 00:54 #12
Har næsten fået det til at virke .. :)


------------------------------------
html filen
------------------------------------

<html>
    <head>
        <title>Titel</title><LINK href="design.css" type="text/css" rel="stylesheet">
            <script src="menu.js"></script>
    </head>
    <body>
        <TABLE id="Table1" cellSpacing="0" cellPadding="0" border="0">
            <TR>
                <TD align="center"><A class="menu" onmousedown="activeLink('profil')" onmouseover="hoverLink('profil')" onmouseout="resetLink('profil')" href="#">profil</A></TD>
                <TD align="center"><A class="menu" onmousedown="activeLink('cv')" onmouseover="hoverLink('cv')" onmouseout="resetLink('cv')" href="#">cv</A></TD>
                <TD></TD>
            </TR>
            <TR>
                <TD><IMG src="lysGraa.jpg" id="profil"></TD>
                <TD><IMG src="lysGraa.jpg" id="cv"></TD>
                <TD></TD>
            </TR>
        </TABLE>
    </body>
</html>

------------------------------------
js filen
------------------------------------

var actId = "";
var hoverId ="";
var resetId = "";

function activeLink(actId)
{
    document.getElementById(actId).src ="graa.jpg";

}

function hoverLink(hoverId)
{
   
    if(hoverId != actId)
    {
        document.getElementById(hoverId).src ="groen.jpg";
    }
}

function resetLink(resetId)
{
   
    if(resetId == hoverId)
    {
        document.getElementById(resetId).src ="lysGraa.jpg";
    }
}
Avatar billede noobsaibot Nybegynder
29. marts 2006 - 00:57 #13
Dvs det virker sådan set, men min "reset funktion" gør at lysGraa.jpg altid bliver vist ..

Måske for hoverId = "" hele tiden og ikke bliver "gemt"?
Avatar billede mclemens Nybegynder
29. marts 2006 - 01:02 #14
var actIds = "";
var hoverIds ="";
var resetId = "";
var tmpactIds =""


function activeLink(actId)
{
actIds=actId;
    document.getElementById(actId).src ="graa.jpg";
    if((tmpactIds!="")&&(tmpactIds!=actId))document.getElementById(tmpactIds).src ="lysGraa.jpg";
tmpactIds=actId;
}

function hoverLink(hoverId)
{
  hoverIds=hoverId;
    if(hoverId != actIds)
    {
        document.getElementById(hoverId).src ="groen.jpg";
    }
}

function resetLink(resetId)
{
 
    if((resetId == hoverIds)&&(resetId != actIds))
    {
        document.getElementById(resetId).src ="lysGraa.jpg";
    }hoverId="";
}
Avatar billede noobsaibot Nybegynder
29. marts 2006 - 01:09 #15
if((tmpactIds!="")&&(tmpactIds!=actId))
        {
            document.getElementById(tmpactIds).src ="lysGraa.jpg";
        }

gør at hvis man klikker på et nyt link (andet end actId) skal den være lysGraa.jpg i stedet?
Avatar billede mclemens Nybegynder
29. marts 2006 - 01:12 #16
nemlig ;)
Avatar billede mclemens Nybegynder
29. marts 2006 - 01:13 #17
derudover er der tilføjet nogle holdere til de forskellige variabler, navnene er ændret lidt så de ikke konflikter med functions kaldene
Avatar billede noobsaibot Nybegynder
29. marts 2006 - 01:17 #18
ja okay .. Er med :)

Du gemmer actId op i en global variabel tmpactId, idet actId bliver destroyed når functionen activeLink() er gennemløbet.

tmpactId svarer påden måde til den forrige actId .. og hvis den er forskellig fra actIds skal tmpactId være lysGraa.jpg (forudsat at tmpactId ikke er tom).

Cool nok!! Smid et svar - det var rigtig god hjælp. Jeg siger tak :)
Avatar billede mclemens Nybegynder
29. marts 2006 - 01:18 #19
det var så lidt
her er et svar ;)
Avatar billede mclemens Nybegynder
29. marts 2006 - 01:21 #20
- tak for point
... sov godt :)
Avatar billede noobsaibot Nybegynder
29. marts 2006 - 01:22 #21
Ingen årsag - og lige over!
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Webudvikling kurser
Vi tilbyder markedets bedste kurser inden for webudvikling
Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel Indlæg Oprettet Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript 5 27/04/202620:09 03/05/202613:59
Validering af filnavn i formular Af Strawberry i JavaScript 8 14/04/202610:11 20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript 2 03/02/202614:19 04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript 9 18/04/202516:52 22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript 2 14/02/202511:47 27/06/202514:34
Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 09:37 hvilken AI synes I er bedst? Af jcr18 i Andre onlineløsninger
I går 18:51 Pausepil på youtube i chrome Af valby i Browsere
I går 11:42 Mail med endelsen ".lat" Af ErikHg i E-mail
21/0511:48 Nyåbnede sider flimrer på Android tablet, hvorfor Af annam i Andet software
21/0511:03 Bitlocker fordele-ulemper, samt nulstille PC Af Uvanga i Windows
White papers
Flere white papers »