• Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

input type:image mit onclick-event

S

syuam

Neues Mitglied
Hey leute, komme gleich zur Sache:
Hier meine Tabelle:
HTML: 
<table style="border-collapse: collapse;">
    <tr>
      <td><input type="image" src="inventory_images/berg1.jpg" name="ckbox" onclick="javascript:checkBoxValidate(0)" value="wert1"></td>
      <td><input type="image" src="inventory_images/berg2.jpg" name="ckbox" onclick="javascript:checkBoxValidate(1)" value="wert2"></td>
    </tr>
    <tr>
      <td><input type="image" src="inventory_images/berg3.jpg" name="ckbox" onclick="javascript:checkBoxValidate(2)" value="wert3"></td>
      <td><input type="image" src="inventory_images/berg4.jpg" name="ckbox" onclick="javascript:checkBoxValidate(3)" value="wert4"></td>
    </tr>
  </table>
Nun wird eine Tabelle mit vier Tabellenzellen dargestellt.
In jeder dieser Tabellenzellen befindet sich ein Bild.
Nun wollte ich, dass der Benutzer eines dieser Bilder auswählen kann und später auf submit drückt.
Jedem dieser Bilder ist ein value zugewiesen.
Anhand dieses value´s soll das ausgewählte Bild eindeutig identifiziert werden.
Das ausgewählte Bild sollte per javascript-onclick event einfach nur markiert werden.
Wichtig: Es darf nur ein Bild markiert werden.
Mein js-script:
Code: 
<script language="JavaScript">
function checkBoxValidate(cb) {
    for (j = 0; j < 4; j++) {
    if (eval("document.myform.ckbox[" + j + "].checked") == true) {
        document.myform.ckbox[j].checked = false;
        if (j == cb) {
            document.myform.ckbox[j].checked = true;
        }
    }
    }
}
</script>
Es funktioniert jedoch nicht. Bei Klick wird kein Bild markiert.
Was mache ich falsch/ wie sollte ich es machen?
LG
 
Was willst du denn da auch markieren? Ein image ist keine checkbox. Falls der User ein visuelles Feedback erhalten soll, könnte man so etwas machen.

HTML: 
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
	<title></title>
</head>
<body>
	<p><input type="image" src="image_1.png" value="wert 1"/></p>
	<p><input type="image" src="image_2.png" value="wert 2" /></p>

<script>
	$(':input[type="image"]').on('click', function(event) {
		$(':input[type="image"]').css('border', 'none');
		$(this).css('border', '1px solid red');
		var foo = $(this).prop('value');
		console.log(foo);
	});
</script>
</body>
</html>
 
der Teil funktioniert nicht..
Ich wollte einfach nur vier Bilder in einer Tabelle darstellen.
<table style="border-collapse: collapse;">
<tr>
<td><img id="img01" src="inventory_images/berg1.jpg" onclick="changeColor()" /></td>
<td><img id="img01" src="inventory_images/berg2.jpg" onclick="changeColor()" /></td>
</tr>
<tr>
<td><img id="img01" src="inventory_images/berg3.jpg" onclick="changeColor()" /></td>
<td><img id="img01" src="inventory_images/berg4.jpg" onclick="changeColor()" /></td>
</tr>
</table>
Zum Vergrößern anklicken....
Bei Klick auf ein Bild soll dieses z.B. den "border" ändern. :
<script>
function changeColor() {
document.getElementById("img01").style.borderColor="#00FF00";
}

</script>
Zum Vergrößern anklicken....
Allerdings ändert sich egal, welches Bild ich anklicke, nur der Rahmen des Bildes oben links in der Tabelle wieso?
wie sollte ich es machen?
LG
 
Mit deiner JavaScript-Funktion sprichst Du durch

Code: 
document.getElementById("img01")

immer nur das 1. Bild an. Wenn Du das flexibel haben willst, schreib es so:

Code: 
function changeColor( obj ) {
obj.style.borderColor  ="#00FF00";
    }

und beim Aufruf:
HTML: 
.. onclick="changeColor(this);" ..

Ich würde btw. auf die Tabelle verzichten. Sehe darin keinen Sinn da es sich um keine tabellarischen Inhalte sondern "nur" 4 Bilder handelt.
 
danke läuft soweit :)
Es können beliebig viele Bilder markiert werden.
und wie bewerkstellige ich,
dass nur ein Bild ausgewählt werden kann?
LG
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben