Søg
Avatar billede superjma Nybegynder
20. maj 2003 - 20:37 Der er 6 kommentarer

JavaScript i CSS

Hej

Er det muligt at skrive JavaScript i en CSS.
Tanken er at linien:
<td id="knap2" class="menu" onClick="Link(id,'test.html');" onmouseover="mouseover('knap2');" onmouseout="mouseout('knap2');"> skulle forkortes med CSS. Således at man kunne nøjes med at skrive:

<td id="knap1" class="menu" onClick="Link(id,'test.html');">Link1</td>

Og lade OnMouseOver og OnMouseOut styres af CSS således at man slipper for at skrive det flere gange..
Avatar billede roenving Novice
20. maj 2003 - 20:41 #1
Hvad udfører din mouse-events ...

Hvis de laver nogle style-ændring, så burde du næsten altid kunne klare det med en 'sub-class' à la:

.menu{...}
.menu:hover{...}
Avatar billede superjma Nybegynder
21. maj 2003 - 19:05 #2
Skifter blot baggrundsbillede.. Problemet er at det der sidst er blevet trykket på skal forblive "nedtrykket".

<script language=JavaScript>
    last_id='knap0';

    function Link(id,ref){
        temp_id=last_id;
        parent.main.location.href=ref;
        last_id=id;
        mouseout(temp_id);
    }

    function mouseover(id){
        if(id!=last_id)document.getElementById(id).style.backgroundImage = 'url(knap2.gif)'
    }

    function mouseout(id){
        if(id!=last_id)document.getElementById(id).style.backgroundImage = 'url(knap1.gif)'
    }
</script>
Avatar billede roenving Novice
21. maj 2003 - 19:13 #3
Du kan sagtens lave nummeret, for hvis du ændrer en property i style undervejs har den forrang

du skal bruge sådan noget lignende:

#knap1{background-image:url(knap1.gif)}
#knap1:hover{background-image:url(knap2.gif)}

#knap1 refererer til id'en knap1

-- jeg har ikke selv prøvet noget sådant, men teknikken skulle jo også være nok ...
Avatar billede superjma Nybegynder
05. juli 2003 - 20:52 #4
Undskyld det meget sene svar. Men jeg har haft travl med alt muligt andet.
Nu har jeg forsøgt som du sagde men jeg kan ikke få det til at virke.

<HTML>
<BODY>
<HEAD>
<STYLE TYPE="text/css">
knap1{background-image:url(knap1.gif)}
knap1:hover{background-image:url(knap2.gif)}
</style>
</HEAD>
<body>
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td id="knap1" class="menu">Link1</td>
</tr>
<tr>
<td id="knap2" class="menu">Link2</td>
</tr>
<tr>
<td id="knap3" class="menu">Link3</td>
</tr>
<tr>
<td id="knap4" class="menu">Link4</td>
</tr>
</table>
</BODY>
</HTML>

Og hvordan skifter jeg CSS'en ud uden at kontakte serveren igen? CSS'en er så vidt jeg har forstået konstant hele tiden
Avatar billede roenving Novice
05. juli 2003 - 22:33 #5
Du har glemt mine #-tegn -- de er _meget_ vigtige, for i css identificerer selectors uden noget foran tags, og jeg kender ikke html-tagget knap1 (og det gør browseren heller ikke !-)

Derudover er den korrekte syntaks jo:

#knap1:hover{background-image:url('knap2.gif')}

-- jeg var vist lidt hurtig på tasterne ...

En ting, som jeg endnu ikke har set en god forklaring på er imidlertid i hvilket omfang browserne understøtter den del af W3C's anbefalinger for CSS2 ...

Alle browsere understøtter ovenstående for <A>-tags men hvor mange andre understøttes?-)
Avatar billede superjma Nybegynder
07. juli 2003 - 10:43 #6
Det virker stadig ikke.. (I Explorer 6 - det er den størstedelen af verdensbefolknigen bruger.. så hvis det ikke virker her har det ikke den ønskede effekt)
<HTML>
<BODY>
<HEAD>
<STYLE TYPE="text/css">
.menu td{
    padding-left:18px;
    background: url(knap1.gif);
    width: 160;
    height: 30;
    align: left;
    valign:bottom;
}

#knap1{background-image:url('knap1.gif')}
#knap1:hover{background-image:url('knap2.gif')}
</style>
</HEAD>
<body>
<table border="0" cellspacing="0" cellpadding="0" class="menu">
<tr>
<td id="knap1" href="">Link1</td>
</tr>
<tr>
<td id="knap2">Link2</td>
</tr>
<tr>
<td id="knap3">Link3</td>
</tr>
<tr>
<td id="knap4">Link4</td>
</tr>
</table>
</BODY>
</HTML>

Jeg prøvede endda at sætte en href ind i td-tag'et, men uden effekt.
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 HTML kategorien

Titel Indlæg Oprettet Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML 18 10/09/202515:07 17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML 3 19/03/202522:16 20/03/202513:04
Se og ændre html på en webside Af magger i HTML 4 11/03/202513:55 12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML 5 02/03/202520:05 04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML 3 30/10/202409:37 01/01/202515:27
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
IT-JOB

Riskpoint A/S (Riskpoint Solutions Limited)

Senior Developer

Erhvervshus Hovedstaden S/I

Erfaren IT- og AI-specialist

Netcompany A/S

Microsoft Operations Engineer

Forsvarsministeriets Materiel- og Indkøbsstyrelse

Cyberdivisionen søger IT-supporterelever til lokal IT på Garderkasernen i Høvelte

Politiets Efterretningstjeneste

Compliance Manager til PET - Styrk vores IT-sikkerhed
Seneste spørgsmål Seneste aktivitet
I går 14:10 Komme ind på : YouSeeMusic" Af Ikke-ekspert i Musik & videoafspillere
I går 13:27 Send/modtag i Outlook 2024 Af ErikHg i E-mail programmer
10/0915:34 Installer alarmlyd på Samsung Galaxy XCover 7 Pro Af ErikHg i Mobiltelefoner
08/0913:06 Kan ikke starte min pc Af Malm i PC
07/0919:20 DVD program Af dcedata1977 i Andet software
White papers
Flere white papers »