Bild mit Weiterleitung von einem Button?

Hallo Leute,

Ich habe in Wordpress mit Ninja Foms einen Konfigurator erstellt (spezifische Abfragen, die dann gesendet werden).

In einem Teil des Konfigurator habe ich neben dem Button weiter auch ein Bild

Kann ich das Bild auch als Button benutzen - mit der gleichen Verlinkung wie der untere Button

Einen Link gibt es nicht, daher kann ich leider kein <a...> benutzen

Am Ende soll die Grafik durch anklicken weiterführen - wie auch der Button "Weiter".

Danke schon mal für eure Teilnahme an dieser Lösungsfindung ))

2 Antworten

threadi

Von gutefrage auf Grund seines Wissens auf einem Fachgebiet ausgezeichneter Nutzer

Computer, HTML

23.06.2020, 20:10

Du kannst das Bild mit einem Link umgeben:

<a href=""><img src="/wp-content/uploads/2020/06/Grafik01.gif" width="600" height="450"></a>

Du kannst auch dem Button das Bild als Hintergrundbild geben:

input.nf-next { background-image: url(/wp-content/uploads/2020/06/Grafik01.gif); background-repeat: no-repeat; }

Du kannst auch einen echten HTML-Button verwenden:

<button type="button"><img src="/wp-content/uploads/2020/06/Grafik01.gif" width="600" height="450"></button>

Bei allen Beispielen hier musst Du den Style ggfs. per CSS noch optimieren - je nachdem was Du visuell erreichen willst.

Woher ich das weiß:Berufserfahrung

DaMenzel

23.06.2020, 20:05

Bei HTML würde das so gehen:
<input type="submit" class="nf-next" value="Weiter"><img src="/wp-content/uploads/2020/06/Grafik01.gif" width="600" height="450"></input>

Eventuell hilft Dir das schon weiter. Allerdings habe ich von Wordpress keine Ahnung und auch nicht davon was ein Ninja-Konfigurator ist.

threadi

23.06.2020, 20:08

Das ist fehlerhafter HTML-Code der nur mit Glück überhaupt interpretiert wird.

DaMenzel

23.06.2020, 20:11

@threadi

Hab's gerade gesehen dass das ein alter Code ist der heute nicht mehr so geschrieben wird.
Mittlerweile geht das wohl so:

<input type="image" src="image.png" alt="image-lost">

threadi

23.06.2020, 20:14

@DaMenzel

Selbst das ist heutzutage nicht sinnvoll. Hier geht es um die Darstellung eines Bildes sowie ggfs. grafische Anpassungen. Sowas macht man nicht mit HTML sondern CSS.

DaMenzel

23.06.2020, 20:16

@threadi

Ja, macht man. Allerdings ging's mir darum rein einen HTML-Code zu zeigen, weil ich mich nicht mit Wordpress oder diesem Konfigurator auskenne.

<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Autotuning</title>
<link rel="shortcut icon" href="T4Nissan 240 SX BR101.png" type="image/x-icon">
<meta name="description" content="">
<link href="styleSeite1.css" rel="stylesheet">
</head>
<body>
<br><br><br><br><br><br><br><center>
<a href="NFSU.html"><img src="images/NFSU.jpg" width="" height="230" style="align:/></a>
<a href="NFSU2.html"><img src="images/NFSU2.JPG" width="" height="235" style="align:/></a>
<a href="NFSUC.html"><img src="images/NFSUC.JPG" width="" height="241" style="align:/></a>
<a href="NFSC.html"><img src="images/NFSC.JPG" width="" height="237" style="align:/></a>
<a href="NFSMW2005.html"><img src="images/NFSMW2005.JPG" width="" height="230" /></a><br>
<a href="MC3DER.html"><img src="images/MC3DER.JPG" width="" height="250" style="vertical-align:/></a>
<a href="MCLACE.html"><img src="images/MCLACE.JPG" width="" height="250"/></a>
<a href="Gran Turismo 6.html"><img src="images/Gran Turismo 6.jpg" width="" height="250" /></a>
<a href="LEGO.html"><img src="images/LEGO.JPG" width="" height="250" /></a><br>
<a href="Modellbau.html"><img src="images/Modellbau.jpg" width="500" height="" align="top"/></a>
<a href="Sonstige.html"><img src="images/Sonstige.JPG" width="230" height="" align="top"/></a>
<a href="GTA5.html"><img src="images/Coil Cyclone.jpg" width="350" height="" align="top"/></a>
<a href="Silent Hill.html"><img src="images/Halo.JPG" width="185" height="" align="top"/></a>
</body>
</html>

