Wie man ein Bild beim drücken eines button in html?

Ich dachte, sowas würde gearbeitet haben, aber ich bin verwirrt, warum es nicht, wenn der style ausgeblendet wird, das Bild zu beginnen, aber nicht angezeigt, wenn die Taste gedrückt wird. Hier ist der code:

function showImg() {
    x=document.getElementById("map_img")
    x.style.visibility="visible";
}

<body>
    <img id="map_img" src="map.jpg" style="visibility:hidden" width="400" height="400"/>

    <form id="form1" name="form1" align="center">
        <input type="submit" id="Map" value="Map" onclick="showImg()"/>
    </form>

Habe ich auch versucht diese in beiden Situationen:

<input type=button id="Map" value="Map" onclick="showImg()"/>

und:

<style>
    .hidden{display:none;}
    .show{display:block;}
</style>

function showImg() {
    x=document.getElementById("map_img")
    x.class="show";
}

<body>
    <img id="map_img" src="map.jpg" class="hide" width="400" height="400"/>

    <form id="form1" name="form1" align="center">
        <input type="submit" id="Map" value="Map" onclick="showImg()"/>
    </form>

Ich bin wirklich verloren, wie haben beide nicht funktioniert, könnte ich etwas Hilfe auf diese bitte?

InformationsquelleAutor user2279496 | 2013-05-18

  1. 1

    Sollten Sie nicht verwenden:* wickeln Sie die input element in einem form wenn Sie nicht möchten, dass die standard-submit-Verhalten.

    In Ihrem code, wie geschrieben, die form löst einen laden der Seite oder ein Fehler, der verhindert, dass das Skript ausgeführt wird.

    InformationsquelleAutor DougM

  2. 1

    Sie nicht wirklich brauchen, das Formular auf Ihre Beispiele.

    JavaScript sollte in einem <script> block, und Sie haben ein paar syntax-Fehler.

    Versuchen

    <head>
    <script>
        function showImg() {
            document.getElementById("map_img").style.display = "";
        }
    </script>
</head>
<body>
    <img id="map_img" src="map.jpg" style="display: none;" width="400" height="400"/>
    <input type="submit" id="Map" value="Map" onclick="showImg()"/>
</body>
    Oh, es war in einem <script> block, ich vergaß hinzuzufügen, dass im sorry, das ich nur Links aus den <head> und <body> es ist ziemlich offensichtlich. Danke für die Antwort, obwohl deine und miros Arbeit (:
    Fair genug, froh zu hören.

    InformationsquelleAutor Klors

  3. -1

    DougM ist rechts (+1)

    Darüber hinaus sollte showImg = function()

    Hier ist eine demo: http://jsfiddle.net/Uppt6/

    Ah ich wusste nicht, die Funktion sollte so sein, Dank der Hilfe von Ihnen und danke Ihnen auch doug (: es funktionierte jetzt.
    Froh zu hören, dass! Können Sie upvote Doug und mark als nun beantwortet. 🙂
    Die Funktion nicht so sein. Die Weise, die Sie haben, ist es völlig in Ordnung. Die Art und Weise wird suggeriert, ist nur eine option; hier ist eine Erklärung der Unterschiede: stackoverflow.com/questions/336859/... . Die Sache, die Sie verwenden sollten, ist var deklarieren die variable x oder verwenden Klor Antwort ist Weg, das zu ändern den Stil.
    sagte "Sie haben es völlig in Ordnung ist," Kann Sie bitte erklären, warum es nicht funktioniert mit functionOne(){} Hier ist ein non-working fiddle: jsfiddle.net/Uppt6/1 Auch gibt es nicht einen großen Unterschied zwischen display und visibility? Nicht display "verstecken" Sie das element vollständig? Das ist nicht das was OP will und Klors Antwort verwendet anzuzeigen. Freuen uns auf Ihre Antwort.
    Das ist, weil Sie die Geige ausgeführt onLoad von der Seite - das bedeutet, dass die JavaScript-Sie erklären in einem lokalen Bereich, die nicht zugegriffen werden, weltweit. Wenn Sie versuchen, rufen Sie die Funktion Global (wie das inline-event-handler kann), gibt es nicht. Wenn Sie die Geige richtig zum laufen, es funktioniert: jsfiddle.net/Uppt6/2 . Ich habe buchstäblich nur geändert, dass die Einstellung auf der linken Seite des Fensters No wrap - in <head>.

    InformationsquelleAutor Miro

Schreibe einen Kommentar