Bild wechsel und div öffnen gleichzeitig

Bash, Shell, PHP, Python, Perl, CGI
techneo
Posts: 146
Joined: 2002-08-31 17:32
Location: Berlin

Bild wechsel und div öffnen gleichzeitig

Post by techneo » 2019-06-06 02:54

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

User avatar
Joe User
Project Manager
Project Manager
Posts: 11138
Joined: 2003-02-27 01:00
Location: Hamburg

Re: Bild wechsel und div öffnen gleichzeitig

Post by Joe User » 2019-06-14 19:45

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.
PayPal.Me/JoeUserFreeBSD Remote Installation
Wings for LifeWings for Life World Run

„If there’s more than one possible outcome of a job or task, and one
of those outcomes will result in disaster or an undesirable consequence,
then somebody will do it that way.“ -- Edward Aloysius Murphy Jr.