Sidr
PSD-Tutorials.de

Bild wechseln bei MouseOver

Dieses Thema im Forum "(X)HTML & CSS" wurde erstellt von MelanieCibura, 01.05.2011.

  1. MelanieCibura
    Offline

    MelanieCibura Ganz neu hier

    Dabei seit:
    18.09.2010
    Beiträge:
    30
    Geschlecht:
    weiblich
    Software:
    Photoshop CS5, Espresso
    Bild wechseln bei MouseOver
    Hallo,

    ich bin immernoch an meiner Seite dran und habe mal wieder ein Problem.

    Ich habe auf meiner Seite ein Bild und möchte, dass wenn man mit dem Maus-Cursor darübergeht ein anderes Bild erscheint. Wenn ich das Bild in ein <a>-Tag stecke verändert sich ja logischerweise der Cursor, wenn ich über das Bild gehe. Hab es aber schon gesehen, dass es auch anders geht, z.B. mit Javascript. Leider kenne ich mich mit Javascript überhaupt nicht aus. Kann mir da einer erklären wie das geht? Wäre echt super!

    Hier das Beispiel: HIER

    Vielen Dank!

    Gruß, Melanie
    #1      
  2. TheTalesOfImmo
    Offline

    TheTalesOfImmo Medieninformatiker

    Dabei seit:
    20.01.2008
    Beiträge:
    47
    Geschlecht:
    männlich
    Software:
    Adobe CC, Netbeans, Gehirn
    Kameratyp:
    Canon EOS 450D
    Bild wechseln bei MouseOver
    AW: Bild wechseln bei MouseOver

    Hi!

    Das ist relativ simpel, ich habe etwas ähnliches erst vor kurzem gemacht.
    In HTML gibt es für JavaScript sogenannte Eventhandler, die auf bestimmte Ereignisse reagieren. In Deinem Fall wäre das der Handler "onmouseover".

    Der HTML-Code dafür könnte z.B. so aussehen:

    HTML:
    <div style="width:200px;height:100px;background:url('irgendwas.jpg') no-repeat;" id="irgendwas" alt="Irgendwas" onmouseover="this.style.backgroundImage = 'url(irgendwasanderes.jpg)'" onmouseout="this.style.backgroundImage = 'url(irgendwas.jpg)'" />
    Ich erstelle einen div-Container und gebe ihm einen Hintergrund. Immer wenn Du mit der Maus darüber hoverst ändert sich der Hintergrund (onmouseover). Damit er sich auch wieder zurückändert, muss der Code allerdings noch den Handler "onmouseout" umfassen, der das Event abhandelt, wenn die Maus den Container verlässt und dann das Hintergrundbild zurücksetzt.
    Zuletzt bearbeitet: 01.05.2011
    #2      
  3. Herr_D
    Offline

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.558
    Geschlecht:
    männlich
    Bild wechseln bei MouseOver
    AW: Bild wechseln bei MouseOver

    Außer für den IE<7 brauchst du kein a mehr...


    Einen einfachen hover-Effekt bekommst du nur mit CSS hin


    Code:
    .bild-one {
    width:300px;
    height:400px;
    border:none;
    background:transparent url(bildadresse.jpg);
    }
    
    .bild-one:hover {
    background:transparent url(bildadresse2.jpg) /* wahlweise ein Bild mit Verschiebung in Höhe */ 
    }
    
    
    HTML:
    <div class="bild-one">&nbsp;</div>
    
    #3      
  4. MelanieCibura
    Offline

    MelanieCibura Ganz neu hier

    Dabei seit:
    18.09.2010
    Beiträge:
    30
    Geschlecht:
    weiblich
    Software:
    Photoshop CS5, Espresso
    Bild wechseln bei MouseOver
    AW: Bild wechseln bei MouseOver

    Wow cool, danke :) Genau das brauchte ich!

    Es hat sofort funktioniert, genauso wie ich es mir vorgestellt habe.

    Vielen Dank euch beiden :)

    Gruß, Melanie
    #4      
  5. VladDerFehler
    Offline

    VladDerFehler Hilfe!

    Dabei seit:
    13.04.2012
    Beiträge:
    1
    Geschlecht:
    männlich
    Bild wechseln bei MouseOver
    AW: Bild wechseln bei MouseOver

    Hallo, vllt könnte ich mit eure Hilfe folgendes realisieren. Also es geht in Prinzip ebenso um einen Bildwechsel beim MouseOver Vorgang, allerdings wünsche ich mir einen "weichen" Übergang sowie auf der http://www.nukic.de/index.php?option=com_content&view=article&catid=88&id=138&Itemid=464

    Es scheint ein Joomla-Modul zu sein und meine Frage wäre: könnte mann es auch über html/css lösen, ohne Joomla in Anspruch zu nehmen?

    Bedanke mich im Voraus und schönes WE!
    #5      
  6. TheTalesOfImmo
    Offline

    TheTalesOfImmo Medieninformatiker

    Dabei seit:
    20.01.2008
    Beiträge:
    47
    Geschlecht:
    männlich
    Software:
    Adobe CC, Netbeans, Gehirn
    Kameratyp:
    Canon EOS 450D
    Bild wechseln bei MouseOver
    AW: Bild wechseln bei MouseOver

    Hallo und willkommen im Forum!

    Dieser Effekt hat mit Joomla! selbst nichts zu tun, da es sich bei Joomla! nur um ein CMS handelt, es also nur für den Inhalt, nicht aber für Layout und Design zuständig ist. Auch CSS bietet für weiche Fade-Effekte keinerlei Hilfsmittel.

    Dieser Effekt kann nur über eine Javascriptbibliothek realisiert werden, ich benutze dafür immer JQuery und ein leicht abgewandeltes Script ähnlich wie jenem, welches in diesem Tutorial beschrieben wird.
    #6      
  7. Myhar
    Offline

    Myhar Ganz neu hier

    Dabei seit:
    01.11.2007
    Beiträge:
    1.518
    Geschlecht:
    männlich
    Bild wechseln bei MouseOver
    AW: Bild wechseln bei MouseOver

    Das stimmt so nicht, mit CSS3 ist das sehr wohl möglich. Stichwort: transitions.
    #7      
  8. TheTalesOfImmo
    Offline

    TheTalesOfImmo Medieninformatiker

    Dabei seit:
    20.01.2008
    Beiträge:
    47
    Geschlecht:
    männlich
    Software:
    Adobe CC, Netbeans, Gehirn
    Kameratyp:
    Canon EOS 450D
    Bild wechseln bei MouseOver
    AW: Bild wechseln bei MouseOver

    Okay, danke für den Hinweis.
    Dennoch würde ich noch davon abraten, da doch viele Spielereien noch nicht von der Trident-Engine unterstützt werden. Trotzdem eine sehr tolle Funktion. ;)
    #8      
  9. Diko79
    Offline

    Diko79 Ganz neu hier

    Dabei seit:
    08.02.2010
    Beiträge:
    1
    Geschlecht:
    weiblich
    Bild wechseln bei MouseOver
    AW: Bild wechseln bei MouseOver

    Freut mich, dass dir das Template gefällt! ;-) LG Nukic
    #9      
Drupal Programmierung