Avatar billede Slettet bruger
09. september 2005 - 19:37 Der er 25 kommentarer

Hovereffekt på border via css!

Hvordan laver jeg hovereffekt på en border rundt om et billede - i mit stylesheet?
Avatar billede gil-galad Nybegynder
09. september 2005 - 19:38 #1
som et ganske normalt link med hover, bare med border: 1px;
Avatar billede udvikler Nybegynder
09. september 2005 - 19:40 #2
Prøv med:

border:hover {
    color: #FF0000;
}
Avatar billede gil-galad Nybegynder
09. september 2005 - 19:40 #3
a.billede:active, a.billede:link, a.billede:visited{
    color: red;
    border: 1px;
}
a.billede:hover{
    color: blue;
    border: 1px;
}


<a href="link" class="billede"><img src="noget.jpg"></a>
Avatar billede gil-galad Nybegynder
09. september 2005 - 19:44 #4
undskyld, farven skal jo flettes sammen med borderen:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
a.billede:active, a.billede:link, a.billede:visited{
    border: 1px solid blue;
}
a.billede:hover{
    border: 1px solid red;
}
</style>

</head>

<body bgcolor="#FFFFFF" text="#000000">
<a href="http://www.eksperten.dk/spm/646775" class="billede"><img src="http://www.eksperten.dk/img/elogo.png"></a>
</body>
</html>
Avatar billede gil-galad Nybegynder
09. september 2005 - 19:46 #5
....og hvis du ikke vil have den ekstra blå kant, skal du sætte en border="0px" på img tagget
Avatar billede there-is-only-xul Nybegynder
09. september 2005 - 19:46 #6
øhh, normalt kommer der jo border på billeder inde i links..

img { border: 0px; } plejer at hjælpe gevaldigt :)
Avatar billede Slettet bruger
09. september 2005 - 19:50 #7
Når jeg bruger det forslag gil-galad skriver, kommer der ingen border?
Avatar billede there-is-only-xul Nybegynder
09. september 2005 - 19:52 #8
lol ups, læse forkert.. glem hvad jeg sagde

gil-galad

a.billede er nok, det gælder for alle a-tags så.
Avatar billede xyborx Nybegynder
09. september 2005 - 20:01 #9
En anden mulighed er at bruge
a > img {
    border: 1px solid blue;
}

a:hover > img {
    border: 1px solid red;
}

Hvis du har tænkt dig at laver border effekten på alle billed-links på siden, så vil jeg mene at denne metode er bedre end at kaste rundt med klasser.
Avatar billede saudoo Nybegynder
09. september 2005 - 20:52 #10
Ja og om ikke andet, kan man jo bare definere en klasse, hvor border er 0px; og så sætte den på de resterende billeder.. :I
Avatar billede olebole Juniormester
09. september 2005 - 22:16 #11
<ole>

xyborx >> Det ville da være tumpet at anvende en metode, der ikke kan fortolkes af det store flertal af nettets browsere  :)

/mvh
</bole>
Avatar billede xyborx Nybegynder
09. september 2005 - 22:57 #12
olebole > Det vidste jeg ikke var et problem. Det er da ellers ret simpel css. Er det Internet Explorer der ikke kan klare det? Den har jeg ikke brugt i flere år, så jeg ved ikke så meget om dens begrænsninger. Forsøgte at installere den i går, bare for at teste et website jeg er ved at skrive, men jeg måtte simpelthen give op. Jeg er tydeligvis ikke i Microsofts målgruppe.
Avatar billede saudoo Nybegynder
09. september 2005 - 23:00 #13
xyborx du kunne jo altid bruge Netscape.. :P
Avatar billede olebole Juniormester
09. september 2005 - 23:01 #14
Der er masser CSS2, IE6 ikke forstår. Det er man jo nødt til at vide, hvis man koder til WWW ... ligesom en installation af alle væsentlige browsere er et must  :)
Avatar billede xyborx Nybegynder
09. september 2005 - 23:06 #15
sudoo > Er Netscape ikke baseret på Gecko, som Firefox også bruger? For så kan jeg vel bare nøjes med Firefox. Udover den, så er jeg også begyndt at bruge Opera, som iøvrigt fandt en mindre fejl i mit test design :)

olebole > Jow, det var netop derfor jeg forsøgte at installere IE. Men det er ikke så nemt på Linux, heller ikke gennem Wine. Jeg kan i hvertfald ikke få det til at funke.
Avatar billede jesper-moeller Nybegynder
10. september 2005 - 07:58 #16
Så vil jeg da lige foreslå at man oveholder rækkefølge for linksne... Det virker bedre på den måde ;-)


LoVe HA
=
:link :visited :hover :activ


c",)
.
Avatar billede saudoo Nybegynder
10. september 2005 - 11:18 #17
xyborx.. Jo men fordelen i dit tilfælde, ville være at den måde kan rendere sider med Gecko-engine. Og med den som Internet Explorer kører med.. :)

Det er bare at rulle et faneblad ned, og så vælge at den skal køres med Internet Explorer.

Det hele sker i Netscape.
Avatar billede olebole Juniormester
10. september 2005 - 12:11 #18
saudoo >> Det var der vist ikke mange, der forstod ... prøv lige at omformulere  :)

jesper >> Der er ikke brugt forkert rækkefølge her i tråden. Ved brug af en liste af selektorer:
  a.billede:active, a.billede:link, a.billede:visited { ... osv ... }
- er rækkefølge ligegyldig. Skal der derimod sættes forskellige regler på forskellige selektorer, har du helt ret  ;o)

