Nysjerrig på en ting

8. april 2008

La oss se på denne linken her: http://www.aftenposten.no/nyheter/siste100/
Som dere ser, når man ruller over nyhetene blir farven gråaktig og hele tabellen er igrunnen en link. Hvordan gjøres dette i htm/html ? Takker for all svar

nso

popålol

Administrator

6.158 5.589

8. april 2008

Det gjøres i Javascript

Donquijote

Trådstarter

565 41

8. april 2008

Sitat av nso

Det gjøres i Javascript

Vis hele sitatet...

Umulig v.h.a html/htm/xhtml ?

TanteSpiker

1.923 229

8. april 2008

Du kan gjøre det i css med :hover.
F.eks.

Kode

div:hover
{
background-color:#001337;
}

Edit: Det heter ikke htm, det heter html.

Sist endret av TanteSpiker; 8. april 2008 kl. 20:27.

Pjukern

Sikkerhetsklarert

2.471 332

8. april 2008

Sitat av byp4ss

Du kan gjøre det i css med :hover.
F.eks.

Kode

div:hover
{
background-color:#001337;
}

Edit: Det heter ikke htm, det heter html.

Vis hele sitatet...

Men det lar deg ikke bruke hele div`n som en link.

bobbo

2.379 722

8. april 2008

Virker for meg som at fargen er html (eller CSS da), men linkingen er javascript. Hvis noen er uenige er ScriptBlocken min klar til å krangle

Moff

Limited edition

1.201 950

8. april 2008

Dette kan gjøres på flere måter. En kul måte å løse det på er å bruke Javascripts onMouseOver-event. Denne trigges når man beveger musen over et område. Den motsatte eventen heter onMouseOut og trigges når musen trekkes ut av et område. Et eksempel:

Kode

<div id="kornsirkel" onmouseover="document.getElementById('kornsirkel').style.background='#cccccc'">
Bever!
</div>

Denne koden vil lage en DIV med teksten Bever! i. Når du peker på den vil bakgrunnen bli grå. For å lage en link ut av dette kan du bruke enda en Javascript event - onMouseClick.

Du kan lese masse om disse på http://www.tizag.com under "Javascript tutorial".

Donquijote

Trådstarter

565 41

8. april 2008

Sitat av byp4ss

Du kan gjøre det i css med :hover.
F.eks.

Kode

div:hover
{
background-color:#001337;
}

Edit: Det heter ikke htm, det heter html.

Vis hele sitatet...

Joda, du kan lett lagre filen som .htm og få nøyaktig samme nettside

Sitat av Moff

Kode

<div id="kornsirkel" onmouseover="document.getElementById('kornsirkel').style.background='#cccccc'">
Bever!
</div>

Vis hele sitatet...

Men div er jo ganske problematisk ? Altså uansett hva som skjer så vil diven holde seg på et bestemt plass. Tar jeg helt feil nå ? Jeg testet koden din, men desverre fungerer den ikke hos meg

Oj, tusen takk for linken, veldig bra! KP

Sist endret av ...|...; 8. april 2008 kl. 21:26.

z0p

uʍop ǝpısdn

3.814 906

8. april 2008

Sitat av Pjukern

Men det lar deg ikke bruke hele div`n som en link.

Vis hele sitatet...

Ihvertfall i internet explorer fungerer det å sette

<a href="#">
<div>
contencontentcontent
</div>
</a>

Men dette er jo ingen god løsning, og som mange foreslår her i tråden vil jeg påstå at det er korrekt å bruke script til å tilføre denne slags effekter selv om det kan være gjennomførbart med kun HTML/CSS.

Donquijote

Trådstarter

565 41

8. april 2008

Sitat av z0p

Vis hele sitatet...

CSS er en fin ting å bruke ja!

Fefas

115 2

8. april 2008

Sitat av ...|...

Joda, du kan lett lagre filen som .htm og få nøyaktig samme nettside

Vis hele sitatet...

.htm er en filendelse, HTML er formatet.

z0p

uʍop ǝpısdn

3.814 906

8. april 2008

Sitat av ...|...

CSS er en fin ting å bruke ja!

Vis hele sitatet...

Nå tenkte jeg på selve markupen, og svarte til Pjukern. At man kan bruke pseudo-elementet hover var jo nevnt lengre oppe i tråden.

Dessuten var vel poenget mitt om det er korrekt å bruke CSS til dette, noe jeg mener det ikke er. Jeg mener at man skal bruke script til slike effekter selv om det er mulig å gjøre det med CSS.

alpha01

10 0

9. april 2008

Kode

<!doctype html public "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
	<head>
		<title>All work and no play makes Jack a dull boy</title>
		<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=iso-8859-1">
		<style rel="Stylesheet" type="text/css" media="screen">
			#someoneTouchedMe:hover {
				background-color: RED;
			}
		</style>
	</head>
<body>

<div id="someoneTouchedMe">
	All work and no play makes Jack a dull boy
</div>

</body>
</html>

Dette bør fungere fint så kan man bare legg til annen ønsket formatering i #someoneTouchedMe.. dog .. får ikke sjekka dette da jeg sitter med en browser med minimal css støtte..

Ozma

55535 HP

3.680 1.125

9. april 2008

Jeg bruker å sette a#id { display:block; } for å få en a med samme egenskaper som en div.

masac

117 13

9. april 2008

Sitat av The Freak

Jeg bruker å sette a#id { display:block; } for å få en a med samme egenskaper som en div.

Vis hele sitatet...

Det er også hva jeg bruker å gjøre, og det er etter min mening en bedre løsning.

z0p

uʍop ǝpısdn

3.814 906

9. april 2008

Det stemmer, og det er også mer korrekt bruk av markup.

TanteSpiker

1.923 229

9. april 2008

Sitat av Pjukern

Men det lar deg ikke bruke hele div`n som en link.

Vis hele sitatet...

Ops, det klarte jeg visst å glemme.

Sitat av The Freak

Jeg bruker å sette a#id { display:block; } for å få en a med samme egenskaper som en div.

Vis hele sitatet...

Jepp, men hvordan får han med bilder da?

Ozma

55535 HP

3.680 1.125

9. april 2008

Det virker jo rett frem dette her. Putt tekst og bilde inni <a>, som har display:block;

Moff

Limited edition

1.201 950

9. april 2008

Sitat av alpha01

#someoneTouchedMe:hover

Vis hele sitatet...

Skyt meg hvis jeg tar feil, men jeg tror Internet Explorer 6-helvete ikke klarer å takle denne hover-formen. Den leser bare hover på anker, altså a:hover. Du kan utnytte dette til å lage akkurat like kule funksjoner som er kompatibel med alle browsere.

Altså - The Freak har helt rett.

fuzzy76

webdings

2.482 589

9. april 2008

Du kan bruke hele containeren til en link hvis du:

- Setter position:relative på containeren
- Har en dummy a-tag inni containeren som har :hover bakgrunn, display:block, position:absolute og strekkes ut til containerens dimensjoner. Kanskje må du også justere z-order.

Det skal funke fint uten Javascript i alle nyere nettlesere.

Donquijote

Trådstarter

565 41

10. april 2008

Sitat av masac

Det er også hva jeg bruker å gjøre, og det er etter min mening en bedre løsning.

Vis hele sitatet...

Gir det samme effekt som nettsiden jeg refererte til ?
Dette må prøves

▼ ... over en uke senere ... ▼

atomet

Reklamehore

6.439 2.363

21. april 2008

slå opp css sprites på alistapart, så finner du en fin løsning godt forklart