Notifikationer

Markér alle som læst Log ud

dont Nybegynder

30. juni 2003 - 23:58 Der er 18 kommentarer og
1 løsning

borders i tabel

Jeg er ved at lave en menu hvor hver celle er et link.
Det jeg ønsker er at få cellen ved mouseover (hoover) til at markere bund og højre tabelborder med en farve. (som en knap der bliver trykket ind)

Kan dette gøres med css og hvordan?

Synes godt om

roenving Novice

01. juli 2003 - 00:03 #1

onmouseover="this.style.borderBottomColor='#222';this.style.borderRightColor='#222'"

Synes godt om

schaefner Juniormester

01. juli 2003 - 00:06 #2

eller: http://disneyzone.dk/hover.html

Synes godt om

dont Nybegynder

01. juli 2003 - 00:10 #3

Jeg har nu forsøgt følgende:

på websiden i <table>:
<table class="topmenu">

i css-filen:
.topmenu {
onmouseover="this.style.borderBottomColor='#222';this.style.borderRightColor='#222'"
}

Det virker ikke. Har du et forslag ud fra ovenstående til ændring?

Synes godt om

schaefner Juniormester

01. juli 2003 - 00:11 #4

<td onmouseover="this.style.borderBottomColor='#222';this.style.borderRightColor='#222'">tekst</td>

Synes godt om

roenving Novice

01. juli 2003 - 00:13 #5

Det er fordi jeg prøver at ændre style-properties med javascript-events ...

-- jeg skulle lige checke, at man ikke kunne style med :hover på en tabelcelle, men du sætter den direkte i TD-tagget:

<TD onmouseover="this.style.borderBottomColor='#222';this.style.borderRightColor='#222'" onmouseout="this.style.borderBottomColor='#fff';this.style.borderRightColor='#fff'">

Synes godt om

dont Nybegynder

01. juli 2003 - 12:06 #6

Det virker desværre ikke. Der sker ingenting ved hover.

Synes godt om

roenving Novice

01. juli 2003 - 15:58 #7

Det gør der her ?-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Tabel m. hover-borders</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>
<BODY style="width:50%">
<BR>
<TABLE cols="2" style="widht:50%">
<tr>
<TD WIDTH="10%" style="border:1px solid #fff">Ingen skygge </TD>
<TD width="40%" style="border:1px solid #fff" onmouseover="this.style.borderBottomColor='#f00';this.style.borderRightColor='#f00'" onmouseout="this.style.borderBottomColor='#fff';this.style.borderRightColor='#fff'">Her er noget med skygge</td>
</TR>
</TABLE>
</BODY>
</HTML>

Synes godt om

knudgert Nybegynder

01. juli 2003 - 16:00 #8

Man kan nu godt sætte hover på en tabelcelle, det er "kun" IE, der ikke forstår det, både Opera, Mozilla og Netscape 6/7 forstår det.

Og til dont, lad os se en side med det du prøver at lave.

Synes godt om

dont Nybegynder

01. juli 2003 - 16:35 #9

roenving --> det virker.

Kan man gøre det samme med teksten? Sådan at et link fx ændrer farve ikke kun når der er mouseover ved linket, men bare over cellen hvori linket findes?

Lav et svar, så giver jeg nogle point.

Synes godt om

dont Nybegynder

01. juli 2003 - 16:36 #10

med link, mener jeg et tekstlink. altså teksten skal skifte farve når der er mouseover på cellen hvori teksten er.

Synes godt om

roenving Novice

01. juli 2003 - 16:47 #11

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Tabel m. hover-borders</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</HEAD>
<BODY style="width:50%">
<BR>
<TABLE cols="2" style="widht:50%">
<tr>
<TD WIDTH="10%" style="border:1px solid #fff">Ingen skygge </TD>
<TD width="40%" style="border:1px solid #fff" onmouseover="this.style.color='#f00';this.style.borderBottomColor='#f00';this.style.borderRightColor='#f00'" onmouseout="this.style.color='#000';this.style.borderBottomColor='#fff';this.style.borderRightColor='#fff'">Her er noget med skygge</td>
</TR>
</TABLE>
</BODY>
</HTML>