xyborx >> Det er såmænd ikke fordi, jeg har spor imod Linux - men som udviklingsmaskine til webkodning er den ubrugelig ... ligesom MacOS. Du er nødt til at udvikle under det OS, der er det langt største på WWW og derefter tilpasse koden til de andre. Ellers inviterer du selv et hav af problemer  :)
Avatar billede xyborx Nybegynder
10. september 2005 - 13:16 #19
saudoo > Det lyder nice, men det kræver vel at man installerer den på Windows? Jeg tvivler på at MS hat tilladt nogen at medtage IE's render i et ikke-MS produkt. Eller de har måske bare lavet en efterligning af den?

olebole > Det kan du have ret i, men Windows mangler utroligt mange af de værktøjer jeg bruger til dagligt. Desuden er min gamle Win98SE CD vist gået i stykker, så jeg har heller ikke rigtigt noget at installere det fra, medmindre jeg finder en bunke penge frem igen :/
Avatar billede saudoo Nybegynder
10. september 2005 - 15:31 #20
olebole >> du skriver skam også nogle, til tider, mere eller mindre, kryptiske beskeder.. :P

Den har inkluderet både Firefox og Ie's renderindsmotor. Eller har i hvert fald mulighed for at gøre brug af den renderingsmotor som IE gør brug af.

xyborx >> Netscape 8.0 findes desværre kun til Windows.. :\ Havde ikke lige set du sad med et andet operativt system end XP.. :(
Avatar billede olebole Juniormester
10. september 2005 - 15:41 #21
saudoo >> mange ville nok råde dig til netop ikke at gøre som jeg  ;D

Jeg er stadig ikke med på, hvad det præcist er, du mener om Netscape. Op til og med version 4 serien, brugte NS sin helt egen renerings motor. Version 5 blev aldrig released - og fra version 6 har den haft Gecko-motor og så vidt jeg ved ikke andet  :)

Anyway, så kan IE altid implementeres på en Win-maskine. Under XP ligger 'motoren' her:
  C:\WINDOWS\system32\shdocvw.dll

Den kan frit implementeres i et hvilket somhelst program. Jeg er ikke 100% sikker, men udfra den måde, man skriver extensions på til DreamWeaver, ser det faktisk ud, somom DW hovedsageligt består af en IE  :)

Under alle omstændigheder bør man _altid_ teste i den 'ægte' browser. Ingen af de forsøg på at efterligne div. browsere udenfor deres miljø, jeg har set, fungerer optimalt ... men jeg kan godt se, du ikke sidder i den mest behagelige stol, xyborx. Ikke engang to partitioner hjælper dig uden en installer  :o|
Avatar billede jesper-moeller Nybegynder
10. september 2005 - 15:46 #22
olebole >> Ja lige her har det ikke betydning... men det er en fejl man ofte se foretaget... og derofr jeg gør opmærksom på det....det skader ikke noget at holde rækkefølgen her.... men det vil i andre situationer skade ikke at gøre det... Holder man sig til rækkefølge (også selvom man ikke behøver det) glemmer man det ikke de steder hvor det er vigtigt .... :-) ... Lidt ala at gøre sig det til vane at skrive bla. filnavne med små bogstaver ;-)
Mht. din kommentar vedr webudvikling vil jeg nok stille mig lidt på bagbenene....Jeg tror såmænd nok jeg forstår hvor du vil hen... men måden du skriver det på, er måske ikke den helt rigtige måde at formulere det på (Giver andledning til en del misforståelser)
Avatar billede olebole Juniormester
10. september 2005 - 17:05 #23
Jesper >> Vi er helt enige vedr. rækkefølge og god kodeskik ... lad mig blot supplere med gåseøjne omkring attributter  ;o)

- og selvfølgelig fik jeg aktiveret fjederen mellem dine bagerste kinder med min kommentar om MacOS  *LooL*

Det, jeg mener, er, at man faktisk bør have tre maskiner: Windows, Macos og Linux (Win-maskinen med flere partitioner/OS'er, da man ikke kan have flere IE'er under samme OS - og få dem til at virke ordentligt).
Kan man ikke det, må første-valget være en Windows-maskine - med mindre, at ens projekter først og fremmest er rettet mod bruger-segmenter, man på forhånd ved, bruger Mac eller Linux.

Da jeg i sin tid begyndte på Framfab, var det fordi, chefen for frontend afdelingen og hans 'løjtnant' havde spottet mig her. De havde stor respekt for min kode, så de var ved at tabe den brugte morgenmad i bukserne, da det efter ansættelses samtalen gik op for dem, jeg var fuldblods Macintosse og forlangte en G4 og en BBEdit.
På det tidspunkt var der kun én anden Mac-koder i firmaet. Han sad på et kontor et andet sted i byen - og blev betragtet lidt som 'et interessant zoologisk fænomen'  :)

Et år efter sad alle frontend kodere med en Win- og en MacOS-maskine ... og mange havde skiftet deres private vindåser ud med en Titanium (herunder bossen, selv!).
Det skal så lige siges, at projektlederen hos vores mest prestigefyldte kunde Nike var MacOS/NS4-mand ... så der var rigtig god mening med det på alle fronter  ;o)
Avatar billede jesper-moeller Nybegynder
10. september 2005 - 17:20 #24
Ja vi Macofile er et anderledes mindretal ..(forfulgt og misforstået) .....*GGG* .... Men der er dog blevet nogle flere af os efter OSX... *S*
Mht. OS...så bliver det spændende at se hvad der kommer ud af Apples og IBM samarbejde om en ny prcessor... de siger den vil kunne køre flere styresystemer samtidigt...
Avatar billede olebole Juniormester
10. september 2005 - 18:24 #25
- og indtil den er kommet, lider hele lydbranchen af diarré. Den hidtidige CPU-arkitektur har været som skabt til lyd-behandling, men hvad med den næste?  =8-O
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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