---

Hej folks

Jeg plejer at fjerne rammer om mine linkende billeder med style:
a img {
border: none;
}

Nu har jeg mødt en ny udfordring, nemlig at lave noget tilsvarende ved
et billede som bruger area og map til at definere to linkende felter.
Jeg kan selvfølgelig definere billedet borderfrit ved hjælp af et id,
eller style det inline, men det provokerer mig egentlig ikke at kunne
finde ud af den rigtige selector til at lave noget der svarer til
ovenstående.

Jeg har prøvet
area img {
border: none;
}

uden held. Jeg ønsker ikke at bruge img { border: none; }, det vil give
problemer andre steder.

Jeg har lavet en demo her: <http://www.henrikpontoppidan.dk/test.html>.

Udarbejdelsen giver et par afledte kommentarer:

*Til XHTML*
Det er meningen at man skal bruge id _i stedet for_ name, principielt
set er name deprecated (så vidt jeg kan forstå,
<http://www.w3.org/TR/xhtml1/#h-4.10>), men da linkene ikke virker uden
name, kører jeg foreløbig med.

*Til validering*
W3C validatoren giver fejl hvis man ikke har id på et <map>, det gør
"HTML Validator" plugin'et til Firefox ikke!

Det samme gør sig gældende med lukning af area-tags.

Endelig har jeg for nylig læst en artikel hvor man var meget negativ
over at webdesignere fjerner border på billeder med link. Det gjorde det
umuligt at være bruger, og se hvor der er links, var holdningen.

Jeg kan godt se pointen. Omvendt er vi vant til at billeder kan linke
uden at det i øvrigt er tydeligt markeret at de gør det, og endelig så
er det så ærkegrimt med link-borders, så det ikke er et alternativ at
bruge dem.

Men det ville da være rart, hvis man kunne gøre det pænt. Er der nogen
der har eksempler på en rimelig pæn indikation af at billeder er link?

mvh

Jesper Brunholm

---

Jesper Brunholm skrev:

> Nu har jeg mødt en ny udfordring, nemlig at lave noget tilsvarende ved
> et billede som bruger area og map til at definere to linkende felter.
> Jeg kan selvfølgelig definere billedet borderfrit ved hjælp af et id,
> eller style det inline, men det provokerer mig egentlig ikke at kunne
> finde ud af den rigtige selector til at lave noget der svarer til
> ovenstående.

(Jeg har ingen erfaring med are)

Det er a der laver kanten. Prøv med (utestet):

   area a { border: none; }

> Det er meningen at man skal bruge id _i stedet for_ name, principielt
> set er name deprecated (så vidt jeg kan forstå,
> <http://www.w3.org/TR/xhtml1/#h-4.10>), men da linkene ikke virker uden
> name, kører jeg foreløbig med.

Det forstår jeg ikke. Din demo virker med id i både Opera 9 og
IE 6.

> Endelig har jeg for nylig læst en artikel hvor man var meget negativ
> over at webdesignere fjerner border på billeder med link.

Jeg gør det konsekvent, og jeg kan ikke mindes at have set en
side hvor der var linkborder på et billede.

> Det gjorde det umuligt at være bruger, og se hvor der er links,
> var holdningen.

Små billeder er links pr. definition, og et hurtigt tjek med
musen kan afsløre om det mod forventning ikke skulle være
tilfældet.

> Men det ville da være rart, hvis man kunne gøre det pænt. Er der nogen
> der har eksempler på en rimelig pæn indikation af at billeder er link?

Det eneste problem jeg kan se ved din demo, er at man ikke
umiddelbart kan regne ud at de to sider linker til hver sit
billede.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Bertel Lund Hansen skrev:
>    area a { border: none; }

Det er desværre uden effekt, nok fordi Jens har ret i at
selector-elementerne er nødt til at være der, hvad de ikke er her.

Det er i øvrigt uden effekt på forskellige måder, Opera (9.01 her) viser
nemlig slet ikke ramme om linkende billeder, uanset om jeg gør noget for
at undgå dette med style, eller ej.

>> Det er meningen at man skal bruge id _i stedet for_ name, principielt
>> set er name deprecated (så vidt jeg kan forstå,
>> <http://www.w3.org/TR/xhtml1/#h-4.10>), men da linkene ikke virker uden
>> name, kører jeg foreløbig med.
>
> Det forstår jeg ikke. Din demo virker med id i både Opera 9 og
> IE 6.

Ja, den virker overalt når der både er id og name. For en gangs skyld er
det Firefox der er bagud, både IE og Opera linker fint uden name, altså
med id alene, FF gør intet.
Testen er udbygget til at teste dette idet der er kommet et <map> mere,
uden name.

>> Endelig har jeg for nylig læst en artikel hvor man var meget negativ
>> over at webdesignere fjerner border på billeder med link.
>
> Jeg gør det konsekvent, og jeg kan ikke mindes at have set en
> side hvor der var linkborder på et billede.

Det samme her, men det er jo sandt, at man skal føre musen over for at
finde ud af om der er link på, en uhørt lav standard for sådan nogle som
os

> Det eneste problem jeg kan se ved din demo, er at man ikke
> umiddelbart kan regne ud at de to sider linker til hver sit
> billede.

Jeg har prøvet at sætte title på mine areas på det nederste sæt, dette
dog tilsyneladende uden nogen effekt i FF og IE, men hjælper det en
smule på sagen i Opera?

På den side som jeg aftester løsningen til,
<http://www.henrikpontoppidan.dk/text/andre_forfattere/pontoppidan_inger/1886_12_10.html>,
har vi sat en lille forklarende tekst på, men jeg er ikke _helt_ sikker
på at den faktisk gør så meget gavn som vi ønsker, for at informere om
at man kan klikke på forskellige halvdele af billedet for at få
forskellige resultater.

Vores ræsonnement har dog været at man under alle omstændigheder kan
bruge tekstlinket til at nå den side som man ikke måtte finde med
billedlinket.

mvh og foreløbig tak

Jesper Brunholm

---

Jesper Brunholm skrev:

> På den side som jeg aftester løsningen til,
> <http://www.henrikpontoppidan.dk/text/andre_forfattere/pontoppidan_inger/1886_12_10.html>,
> har vi sat en lille forklarende tekst på, men jeg er ikke _helt_ sikker
> på at den faktisk gør så meget gavn som vi ønsker

Lad teksten være i en wrapperdiv som også omslutter map'et (skal
sikre samme bredde), lad den bestå af to elementer, "side 4" og
"side 1" og float dem henholdsvis til venstre og højre. Så tror
jeg at den fiser ind med det sammme. Resten af forklaringen kan
vist bedst undværes.

> Vores ræsonnement har dog været at man under alle omstændigheder kan
> bruge tekstlinket til at nå den side som man ikke måtte finde med
> billedlinket.

Enig. Det er ikke så vigtigt om man regner ud hvad billedet kan
bruges til, men det er en fin mulighed for dem der klikker der
som en naturlig ting.

--
Bertel
http://bertel.lundhansen.dk/      http://fiduso.dk/

---

Jesper Brunholm skrev:

> Jeg har prøvet
> area img {
> border: none;
> }

Img ligger ikke inde i area - så det er ikke overraskende at den
ikke virker.

Det er svært at fange billedlinks med area, da selve billedet jo
bare ligger "for sig selv" - hverken omkranset af et link-element
eller med noget "inde i". Man kan dog benytte parameteren usemap i
en selektor:

img[usemap] {
   border: none;
}

- det vil fange alle billeder med parameteren usemap sat (og dermed
netop dine area/map-links). Som med mange andre avancerede
selektorer virker det ikke i IE6, så i praksis er der ingen vej
uden om en klasse eller id-tildeling.
--
Jens Gyldenkærne Clausen
Svar venligst under det du citerer, og citer kun det der er
nødvendigt for at forstå dit svar i sammenhængen. Se hvorfor og
hvordan på http://usenet.dk/netikette/citatteknik.html

---

Jens Gyldenkærne Clausen skrev:
>> Jeg har prøvet
>> area img {
>> border: none;
>> }
>
> Img ligger ikke inde i area - så det er ikke overraskende at den
> ikke virker.

Nej, så langt tænkte jeg også, men kunne omvendt ikke komme på et bedre
forslag...

> Det er svært at fange billedlinks med area, da selve billedet jo
> bare ligger "for sig selv" - hverken omkranset af et link-element
> eller med noget "inde i". Man kan dog benytte parameteren usemap i
> en selektor:
>
> img[usemap] {
>    border: none;
> }
>
> - det vil fange alle billeder med parameteren usemap sat (og dermed
> netop dine area/map-links). Som med mange andre avancerede
> selektorer virker det ikke i IE6, så i praksis er der ingen vej
> uden om en klasse eller id-tildeling.

Det bliver til en class, og din udmærkede selektor, så class'en
forhåbentlig kan tages ud af brug når næste generation MSIE bliver stor
nok i bruger-mængde (man har da lov at håbe at de fikser dette).

mvh og tak

Jesper Brunholm

---

Jesper Brunholm wrote:

> *Til XHTML*
> Det er meningen at man skal bruge id _i stedet for_ name, principielt
> set er name deprecated (så vidt jeg kan forstå,
> <http://www.w3.org/TR/xhtml1/#h-4.10>),

Det er da rigtigt, at name i så mange andre sammenhæng er deprecated. Men
lige her der det såmænd valid xhtml strict at bruge name. Ma skal bare huske
også at have id med:

http://hjemmesideskolen.dk/html/hotspot.asp

--
Med venlig hilsen
Erik Ginnerskov
http://hjemmesideskolen.dk/ - http://ginnerskov.dk/
http://html-faq.dk