Function mit JS

Unregistriert

Hi

Ich möchte ein Farbauswahl anbieten

Code

<img onclick="this.style.border='1px solid #000000'" src="colors/white.GIF" />
<img src="colors/gray.GIF" />
<img src="colors/yellow.GIF" />
<img src="colors/orange.GIF" />
<img src="colors/red.GIF" />
<img src="colors/800.GIF" />
<img src="colors/lightgreen.GIF" />
<img src="colors/green.GIF" />
<img src="colors/ff00cc.GIF" />
<img src="colors/pink.GIF" />
<img src="colors/lightblue.GIF" />
<img src="colors/blue.GIF" />
<img  src="colors/black.GIF" />

Alles anzeigen

und möchte daß sobald ein Bild angeklickt wird, es ein border bekommt. Klickt man ein anderes Bild an, soll das neue Bild den border bekommen und broder für das letzte Bild soll entfernt werden.

Ich brauche irgendwie ne function mit javascript, weiß aber nicht wie ich es realisieren soll.

Muß nicht unbedingt ein Border sein ... möchte nur daß das Bild irgendwie als markiert angezeigt wird.

Jemand ne Idee?

synaptic

du könntest ne css-klasse selected machen und dann kannste ja den classname via javascript setzen.

am besten mit jquery und
$(".classNameDeinesFarbBildes").toggleClass="selected";

Unregistriert

Hmm ... das ist mir zu hoch. da komm ich nicht nach

Pion

Naja also ich würde ganz einfach, sobald funktion xy aufgerufen wird alle border löscht (den bildern die selbe klasse oder ähnlichen geben), und das was eben gerade gewählt wird bekommt den border so wie du das schon gemacht hast

Sprich classe erstelen, for schleife | alle bilder listen | alle borderlöschen, neuen border setzen , fertig

Und das ist echt nicht schwer

probiers zeig uns deinen fortschritt,....

mfg

Grevas

HTML

<script type="text/javascript">
<!--
var allHTMLTags = new Array();


function change(theClass, clicked) {


var allHTMLTags=document.getElementsByTagName("*");


for (i=0; i<allHTMLTags.length; i++) {


if (allHTMLTags[i].className==theClass) {
allHTMLTags[i].style.border="none";
}
}
clicked.style.border='1px solid #000000'
}
-->
</script>


<img class="bla" onclick="change('bla', this);" src="colors/white.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/gray.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/yellow.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/orange.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/red.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/800.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/lightgreen.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/green.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/ff00cc.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/pink.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/lightblue.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/blue.GIF" />
<img class="bla" onclick="change('bla', this);" src="colors/black.GIF" />

Alles anzeigen

wäre eine Variante.

Unregistriert

Bestens, das sieht sehr gut aus Grevas. Danke.

Was aber wenn ich 2 Mal die gleichen Farben, 1 Mal für die Schriftfarbe und 1 Mal für die Hintergrundfarbe anbieten will? Ich habe bei der zweiten Liste die class-namen verändert aber das scheint nicht zu funktionieren.

Pion

verbesserungsanregungen:

1.

allHTMLTags=document.getElementsByTagName("*");

kann man auch gleich die classe abfragen so spart man es sich alle tags abfragen + die if

synaptic

na deswegen hab ich jquery genommen.... aber wayne, ihr macht das schon

Grevas

Ganz ehrlich: ich hab bei google nachgeschaut wie ich mit JS alle klassen gleichzeitig ansprechen kann und das kam dabei raus , persönlich würd ich das über eine globale Variable machen die gesetzt wird (last_used z.B.).

synaptic, ja es geht bestimmt einfacher mit jquery, aber da nehm ich für sowas doch lieber ein script das nur paar kb hat statt son oschi , ist n ziemlicher "overkill" imo.

/P.S.
@Unregistriert
post doch einfach mal was du da gemacht hast, das script ist momentan ja nur für ein border...
Aber jetzt spontan: du musst die class UND den text beim aufruf ändern, kann ja sein, dass du das übersehen hast.

Pion

Zitat von synaptic

na deswegen hab ich jquery genommen.... aber wayne, ihr macht das schon

Bin kein jquery fan, finde das total überladen und langsam, kann man ja auch alles selber bauen (wenn man nciht faul ist^^)

aber ich glaube das wird offtopic:D wollts nur mal loswerden

Unregistriert

Zitat von Grevas

post doch einfach mal was du da gemacht hast

so siehts bei mir aus:

Code

...
<script type="text/javascript">
<!--
var allHTMLTags = new Array();


function change(theClass, clicked) {


var allHTMLTags=document.getElementsByTagName("theClass");


for (i=0; i<allHTMLTags.length; i++) {


allHTMLTags[i].style.border="none";
}
clicked.style.border='1px solid #000000'
}
-->
</script>
</head>
<body style="background-image: url('fv.gif');">
<span style="color: #800;"><br />Background Color</span><br />
<img class="select" onclick="change('select', this);" src="colors/white.GIF" />
<img class="select" onclick="change('select', this);" src="colors/gray.GIF" />
<img class="select" onclick="change('select', this);" src="colors/yellow.GIF" />
<img class="select" onclick="change('select', this);" src="colors/orange.GIF" />
<img class="select" onclick="change('select', this);" src="colors/red.GIF" />
<img class="select" onclick="change('select', this);" src="colors/800.GIF" />
<img class="select" onclick="change('select', this);" src="colors/lightgreen.GIF" />
<img class="select" onclick="change('select', this);" src="colors/green.GIF" />
<img class="select" onclick="change('select', this);" src="colors/ff00cc.GIF" />
<img class="select" onclick="change('select', this);" src="colors/pink.GIF" />
<img class="select" onclick="change('select', this);" src="colors/lightblue.GIF" />
<img class="select" onclick="change('select', this);" src="colors/blue.GIF" />
<img class="select" onclick="change('select', this);" src="colors/black.GIF" />


