CJay: Hilfe in JS

SELF-Forum

Hilfe in JS

CJay
– Informationen zu den Bewertungsregeln

Hallo ich habe mich heute mit Javascript beschäftigt und viele verschiedene Sachen mit gemacht eine hat nicht wirklich funktioniert.
Nämlich wollte ich einen Buttom machen , der wenn man drübergeht und  draufklickt duch ein andres Bild ersetzt wird.

Ich habe das so geschrieben funktioniert aber garnicht
Es kann sein das es komplett falsch angegangen ist , hoffe aber das mir jemand hilft
Dankee;D

<html>
<head>
<title>blablabla</title>
<script type="text/javascript">
function Bild(wert){
swich(wert){
case 1:
document.write('<img src="buttom.png" title="Zum Katalog" >');
break;
case 2:
document.write('<img src="buttom2.png" title="Zum Katalog" >');
break;
case 3:
document.write('<img src="buttom3.png" title="Zum Katalog" >');
break;
}
}
</script>
</head>
<body>
<img id="bild" onmouseover="Bild(1)" onmouseout="Bild(2)" onClick="Bild(3)"></img>
</body>
</html>

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. Hilfe in JS

    Felix Riesterer Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Lieber CJay,

    document.write('...');

    diese Funktion (in JS spricht man eher von Methoden) hat nur dann einen Sinn, wenn der Browser das Dokument erst aufbaut, also der Ladevorgang noch nicht abgeschlossen ist. Da in Deinem Anwendungsfall aber das Dokument schon fix und fertig ist (sonst könntest Du den fraglichen Button nicht anklicken), führt das Aufrufen dieser Methode entweder zu nichts, oder zu einem neuen Dokument. Im letzteren Falle siehst Du wahrscheinlich eine leere Seite.

    Was Du stattdessen benötigst, ist eine Möglichkeit, den Button via JS "anzufassen", um ihn dann mit Hilfe von sogenannten DOM-Methoden (Methoden, die HTML-Elemente als Objekte ansprechen und verändern) zu manipulieren.

    In Deinem Fall möchtest Du Mausereignisse über einem speziellen <img>-Elementobjekt abfangen. Das könntest Du so lösen:

    <img src="buttom2.png" id="spezialbutton" alt="zum Katalog" title="zum Katalog" />

    Am Ende des <body>-Elements notierst Du dann folgendes Script:

    <script type="text/javascript">//<![CDATA[~~~javascript

    new function () {
        var b = document.getElementById("spezialbutton");

    if (b) {

    b.onmouseover = function () {
                // "this" verweist in diesem Kontext auf das <img>-Element!
                this.src = "bottom.png";
            };

    b.onmouseout = function () {
                // "this" verweist in diesem Kontext auf das <img>-Element!
                this.src = "bottom2.png";
            };

    b.onclick = function () {
                // "this" verweist in diesem Kontext auf das <img>-Element!
                this.src = "bottom3.png";
            };
        }
    }

      
Liebe Grüße,  
  
Felix Riesterer.

-- 
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)
    Beitrag melden
    –
    Informationen zu den Bewertungsregeln