05. februar 2013 - 16:46 Der er 3 kommentarer og
1 løsning

Mouseover tekst på en disabled html button

Jeg har på en website med mikrokredit en side hvor brugerne kan se bevægelserne på deres konti (indbetalinger fra bruger, udlånt fra indbetalingerne, afdrag på lånene, tilbagebetalt til bruger o.s.v.) og kan se deres tilgodehavende hvis der er noget.  Der er også et antal knapper, hvorved brugerne kan starte nogle handlinger, såsom en knap til at kræve ens tilgovehavende tilbagebetalt.  Denne knap er kun synlig for brugere der har et tilgodehavende at kræve tilbage.

Nu ønskes det at knappen til at kræve tilbagebetaling altid skal være synlig, men 'disabled' for de der ikke har et tilgodehavende.  Ingen problem. jeg har kodet således:

<?php if($credits)
{ ?>
<input type="submit" ........./>
<?php
}
else
{ ?>
<input type="submit" disabled ..../>

Men der ønskes videre, at når knappen er disabled skal der ved mouse over komme en forklaring. Og der kniber det.  Jeg har prøvet med ...disabled alt="forklaring.."... og  ...disabled onmouseover=alert("forklaring..") .  Google har ikke givet mig nogen løsning til en mlouseover/alt tekst til knappen.  Hvordan skal jeg gøre?
Avatar billede olebole Juniormester
05. februar 2013 - 18:53 #1
<ole>

alt attributten er beregnet til at udskrive en alternativ tekst i det tilfælde, at billedet ikke kan vises - og den er kun valid på billeder. At tidligere IE'er ikke overholdt denne del af standarden, er enm anden ting.

title attributten implementerer derimod et tooltip på alle renderbare elementer.

At mouseover event'en ikke fyres af på et disabled element, bør ikke overraske nogen. Det er jo netop dét, der ligger i 'disabled' - nemlig at ingen sædvanlige events fyres af på brugerhandlinger  =)

At Opera så faktisk fyrer mouseover event'en af, må anses som en klar browserfejl.

Det eneste, du kan bruge på et disabled element er title attributten. Ellers må du konstruere din egen 'disabled' feature

/mvh
</bole>
05. februar 2013 - 20:59 #2
title attributen virker, tak.  Koden er nu:

<input disabled type="submit" title="The button is enabled with credits above 100 kr." id="reclaim" .....

Jeg skal nok lade være med at bede dig oprette et svar.

Men ..... tooltip funktionen virker sporadisk.  Når jeg fører musen hen over knappen vises somme tider teksten "The button is enabled..." men somme tider (de fleste gange) ikke.  Det er nok et helt andet problem som jeg skal oprette et nyt spørgsmål om, med mindre nogen kan hjælpe her.
Avatar billede olebole Juniormester
05. februar 2013 - 21:31 #3
Ja, den virker halvskidt under Windows - og specielt i IE. Du kan evt. bruge denne løsning, som fungerer fra og med IE8 (og længere tilbage i andre browsere):

<style type="text/css">
body {
    margin: 0;
    padding: 0;
    font: 12px "Segoe UI", Tahoma, sans-serif;
}
button + label {
    font-size: 10px;
    display: none;
    color: #c00;
}
button[disabled] + label {
    display: block;
}
</style>

<button disabled>Send</button>
<label>Enabled with credits above 100 kr.</label>

Vil du have knap og label på én linje, sætter du display til 'inline' i stedet for 'block'
05. februar 2013 - 22:06 #4
Tak for hjælpen.  Jeg lukker.
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



IT-JOB