durch ,,style=""´´ werden die Hyperlinks ohne Abstand platziert. Warum werden diese Hyperlinks gruppiert und alle außer dem erstem werden ignoriert? Die Frage ist leicht zu verstehen beim Blick auf den F12-Debugger im Browser. </style> löst das Problem nicht. autotuningyv.square7.ch/Seite1.html. Kann jemand den Quelltext bitte korrigieren?

...zur Frage

HTML Iframe weiterleitung?

Guten Tag,

Ich schreibe gerade eine Webseite und wollte ein iframe einbauen doch wenn ich auf die Seite gehe wird die Seite nicht angezeigt sondern werde zur Webseite weitergeleitet. [CODER] <iframe src="http://www.exapmple.de width="400" height="400" style="float:right"></iframe>

...zur Frage

HTML Editor Bilder verschieben?

hallo, melde mich nochmal auf Grund meiner Website.

Der Code um Bilder darzustellen und seine Größe zu bestimmen ist ja

<img src="Beispiel.jpg" width="100" height="100" border="0"> jedoch kenne ich keinen Befehl um die Position des Bildes auf der Seite zu bestimmen. Kann mir da jemand weiterhelfen?

...zur Frage

Mit html Bilder kleiner/größer machen?

Ich arbeite gerade aus spaß an meiner html Seite und HTML möchte meine Bilder nicht kleiner und größer machen ich benutze diesen Tag:

"width" und "height" funktionieren aber nicht woran könnte das liegen?

...zur Frage

Fehler bei HTML Bild?

Lerne letzterzeit aus Spaß ein bisschen HTML.

Jedoch, wenn ich ein Bild hinzufügen möchte mit:

<img src=„https://x.y.de“> kommt da nur folgendes:

Das Bild wird also nicht ganz angezeigt.

Liegt es vllt. daran, dass ich „width“ und „height“ nicht angegeben habe?

...zur Frage

Inlineframe (iframe) in HTML skalieren/verkleinern?

Hallooo,

Ich möchte gerne ein Bild (https://www.abenteuer-sterne.de/sonnebild/sonnehalpha.jpg) mit einem HTML-Tool auf meine Website einbetten. Da das Bild etwas größer ist dachte ich mir nur "height=" und "width=" zu benutzen. Nach einer längeren Suche in einigen Foren bin ich nur noch verwirrt... Wir kann ich das Bild in eine abgerundete 340×340-Form "hineinpressen" ohne, dass nur ein Ausschnitt zu sehen ist und es tatsächlich nicht verkleinert wurde?

<style>
iframe {
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -o-border-radius: 20px;
}
</style>
<iframe width="340" height="340" src="https://www.abenteuer-sterne.de/sonnebild/sonnehalpha.jpg" frameborder="0" scrolling="no"></iframe>

Vielen Dank im Voraus!

...zur Frage

Html / CSS: Abstand zwischen vier Bildern?

Hey.

Ich möchte gerne zwischen meinen vier Bildern einen Abstand von 0,5cm - 2cm.

Wie und wo trage ich das ein?

<ul>
  <h4><li><a href="Forum.html">Forum</a></li></h3>
  <h4><li><a href="Kontakt.html">Kontakt</a></li></h3>
  <h4><li><a href="shop.html">Vintage Kleidung & Möbel</a></li></h4>
  <h4><li><a href="Startseite.html">Startseite</a></li></h4>
  <img src="Vintage0.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage3.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage4.jpg" width="250" height="250" alt="vinjacke">
  <Img src="Vintage5.jpg" width="250" height="250" alt="vinjacke">

(Für mich ist das ziemliches Neuland. Bitte Rücksicht nehmen, ich mache das erst seit vorgestern)

PS.: Das ist nur ein Teil meiner HTML-Datei! Ich möchte nur, dass ihr einen kleinen Ausschnitt seht.

Danke.

...zur Frage

Automatische Weiterleitung nach Klick auf den submit Button bei einem Formular?

Hallo,

ich habe ein kleines Formular mit 2 Feldern (mittels method="post" ).

Wenn ich nach der Eingabe auf "weiter" klicke, werden die eingegebenen Sachen verarbeitet und ein Link erzeugt.

Nun zur Frage:

Ist es möglich, dass beim Klick auf "weiter" die Daten nach wie vor verarbeitet werden und der erzeugte Link direkt (ohne nochmal irgendwo klicken zu müssen) im neuen Fenster geöffnet wird?

Beispiel: Ich gebe etwas ins Formular ein und mit dem Klick auf "weiter" werden die eingegebenen Sachen verarbeitet und anschließend der erzeugte Link direkt geöffnet.

<input style= "color: blue; height: 35px; width: 150px;" type="submit" value="weiter">

Danke im Voraus.

...zur Frage

Wie verhinder ich die Download Funktion?

Ich habe ein Video eingebettet auf meiner Website aber wenn ich es starte, kann es jeder herunterladen. Gibt es in diesem Code (oder in einem anderen) die Möglichkeit, den Download Button zu deaktivieren?

Code:

...zur Frage

HTML & CSS Button-breite anpassen?

Hey, im voraus möchte ich schonmal erwähnen das ich hier absoluter Neuling bin.

Seit ein paar Tagen "spiele" ich etwas mit HTML und CSS herum, ich hab einen Button eingefügt dem ich ein img hinzugefügt habe, nun bekomme ich die Breite des Buttons aber nicht angepasst, entweder es ändert sich garnichts oder der Button bedeckt die vollständige Seite.

Ist es überhaupt möglich den Buttn in % zu skalieren oder muss ich mit px arbeiten?

Hoffe mich kann jemand aufklären :)

