Frage

Ich habe ein Bild, mit dem Links zu einer anderen Seite verwendet werden <a href="..."> <img ...> </a>.

Wie kann ich es dazu bringen, einen Beitrag zu machen, als wäre es ein Knopf? <input type="submit"...>?

War es hilfreich?

Lösung

<input type="image" name="your_image_name" src="your_image_url.png" />

Dadurch wird das gesendet your_image_name.x und your_image_name.y Werte, wie es das Formular unterstellt, bei denen es sich um die X- und Y -Koordinaten der Position handelt, die der Benutzer auf das Bild geklickt hat.

Andere Tipps

Generischer Anzug mit Verwendung JQuery Bibliothek am nächsten() und einreichen() Tasten. Hier müssen Sie nicht angeben, was Sie einreichen möchten, und geben Sie das Formular ein, in dem es sich befindet.

<a href="#" onclick="$(this).closest('form').submit()">Submit Link</a>

Es sieht so aus, als würden Sie versuchen, ein Bild zu verwenden, um ein Formular einzureichen ... in diesem Fall Verwendung<input type="image" src="...">

Wenn Sie wirklich einen Anker verwenden möchten, müssen Sie JavaScript verwenden:

<a href="#" onclick="document.forms['myFormName'].submit(); return false;">...</a>

Eingabetyp = Bild Wird es für dich tun.

Ungetestet / könnte besser sein:

<form action="page-you're-submitting-to.html" method="POST">
    <a href="#" onclick="document.forms[0].submit();return false;"><img src="whatever.jpg" /></a>
</form>
 <html>

 <?php

 echo $_POST['c']." | ".$_POST['d']." | ".$_POST['e'];

 ?>

 <form action="test.php" method="POST">
      <input type="hidden" name="c" value="toto98">
      <input type="hidden" name="d" value="toto97">
      <input type="hidden" name="e" value="toto aaaaaaaaaaaaaaaaaaaa">

      <a href="" onclick="document.forms[0].submit();return false;">Click</a> 
 </form>

</html>


So easy.




So easy.

Was möglicherweise eine praktische Ergänzung darstellt, ist die Möglichkeit, die Post-URL von der zusätzlichen Taste zu ändern, damit Sie mit verschiedenen Schaltflächen auf verschiedene URLs veröffentlichen können. Dies kann erreicht werden, indem die Form der Formular „Aktion“ festgelegt wird. Hier ist der Code dafür, wenn JQuery verwendet wird:

$('#[href button name]').click(function(e) {
    e.preventDefault();
    $('#[form name]').attr('action', 'alternateurl.php');
    $('#[form name]').submit();
});

Die Action-Attribute hat einige Probleme mit älteren JQuery-Versionen, aber in der neuesten Zeit sind Sie gut zu gehen.

Etwas wie diese Seite ?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>BSO Communication</title>

<style type="text/css">
.submit {
    border : 0;
    background : url(ok.gif) left top no-repeat;
    height : 24px;
    width : 24px;
    cursor : pointer;
    text-indent : -9999px;
}
html:first-child .submit {
    padding-left : 1000px;
}
</style>
<!--[if IE]>
<style type="text/css">
.submit {
    text-indent : 0;
    color : expression(this.value = '');
}
</style>
<![endif]-->
</head>

<body>
    <h1>Display input submit as image with CSS</h1>

    <p>Take a look at <a href="/2007/07/26/afficher-un-input-submit-comme-une-image/">the related article</a> (in french).</p>
    <form action="" method="get">
        <fieldset>
            <legend>Some form</legend>
            <p class="field">
                <label for="input">Some value</label>

                <input type="text" id="input" name="value" />
                <input type="submit" class="submit" />
            </p>
        </fieldset>
    </form>

    <hr />
    <p>This page is part of the <a href="http://www.bsohq.fr">BSO Communication blog</a>.</p>

</body>
</html>

Vergessen Sie nicht das "Knopf" -Element, das noch mehr HTML in ...

Wir ersetzen die Taste der Sendene ständig in Formularen:

<form method="post" action="whatever.asp">
<input type=...n

<input type="image" name="Submit" src="/graphics/continue.gif" align="middle" border="0" alt="Continue">
</form>

Klicken auf das Bild legt das Formular ein. Ich hoffe, das hilft!

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top