Ergebnis 1 bis 7 von 7

Thema: Bild ändern bei onMouseOver und onKlick

  1. #1
    Teeny
    Registriert seit
    10.08.2011
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Frage Bild ändern bei onMouseOver und onKlick

    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:
    Normalzustand
    onMouseOver
    onKlick


    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 )

    Vielen Dank schon mal
    the_zoker_09
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Bild ändern bei onMouseOver und onKlick

    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
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  3. #3
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bild ändern bei onMouseOver und onKlick

    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

  4. #4
    Teeny
    Themenstarter

    Registriert seit
    10.08.2011
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bild ändern bei onMouseOver und onKlick

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

    HTML-Code:
    <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

  5. #5
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Bild ändern bei onMouseOver und onKlick

    wie gehabt, alles in einer bildatei erspart dir häßliches flackern oder preloading
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  6. #6
    Teeny
    Themenstarter

    Registriert seit
    10.08.2011
    Beiträge
    42
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Bild ändern bei onMouseOver und onKlick

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

    Danke

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard AW: Bild ändern bei onMouseOver und onKlick

    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.
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

Ähnliche Themen

  1. bei onmouseover Bild vergrößern
    Von OliverN26 im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 02.03.2009, 18:03
  2. onMouseOver Style ändern
    Von RoX²³ im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 20.05.2008, 11:20
  3. Java-Bild tauschen bei onmouseover und bei onclick so lassen
    Von Rene1974 im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 19.03.2007, 13:13
  4. Java Sript Link mit onklick
    Von Morrers im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 4
    Letzter Beitrag: 13.03.2007, 19:24
  5. Ändern des Bild-Typ´s
    Von milos im Forum Forum für Grafiken und Bildbearbeitung
    Antworten: 2
    Letzter Beitrag: 18.07.2003, 22:07

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •