Ingrid [8000] wrote:
>
>
> Nej det gør det ikke ! Jeg spørger jo ikke bare for sjovt her. Vi udvikler
> en specialside til folk der ikke har ret meget syn tilbage. De bruger
> Zoomtext men programmet viser ikke tydeligt nok hvor focussen er på en side.
> Så det er et problem der skal løses.
>
> Men der er vel ikke andet at gøre end at bruge javascript til det i stedet
> for.
>
I så fald bliver du nok nød til at bruge javascript.
Du kan ved eventen onfocus og onblur på chekc-/radio-box finde dens
label og give eller fjerne en class, som fremhæver labelen.
Prøv med følgende HTML-kode:
<div>
<input type="radio" name="radKoen" id="radKoen_mand" value="mand"/>
<label for="radKoen_mand">Mand</label>
</div>
<div>
<input type="radio" name="radKoen" id="radKoen_kvinde" value="kvinde"/>
<label for="radKoen_kvinde">Kvinde</label>
</div>
Du kan enten sætte eventsne inline i HTML-koden eller du kan loop formen
igennem og sætte dem dynamisk.
Her er et eksempel med inline:
<input ... onfocus="markLabel(this)" onblur="unmarkLabel(this)" />
Nedenståede funktion bruges til onfocus og onblur (Kan evt. samles til
en funktion)
function markLabel(what) {
var oField = what;
var oLabel = getLabelForId(oField.id);
if (oLabel) {
addClass(oLabel, "highlightLabel");
}
}
function unmarkLabel(what) {
var oField = what;
var oLabel = getLabelForId(oField.id);
if (oLabel) {
removeClass(oLabel, "highlightLabel");
}
}
Du skal bruge følgende funktion til at finde en label udfra et id.
function getLabelForId(id) {
var label, labels = document.getElementsByTagName('label');
for (var i = 0; (label = labels[i]); i++) {
if (label.htmlFor == id) {
return label;
}
}
return false;
}
Og følgende funktioner til at tilføje og fjerne en class fra et element.
function addClass (el, className) {
if (el.className==null)
el.className='';
el.className+=(el.className.length>0?' ':'')+className;
}
function removeClass (el, className) {
var cs, j, remainClass;
remainClass = new Array();
cs = el.className.split(" ");
for (j = 0; j < cs.length; j++) {
if (cs[j] != className) {
remainClass.push(cs[j]);
}
}
el.className = remainClass.join(" ");
}
I dit stylesheet skal du så blot style class'en "highlightLabel".
..highlightLabel {
background:yellow;
/* o.s.v. */
}
Håber at du kan bruge det. Jeg har dog ikke testet det, da det blot er
klippet klistret fra noget andet kode.
--
Martin Hintzmann Andersen
http://www.hintzmann.dk/