Synes godt om

dont Nybegynder

01. juli 2003 - 16:52 #12

ok, det virker også. Vil du have nogle point opretter du bare et svar.
Tak for hjælpen. :o)

Synes godt om

dont Nybegynder

01. juli 2003 - 16:57 #13

lige en rettelse. Jeg kan ikke få det til at virke når "her er noget med skygge" er et link........og det var jo meningen.

Synes godt om

dont Nybegynder

01. juli 2003 - 17:00 #14

hvordan skal man i øvrigt forstå det at farvekoden kun er tre tegn frem for 6 som normalt?

Synes godt om

roenving Novice

01. juli 2003 - 17:01 #15

-- og så ville jeg finde på at placere det i en script-blok:

<script language="javascript" type="text/javascript">
function skiftFarve(elm, textfarve, kantfarve){
elm.style.color=textfarve;
elm.style.borderBottomColor=kantfarve;
elm.style.borderRightColor=kantfarve;
}
</script>

-- og td'en:

<TD width="40%" style="border:1px solid #fff" onmouseover="skiftFarve(this,'#f00','#f00'" onmouseout="skiftFarve(this,'#000','#fff'">Her er noget med skygge</td>

Synes godt om

roenving Novice

01. juli 2003 - 17:07 #16

css fordobler automatisk farvekoder med 3 tegn ...

Så vil du have mere specifikke koder skal du selvfølgelig bruge dem ,-)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<HTML>
<HEAD>
<TITLE>Tabel m. hover-borders</TITLE>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script language="javascript" type="text/javascript">
function skiftFarve(elm, textfarve, kantfarve, id){
elm.style.color=textfarve;
elm.style.borderBottomColor=kantfarve;
elm.style.borderRightColor=kantfarve;
document.getElementById(id).style.color=textfarve;
}
</script>

</HEAD>
<BODY style="width:50%">
<BR>
<TABLE cols="2" style="widht:50%">
<tr>
<TD WIDTH="10%" style="border:1px solid #fff">Ingen skygge </TD>
<TD width="40%" style="border:1px solid #fff" onmouseover="skiftFarve(this,'#f00','#f00','mitLink')" onmouseout="skiftFarve(this,'#000','#fff','mitLink')"><a id="mitLink" href="#" style="color:inherit">Her er noget med skygge</A></td>
</TR>
</TABLE>
</BODY>
</HTML>

Synes godt om

roenving Novice

01. juli 2003 - 17:09 #17

-- måske nærmere sådan med linket:

<a id="mitLink" href="#" style="text-decoration:none;">

Synes godt om

dont Nybegynder

01. juli 2003 - 17:17 #18

Tak for hjælpen til alle. Jeg fik løst problemet. Det blev en lang smøre til sidst, men nu er det HELT som det skal være. Se nedenfor:

<TD style="CURSOR: hand; FONT-WEIGHT: bold; FONT-SIZE: 15px; COLOR: #B7B7FF; FONT-FAMILY: Verdana; TEXT-DECORATION: none" "border:1px solid #fff" onmouseover="this.style.color='#0000FF';this.style.borderBottomColor='#000';this.style.borderRightColor='#000'" onmouseout="this.style.color='#B7B7FF';this.style.borderBottomColor='#fff';this.style.borderRightColor='#fff'" onclick="location.href='tilmeld.asp'"
valign=center align=center width=100 height=35>menuLink</TD>

Synes godt om

roenving Novice

01. juli 2003 - 17:30 #19

-- og tak for points ;~}

-- dine styles kan forkortes en anelse:

<TD style="cursor: hand; font: bold 15px Verdana; color: #B7B7FF; text-decoration: none; border:1px solid #fff"

-- rettede bare lige til små bogstaver også -- sådan har jeg lært det ,-)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS