Bild wechsel und div öffnen gleichzeitig

[techneo]

Hallo liebe Gemeinde

Ich finde leider nicht den Fehler, vielleicht kann jemand von euch mir weiterhelfen.
Ich habe einen Kontakt Button und wenn ich drauf klick soll sich ein Div öffnen, was auch funktioniert.
Außerdem möchte ich das die Grafik von den Button sich auf Bild2 ändern, was nicht funktioniert.
Nach den 2. Klick soll sich die Grafik wieder auf Bild 1 ändern und Div schließen. Das Div geht zu aber die Grafik wird nicht geändert.
Hier mein Code:

Code: Select all

<script> 
function div(id) { 
    if(document.getElementById) { 
        var mydiv = document.getElementById(id);
        mydiv.style.display = (mydiv.style.display=='block'?'none':'block');
    }
    changeImage('contact');
} 
function changeImage(id) {   
    tag.src = (String(tag.src).match(/contact\.png$/) ? "bilder/contactx.png" : "bilder/contact.png");
}
</script>
<style>
    #divText a{color:#EC5C03; text-decoration:none;}
    #contact {cursor:pointer;} 
</style>

<img src="bilder/contact.png" id="contact" onclick="javascript:div('divText'); return false"
style="width:160px; height:160px; position:fixed; right:20px; top:380px;" >
<div style="display: none; padding:30px; width:320px; height:300px; position:fixed; 
right:175px; top:80px; border-top: 5px solid #EC5C03; background:rgb(255,255,255,1);
-webkit-box-shadow: 10px 10px 10px 0px rgba(187,187,187,1);
-moz-box-shadow: 10px 10px 10px 0px rgba(187,187,187,1);
box-shadow: 10px 10px 10px 0px rgba(187,187,187,1);" id="divText">
    <i style="font-weight:700; font-size:18px;">KONTAKT</i><br /><br />
    Wir beraten euch gerne persönlich:<br /><br />
    <p style="border:1px solid #EC5C03; padding:15px; width:100%; font-size:20px;">
        <a href="tel:4930220xxxxx">
        <i style="margin-right:30px; color:#EC5C03; font-size:30px;" class="fa fa-volume-control-phone" aria-hidden="true"></i>
        (030) 220 XXX XX</a>
    </p>
    <p style="border:1px solid #EC5C03; padding:15px; width:100%; font-size:20px;">
        <a href="https://wa.me/49152337xxxxx" target="_blank">
        <i style="margin-right:30px; color:#EC5C03; font-size:30px;" class="fa fa-whatsapp" aria-hidden="true"></i>
        (0152) 337 XXX XX</a>
    </p>
</div>

Wäre klasse, wenn wir den fehler finden können.
LG Mirko

[Joe User]

Der Client/Browser muss die Seite neu rendern um die neue Grafik anzeigen zu können und das passiert nicht einfach so automatisch.
Eine Möglichkeit (aber nicht mehr zeitgemäss) wäre beispielsweise, die Grafiken für den Button per Ajax einzubetten und auszutauschen.
Viel eleganter und moderner ist allerdings für schnöde Buttons auf Grafiken zu verzichten und stattdessen mit CSS zu arbeiten, dann kann man sich den Javascript-Quatsch schenken und gleichzeitig auch die Zugänglichkeit der Seite erheblich erhöhen.