Mouse-over effekt på buttons

Der skal du nok have fat i et script der kan håndterer dine billedskift og så kalde dem med <input type=\"button\" onMouseOver=\"ditScript();\" ...>

Hvis du alligvel bruger et billede hvorfor så en knap? Det bliver noget rod. Billedet submitter nemlig formen alligevel.

<img src=\"ill/knap-6487DC.gif\" onMouseOver=\"this.src=\'ill/Min_anden_knap..gif\'\" onMouseOut=\"this.src=\'ill/knap-6487DC.gif\'>

Der mangler lige en \" til sidst lige før >

<img src=\"images/material.gif\" name=\"material\" border=\"0\" alt=\"Materialer\" width=\"180\" height=\"34\" onMouseOver=\"document.material.src=\'images/materiag.gif\';\" OnMouseOut=\"document.material.src=\'images/material.gif\';\">

Jed ved du kan gøre sådan med et billede, men med en input knap, tjaa.... Måske kan du gøre noget med at lave en document.write (JavaScript) af den og så istedet for at ændre billedet ligesom jeg gør kan du skrive to forskellige input knapper.

function chgBackground(obj)
{
    obj.style.backgroundImage = \'url(det_andet_billede)\';
}

<input type=\"button\" value=\"Submit\" onmouseover=\"chgBackground(this)\" style=\"width: 162px; height : 24px; border: 0px; background-image: url(btnOnMouseOver1.gif);\">

<ole>

<button type=\"submit\" style=\"width:162px;height:24px;border:0px;\"><img src=\"din.gif\" onmouseover=\"this.src=\'ny.gif\'\" onmouseout=\"this.src=\'din.gif\'\"></button>

...den type knap er beregnet til det  ;o)
/mvh
</bole>

Denne kode blev lige fremstillet af min superkollega:

<script>
function setBackgroundImage (strId, imageURL) {
    id = strId + \"a\";
    document.getElementById(id).style.backgroundImage = imageURL ==  \'none\' ? \'none\' : \'url(\' + imageURL + \')\';
    id = strId + \"b\";
    document.getElementById(id).style.backgroundImage = imageURL ==  \'none\' ? \'none\' : \'url(\' + imageURL + \')\';
    id = strId + \"c\";
    document.getElementById(id).style.backgroundImage = imageURL ==  \'none\' ? \'none\' : \'url(\' + imageURL + \')\';
}
</script>

<table cellpadding=0 cellspacing=0 border=0 class=\"IE4XPButton\" onClick=\"alert(\'fgfgf\');\" onMouseOver=\"java script:setBackgroundImage (\'Cell\', \'ill/knap-003399-over.gif\');\" onMouseOut=\"java script:setBackgroundImage (\'Cell\', \'ill/knap-003399.gif\');\">
    <tr>
        <td height=\"24\" background=\"ill/knap-003399.gif\" id=\"Cella\">&nbsp;&nbsp;&nbsp;&nbsp;</td>
        <td height=\"24\" background=\"ill/knap-003399.gif\" id=\"Cellb\" align=center>Superknappen</td>
        <td height=\"24\" background=\"ill/knap-003399.gif\" id=\"Cellc\">&nbsp;</td>
    </tr>
</table>

<style>
.IE4XPButton { CURSOR : HAND;
            }

</style>

og ?

Jeg har tonsvis af koder, der heller ikke har en squid med dit spørgsmål at gøre - foruden alle dem, der ligger i Ekspertens database. Vil du også have dem?
Hvis du ikke ønsker korrekte svar på dine spørgsmål, skal du ikke stille dem. Du ender blot med ikke at få svar på dine fremtidige spørgsmål.

nemlig...

...så er det oven i købet elendig slamkode! Forkert syntaks med begrænset succesrate. Forstås kun af browsere, der ikke overholder standarderne! \"Superkollega\" ...HA!  :oD
Køb en begynderbog til ham  :)

olebole >> det er ret smart det du kom op med der: <button type=\"submit\"><image></button>

men kender du:

<input type=\"image\">

den gør vist det samme - altså submit\'er når der trykkes [enter] i formen

Ja, men <button> har en meget flottere rendering. Se f.eks, hvad der sker med billedet i knappen, når du trykker på den  ;o)
Desuden har type=\"image\" en lidt besynderlig semantik. Er ikke glad for onclick-events, f.eks.
/mvh

Hej OleBole og i andre
Jeg er ikke superkoder. Jeg gav nikolajdu point, fordi han kom først. Der er da ingen grund til at tage sådan på vej. Måske har jeg ikke formuleret mit spørgsmål korrekt: Jeg skal have en mouseover effekt på knapper. Knapperne skal kunne skalleres i længden, så hvis der står en lang value skal knappen givce sig. Det havde jeg ikke lige tænkt på - derfor duer et baggrundsbillede ikke ikke, idet knappen skal have \"hjørner\". Hvis nogen af jeg har et bedre forslag, så sig endelig til. Jeg skal nok give point. Måske er det slamkoder. I mine øjne løste det problemet.

mvh Fusentasten

Nejnej, ikke nikolajdus kode ...den er såmænd fin nok - det er din \'superkollegas\' til gengæld absolut ikke!
Jeg tror ikke, der er ret mange, der forstår, hvad du vil have - gør du selv?

ja, men jeg skriver det gerne igen:
En knap skal have MouseOver effekt. Den skal være skallerbar i længden. Knappen er designet således, at den udseende ikke kan \"løses\" ved at indsætte et baggrundsbillede, idet den har runde hjørner og en lille skygge. Det kan ikke lade sig gøre med et baggrundsbillede alene. Vel? Ok. Jeg spurgte min kollega, og han kom med det forslag. Om det er superkode eller ej, kan jeg sgu ikke se forskel på. Det virkede i min browser. Men igen, hvis du kan komme med et smart forslag, så er du velkommen.

olebole >> mht rendering har du ret, men hvad er der \"galt\" med onClick events ?

på type=\"image\"...? Puuuhhhhh ....jeg kan zq dårligt huske det, men der er noget med, den ikke fyrer onclick af i alle tilfælde. Bruger den aldrig selv - efter jeg engang havde frygtelig bøvl med den og fandt ud af (bl.a. ved hjælp fra Erik Jacobsen), at den input-type skodder vildt  ;o)