Habe mir das ganze nochmal angeschaut, macht den Eindruck als würde "width" vollständig ignoriert. Wenn ich "height" verändere passt sich "width" automatisch an um die Proportionen beizubehalten.

...zur Frage

SVG in HTML einbinden geht nicht?

Guten Tag Gutefrage-Community,

wie im Titel schon steht, habe ich das Problem, dass ich eine SVG-Datei nicht in meine HTML-Datei einbinden kann. Dies geht in keiner von mir erstellen HTML-Datei. Ich versuche es wie folgt einzubinden:

<img src="value.svg">

Die SVG-Datei sieht wie folgt aus:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 400 400">
  <image id="v" x="5" y="5" width="390" height="390" xlink:href="..."/>
</svg>

...zur Frage

CSS Image wird nicht angezeigt?

CSS:
.top-banner {
  width: 100%;
  height: auto;
  background-size: contain;
  background: url("../img/start.jpg") no-repeat;
}

HTML:
 <div class="top-banner"></div>

Das Bild soll responsive angezeigt werden. Es liegt an dem height: auto;

gebe ich zum Beispiel eine feste height von 400px, wird es wieder angezeigt, ist aber natürlich nicht responsiv.

Gibt es da eine andere Möglichkeit, ein Image anzuzeigen, welches mitskaliert?

...zur Frage

HTML / CSS : Wie bei einem iFrame den YouTube-Balken unten weg bekommen?

Hier ist mein iFrame code ohne, dass der YouTuber Scroll Balken unten verschwindet.

</div>

Welchen Code muss ich hinzufügen, dass dieserverschwindet und man nicht vor- oder zurückspulen kann?

...zur Frage

Content in die mitte packen html, css?

Ich arbeite an einem Discord bot Dashboard und ich möchte, dass die Kästchen vom <li></li> nicht untereinenander sind sondern neben einander bis zum bildschirm rand und dann eins runter gehen.

html:

 <ul>
  <li><a class="content"><button onclick='ping()'>Working?</button>   
  </a></li>
  <li><a class="content"><input type="text" id="invite" placeholder="server invite"></a>
  <a class="content"><button onclick="add_invite()">Join</button></a>
  <br></li>
  <li>
</ul>

Css:

html,
body{
    width: 90%;
    color: #FE72F3;


 background: #2B2B2B;
    height: 100%;
}
ul{
    list-style: none;
    width: 100%;
    height: 100%;
}
li{


    width: 320px;
    height: 220px;
    background: #494949;
    border: 2px solid #1d1c1c;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    margin-top: 20px;
}
input{
    width: 90%;
    margin: 10px;
    height: 30px;
    border-radius: 5px;


}
button{
    width: 93%;
    margin: 10px;
    height: 35px;
    border-radius: 5px;
    
}

Wie mach ich das?

...zur Frage

Was möchtest Du wissen?

Deine Frage stellen