nicht angemeldet
Farbe einer Figur ändern durch Farbeingabe in Eingabefenster
Rolf B
Gunnar BittersmannDanke sehr für den Post :-), nach so einer ähnlicher bin der Zeit auf der Suche :-(
ich bin auf der Suche nach einer Funktion und werde nicht findig.
ich hoffe nur, dass Sie mir weiter helfen können.
Problem:
ich habe 2 Figuren, rect 1 und rect 2
und 2 Suchfenster, Suchfenster 1 und Suchfenster 2
wenn man im Suchfenster 1 farbe eingibt, zb. rot, dann soll das rect 1 rot werden.
wenn man im Suchfenster 2 farbe eingibt, zb. blau, dann soll das rect 2 blau werden.
rect 1 und rect 2 sind Figuren aus svg, die in html eingebunden wurden.
Ich werde Ihnen sehr dankbar sein, wenn Sie helfen, such seit 2 Tagen schon nach einer Lösung.
<!doctype html>
<html>
<head>
<title>Simka</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Simka Überschrift-->
<h1> Simka </h1>
<style>
h1 {
background-color: green;
color: white;
}
p {
text-align: center;
color: green;
}
</style>
<!-- Darstellung von Suchfunktion Grundfarbe-->
<main>
<form action="1" >
<p>
<label> Grundfarbe
<input type="search" list="Grundfarbe" />
<datalist id="Grundfarbe">
<option value="RAL 3000"> <!-- rot-->
<option value="RAL 3001">
<option value="RAL 3002">
<option value="RAL 3003">
<option value="RAL 3004">
<option value="RAL 3005">
<option value="RAL 3006">
<option value="RAL 3007">
<option value="RAL 3008">
</datalist>
</label>
<button>ok</button>
</p>
</form>
<!--Stoßstange Hinten-->
<form action="2" >
<p>
<label> StoßstangeH
<input type="StoßstangeH" list="Stoßstange Hinten" />
<datalist id="StoßstangeH">
<option value="RAL 3000">
<option value="RAL 3001">
<option value="RAL 3002">
<option value="RAL 3003">
<option value="RAL 3004">
<option value="RAL 3005">
<option value="RAL 3006">
<option value="RAL 3007">
<option value="RAL 3008">
</datalist>
</label>
<button>ok</button>
</p>
</form>
</main>
</head>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 1190.6 841.9" style="enable-background:new 0 0 1190.6 841.9;" xml:space="preserve">
<style type="text/css">
<!--rot-->
.farbe1{fill:#FF0000;}
<!--blau-->
.farbe2{fill:#0101DF;}
</style>
<!--Grundfarbe rot-->
<rect x="17" y="31.8" class="farbe1" width="40" height="26"/>
<!--Farbe blau-->
<rect x="2" y="80" class="farbe2" width="60.3" height="30"/>
</svg>
</svg>
</body>
</html>
LG
-
Hallo Alina,
zunächst einmal: Du musst dein HTML aufräumen. Die HTML Tags </head> und <body> gehören viel weiter nach vorn, vor das <h1>. Es ist auch nicht sinnvoll, die Options einer Datalist mit jeder Option weiter einzurücken. Setze die Options untereinander.
Ich denke, dass Du uns hier nur einen Teil deiner Seite zeigst und darum einige Fehler, die man in deinem HTML sieht, keine Fehler sind. Aber ich liste es trotzdem mal auf. Ob es wirklich Fehler sind, musst Du entscheiden.
Ein svg Element beginnt mit <svg> und endet mit </svg>. Du hast bei Dir zweimal </svg>. Eins davon ist zu viel.
Dein <svg> Tag sieht so aus:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1190.6 841.9" style="enable-background:new 0 0 1190.6 841.9;" xml:space="preserve">- Du definierst den xlink Namespace. Brauchst Du den? Wenn nicht: nimm das xmlns:xlink="..." weg.
- Du verwendest das xml:space="preserve" Attribut. Das macht man heute nicht mehr so. Es dient dazu, dass mehrere Leerstellen in Texten nicht zu einer Leerstelle gemacht werden. Ist das für Dich wichtig? Gib dem sgv Element mit CSS die Eigenschaft white-space:pre.
- Du verwendet die x und y Attribute. Vielleicht irre ich mich - aber ich denke, auf dem SVG Element sind die wirkungslos.
Und dann ist die Frage: Welche Lösung stellst Du Dir vor? Soll ein Klick auf OK über den Webserver laufen und vom Webserver neues HTML generiert werden? Oder möchtest Du eine JavaScript Lösung bauen?
Welche Grundkenntnisse dafür bringst Du schon mit?
Rolf
--
sumpsi - posui - clusi-
@@Rolf B
Und dann ist die Frage: Welche Lösung stellst Du Dir vor? Soll ein Klick auf OK über den Webserver laufen und vom Webserver neues HTML generiert werden? Oder möchtest Du eine JavaScript Lösung bauen?
Oder beides – wie beim Währungsrechner.
LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling
-
@@Alina
Eine JavaScript-Lösung sieht in etwa so aus. (Best viewed in Firefox – andere Browser haben
gapfalsch implementiert.)Kannst du damit was anfangen? Wenn du Fragen dazu hast, immer raus damit.
Zur Eingabe einer Farbe gibt es den Typen
color. Browser bieten daraufhin einen Farbwähler an.Es zeigt sich: Wenn du
datalistverwendest, steht nicht die RAL-Nummer im Eingabefeld, sondern der Wert (bspw.hsl(4deg 68% 39%)). Das scheint mir unschön zu sein. Vielleicht verwendest du doch besser ein anderes Eingabeelement (select?).LLAP 🖖
--
„Man kann sich halt nicht sicher sein“, sagt der Mann auf der Straße, „dass in einer Gruppe Flüchtlinge nicht auch Arschlöcher sind.“
„Stimmt wohl“, sagt das Känguru, „aber immerhin kann man sich sicher sein, dass in einer Gruppe Rassisten nur Arschlöcher sind.“
—Marc-Uwe Kling