<span style="color: #800;"><br />Font Color</span><br />
<img class="sel" onclick="change('sel', this);" src="colors/white.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/gray.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/yellow.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/orange.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/red.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/800.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/lightgreen.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/green.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/ff00cc.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/pink.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/lightblue.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/blue.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/black.GIF" />
...

Alles anzeigen

synaptic

also ich find das is an sich echt nen parade-beispiel für jquery, weils mit nem anständigen selector echt am einfachsten is und man hat nich in jedem verschissenen image-tag die ganzen kack eventhandler stehen...

Pion

var allHTMLTags=document.getElementsByTagName("theClass");

Ist falsch, theClass ist eine KLasse und und kein Tag, <xy></xy<- ist ein tag

Edit:

Damit wir zu nem ende kommen:

verwende also stattdessen : http://www.dustindiaz.com/getelementsbyclass/

Die Funktion gibt es im JS nicht also muss diese umschreibung nehmen

mfg

Grevas

Is recht, warum veränderst du da etwas? x) also hab deine ganzen imgs grad in die testseite eingespeist - ich kann aufjedenfall in beiden listen was auswählen (dass nicht beide gelöscht werden sollte klar sein, sind immerhin 2 verschiedenen klassen... wenn von beiden nur 1 auswählbar sein soll, musst du halt die selbe klasse benutzen)

Eigentlich weiß ich gar nicht was du jetzt noch damit erreichen willst o.O, hast nur irgendwas von schrift- & hintergrundfarbe erzählt, aber nichts genaues.

Unregistriert

Ah sorry, mein Fehler ... ich war grad bisschen am experimentieren.
Hab das theClass wieder mit * umgetauscht aber dabei kann bei beiden Listen nur eine Farbe ausgewählt werden.

So sieht bei mir die Grafik aus, damit man sich auch ungefähr vorstellen kann was ich bezwecken will:
[Blockierte Grafik: http://i37.tinypic.com/2celzxh.png]

Grevas

Code? ... Bitte...

Bei mir gehts nämlich, siehe Bild.

/p.s. oder willst du 2 Sachen auswählen können bei einer Liste?

Shyne

Hmm ... kannst du mal deinen code zeigen Grevas?

Pion

Ich wette du hast eine if wie die hier widda vergessen:

if (allHTMLTags[i].className==theClass) {
allHTMLTags[i].style.border="none";

}

Grevas

Der Code ist immer noch der gleiche...

HTML

<script type="text/javascript">
<!--
var allHTMLTags = new Array();


function change(theClass, clicked) {


var allHTMLTags=document.getElementsByTagName("*");


for (i=0; i<allHTMLTags.length; i++) {


if (allHTMLTags[i].className==theClass) {




allHTMLTags[i].style.border="none";
}
}
clicked.style.border='1px solid #000000'
}
-->
</script>


<img class="select" onclick="change('select', this);" src="colors/white.GIF" />
<img class="select" onclick="change('select', this);" src="colors/gray.GIF" />
<img class="select" onclick="change('select', this);" src="colors/yellow.GIF" />
<img class="select" onclick="change('select', this);" src="colors/orange.GIF" />
<img class="select" onclick="change('select', this);" src="colors/red.GIF" />
<img class="select" onclick="change('select', this);" src="colors/800.GIF" />
<img class="select" onclick="change('select', this);" src="colors/lightgreen.GIF" />
<img class="select" onclick="change('select', this);" src="colors/green.GIF" />
<img class="select" onclick="change('select', this);" src="colors/ff00cc.GIF" />
<img class="select" onclick="change('select', this);" src="colors/pink.GIF" />
<img class="select" onclick="change('select', this);" src="colors/lightblue.GIF" />
<img class="select" onclick="change('select', this);" src="colors/blue.GIF" />
<img class="select" onclick="change('select', this);" src="colors/black.GIF" />


<span style="color: #800;"><br />Font Color</span><br />
<img class="sel" onclick="change('sel', this);" src="colors/white.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/gray.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/yellow.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/orange.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/red.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/800.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/lightgreen.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/green.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/ff00cc.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/pink.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/lightblue.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/blue.GIF" />
<img class="sel" onclick="change('sel', this);" src="colors/black.GIF" />

Alles anzeigen

Unregistriert

Zitat von Pion

Ich wette du hast eine if wie die hier widda vergessen:

if (allHTMLTags[i].className==theClass) {
allHTMLTags[i].style.border="none";

}

lol ... ganz richtig. Ich hab mich halt bisschen verwirren laßen, weil du ja sagtest:

Zitat von Pion

verbesserungsanregungen:

1.

allHTMLTags=document.getElementsByTagName("*");

kann man auch gleich die classe abfragen so spart man es sich alle tags abfragen + die if

Aber danke für den Hinweis. Jetzt aber ne weitere Frage: Das alles befindet sich bei mir in einem <form>. Ich möchte den Wert der ausgewählten Farben an einem PHP-Script zur Auswertung weiterleiten. Ich nehme an daß ich die beiden markierten Farben erstmal als Variablen festlegen muß und diese dann irgendwie weitergeben muß aber wie genau soll das funktionieren?