Grafiken mit JS wechseln

Dieses Thema im Forum "Webdesign" wurde erstellt von osiris, 28. Januar 2014 .

Schlagworte:
Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 28. Januar 2014
    Zuletzt von einem Moderator bearbeitet: 13. April 2017
    Guten Morgen,

    habe letztens einen Thread eröffnet, wie ich Zellen in einer Tabelle am Besten anspreche, um diese zu ändern.
    ( Tabellen Zellen färben, a:active?! - RR:Board!)
    Hab das Menü noch einmal überarbeitet, um es ein wenig "moderner" zu machen, ist jetzt keine Tabelle mehr, sondern es sind verschieden viele Div's nebeneinander, welche jeweils eine Grafik beinhalten.

    Was ich jetzt möchte ist folgendes:
    * Bei MouseOver wird der jeweilige Button Blau. Bei MouseOut wird er wieder weiß. Also ein normales Grafikswitchen.
    * Wenn ich nun ein Div anklicke, sollte dieses Blau bleiben, solange, bis ich ein anderes anklicke.

    Punkt 1 habe ich ganz einfach mit folgendem gelöst:

    Code:
    <div style="float:left"><a href="javascript:Tauschen('Foto01')"><img id="Foto01" src="menuebutton1.png" onmouseover="this.src='menuebuttonblau1.png'" onmouseout="this.src='menuebutton1.png'" /></a></div>
    Wie man sieht, ist hierbei schon das Javascript gelinkt, welches aufgerufen wird, wenn ich den Button anklicke.

    Punkt 2 habe ich dann mit folgendem Source zusätzlich so gelöst:

    Code:
    var TauschFotoWeiss = new Array();
    var TauschFotoBlau = new Array();
    
    TauschFotoWeiss[1] = "menuebutton1.png";
    TauschFotoBlau[1] = "menuebuttonblau1.png";
    
    function Tauschen(foto)
    {
     AlleAus();
     if (foto == "Foto01"){
     document.getElementById('Foto01').src = TauschFotoBlau[1];
     } 
    }
    
    function AlleAus()
    {
     document.getElementById('Foto01').src = TauschFotoWeiss[1];
    }
    
    
    Allerdings funktioniert das ganze Ding nicht wirklich.

    Meines Verständnisses nach, sollte ein Klick die Funktion Tauschen aufrufen. Diese ruft als erstes AlleAus auf, welche die Buttons (sind dann mehrere, ist hier nur ein Beispiel) auf die weißen zurücksetzt.
    Anschließend wird die image src von Foto01 auf das TauschFotoBlau[1] gewechselt.

    (Vermutlich sollte ich die Dinger nicht Foto sondern Buttons nennen.)

    Wo liegt der Fehler? :O
     
  2. 28. Januar 2014
    AW: Grafiken mit JS wechseln

    Das Hintergrundbild bei einem Hover zu wechseln solltest du am besten per CSS lösen.
    Versuche mal die einzelnen Menüpunkte ganz einfach als Link zu deklarieren (a) und diesen dann eine generelle CSS Klasse zu geben die allgemeine Eigenschaften enthält (display: block; float: left; width, height...) und eine die das entsprechende Hintergrundbild setzt (background: url('...') no-repeat .
    Die enstprechenden "background Klassen" kannst du dann auch mit dem Selektor :hover ansprechen und dort dann das Hintergrundbild ändern bei einem mouseOver.

    Dass die entsprechenden Buttons blau bleiben kannst du am besten mit jQuery lösen, denke ich.
    Einfach mit einem allgemeinen Selektor die generelle Klasse der Buttons ansprechen die du zuvor erstellt hast und dann beim Event .click() die Klasse des Hovers hinzufügen und bei allen anderen Buttons entfernen.

    Falls du ein Beispiel brauchst sag bescheid, dann poste ich ein Stück Code.

    MfG
     
  3. 28. Januar 2014
    AW: Grafiken mit JS wechseln

    Danke schonmal.

    Ist denn das mit onMouseOver outdated (respektive nicht mehr "mode")???
    Muss mir das mit dem jQuery und Selektor mal anschauen.

    Müsste nicht mein Code theoretisch laufen? Ich seh meinen Fehler einfach nicht, wird wohl ein Denkfehler sein, oder?!
     
  4. 29. Januar 2014
    AW: Grafiken mit JS wechseln

    Also das mit dem onMouseOver solltest du alleine schon deswegen machen, da sonst Benutzer, die Javascript deaktiviert haben, keinen Hover Effekt bekommen.
    Das Problem bei deinem Code ist, dass beim Klick zwar das Bild geändert wird, du aber dabei mit dem Cursor im Bild bist. Wenn du nun den Cursor aus dem Bild verschiebst, wird das Event "onMouseOut" wieder aufgerufen und das Bild wird wieder gewechselt.

    LG
     
  5. 29. Januar 2014
    AW: Grafiken mit JS wechseln

    Wenn Javascript Deaktiviert ist dann wird auch kein onMouseOver ausgelöst, denn das ist ebenfalls Javascript!



    Das Styling sowie den Hover-Effekt kommt in die CSS-Datei

    style.css
    Code:
    #menu {
     display: block;
     position: relative;
     float: left;
    }
    #menu a {
     display: inline-block;
     width: 100px;
     height: 40px;
     background-color: #fff;
     background-repeat: no-repeat;
     background-position: 0 0;
    }
    #menu .menu-start { background-image: url(images/menuebutton1.png) }
    #menu .menu-start.active, #menu .menu-start:hover, #menu .menu-start:focus { background-image: url(images/menuebuttonblau1.png) }
    
    #menu .menu-news { background-image: url(images/menuebutton2.png) }
    #menu .menu-news.active, #menu .menu-news:hover, #menu .menu-news:focus { background-image: url(images/menuebuttonblau2.png) }
    

    index.html
    HTML:
    <div id="menu">
     <a href="http://domain.tld/" class="menu-start">Startseite</a>
     <a href="http://domain.tld/" class="menu-news">News</a>
    </div>

    Mit Javascript erledigen wir das hinzufügen und Entfernen einer Klasse (active) wenn auf einen Menupünkt geklickt wurde.

    script.js
    Code:
    <script>
    var menuItems = document.getElementById('menu').getElementsByTagName('a');
    
    function menuClicked(evt) {
     evt.preventDefault();
     for(var a=0, b=menuItems.length; a<b; ++a) {
     menuItems[a].className = menuItems[a].className.replace(/\bactive\b/,'');
     console.log(menuItems[a].className);
     }
     evt.target.className += ' active';
    }
    
    for(var a=0, b=menuItems.length; a<b; ++a) {
     menuItems[a].addEventListener('click', menuClicked);
    }
    </script>
     
  6. 29. Januar 2014
    AW: Grafiken mit JS wechseln


    Sorry, habe mich falsch ausgedrückt. Meinte natürlich das sollte er wegmachen und mit nem CSS Hover ersetzen.
     
  7. 29. Januar 2014
    AW: Grafiken mit JS wechseln

    Danke sehr, danke schön
     
  8. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.