Bild ändern bei onMouseOver und onKlick

the_zoker_09

Hallo zusammen,
Ich habe für meine Seite einen Butten erstellt.

Jetzt soll sich 1. bei "onMouseOver" und 2. bei "onKlick" das Bild ändern.

Also 3 Situationen:
[TABLE='class: grid']

[tr][td]

Normalzustand

[/td][td]

[Blockierte Grafik: http://s7.directupload.net/images/110810/zz6ozzho.png]

[/td][/tr][tr][td]

onMouseOver

[/td][td]

[Blockierte Grafik: http://s1.directupload.net/images/110810/jjx8dag5.png]

[/td][/tr][tr][td]

onKlick

[/td][td]

[Blockierte Grafik: http://s1.directupload.net/images/110810/qikifjwv.png]

[/td][/tr]

[/TABLE]

Wie mach ich das am besten?
Hab mich uach schon ein bisschen umgeschaut, aber noch nichts richtiges gefunden.
Bei Self HTML z.B. wird nie beschrieben, wie man ein Bild durch eine Aktion ändert. (oder ich habe es einfach nicht gefunden [Blockierte Grafik: http://www.html.de/images/smilies/icon_sad.gif] )

Vielen Dank schon mal
the_zoker_09

synaptic

also 3 möglichkeiten:

1 sprite erstellen (alle bilder in einem) und dann via css die zustände durch verschieben des hintergrundbildes auf a, a:hover, a:active
2 wie variante 1 nur dass man in den zuständen bilder definiert, hat aber nen häßliches "flackern" weil dann die bilder erst nachgeladen werden, sobald man se braucht
3 mit javascript die bilder tauschen (was eigentlich sinnfrei is, da man das viel ressourcenschonender mit version 1 hinbekommt

also definierst du eine klasse für deinen link
gibst der
display:block;
width: bildbreite; //also bildhöhe und breite so wie ein zustand, nich wie das bild mit allen drei zuständen
height: bildhöhe;
background-image: url(pfadzumbild/bild.jpg);
background-repeat: no-repeat;
background-position:0 0; //kann variieren wenn du nich sauber ausschnibbelst)

klasse:hover und klasse:active bekommen dann ne background-position bei der das bild so verschoben wird, dass es nen anderen gewollten zustand zeigt

sejuma

Siehr mal hier die Ziffer 2 an: http://www.ohne-css.gehts-gar.net/0022.php
Und falls du mit "onklick" den Zusatand meinst, während die Seite geööffnet ist: http://www.ohne-css.gehts-gar.net/0016.php

the_zoker_09

Danke für die Antworten.
Ich habe es jetzt so gemacht:

HTML

<head>
<style type="text/css">
    a.link {
        display:block;
        width:264px;
        height:64px;
        border:1px solid #000000;
        background-image:url(../button1.png);
    }


    a.link:hover {
        background-image:url(../button2.png);
    }
</style>
</head>


<body>
        <a class="link" href="http://beispiel.de"> </a>
</body

Alles anzeigen

synaptic

wie gehabt, alles in einer bildatei erspart dir häßliches flackern oder preloading

the_zoker_09

Kannst du mir das mal mit meinen Bilder zeigen wie ich das machen soll?
Hab das noch nicht ganz verstanden

Danke

synaptic

na du nimmst ein pixelprogramm, machst nen bild was die breite deines buttons hat und die höhe von deiner bildhöhe * anzahl der zustände die du darstellen willst (es empfiehlt sich auch immer etwas platz von 4 bis 5 pixel zwischen den zuständen zu lassen) und so hast du ein bild, wo alle buttonzustände drin sind.
das bindest du ein und verschiebst die background-position. das hatte ich ja oben erklärt.

Bild ändern bei onMouseOver und onKlick

Tags

Benutzer online in diesem Thema