[JavaScript] <img>-Tag beeinflussen
 

Hey,

ich habe bei mir auf der Seite ein img-Tag, welches per onClick-Event eine Funktion aufruft. Die Funktion erkennt, ob eine div-Box ausgeblendet ist oder nicht, und wechselt den Status jeweils. Ich will nun auch noch das Bild, angegeben als src-Option des img-Tags, verändern. Kann mir jemand folgen?

img-Tag (Hier geht es um den src-Teil):
[HTML]<img src='img/dropdown.png' onClick="expand('login_container')">[/HTML]

JavaS*****-Funktion "expand":
[HTML]function expand(which){
var is = document.getElementById(which).style.visibility;

if ( is == "hidden" ) {
document.getElementById(which).style.visibility = "visible";
}
if ( is == "visible" ) {
document.getElementById(which).style.visibility = "hidden";
}
}[/HTML]

Ich will wie gesagt, dass in der jeweiligen if-Schleife das Bild des img-Tags geändert wird, sprich dass sich der src-Pfad verändert.

Kann mir da jemand helfen?

Ich danke dir, perfekt!

EDIT
Ich habe gleich noch eine Frage. Ist es möglich, mittels einem onClick-Event eine div-Box immer weiter zu vergrößern?

Ich hatte vor, das Feld, was sich einblenden soll, von oben heraus auszurollen. Ich dachte mir, das geht mit der größe. In einer while-Schleife immer einen Pixel zur Größe dazuzählen, bis eine bestimmte Größe erreicht ist. Leider scheint der Computer zu schnell zu rechnen, um die Vergrößerung darstellen zu können. Ich habe schon mehrere Seiten Google abgegrast, ich habe es auch schon mit MooTools probiert, die bekomme ich aber nicht so abgewandelt, dass es läuft. Versteht keine Sau, den Code.

[Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

Da, die Buttons slide out und slide in der Vertical-Gruppe machen das, was ich versuche habe. Bekommt man das einfacher hin, als mit gefühlten 10 A4-Seiten Code?

schau mal hier: [Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

und gib beim filter ein "slide".

dann klick auf slideToggle(speed, callback)
und schau dir das beispiel (example) an.

mittels jquery löst man alle solche probleme recht elegant und browser-übergreifend.

Okay, das herausrollen funktioniert. Ich habe es mit dem Beispiel von jQuery gemacht. Leider gibt es ein Problem. Ich habe zwei Felder, die von zwei getrennten Buttons gesteuert werden sollen. Ein Button blendet das eine Feld ein, der andere das andere. Das jQuery-Skript erkennt den Funktionsaufruf allgemein durch den Auslöser (das HTML-Element) "button". Wie sage ich ihm, der eine Button ruft das eine, der andere Button ruft das andere?

hm. ohne den entsprechenden code kann ich nicht helfen...

allgemein:

Danke dir, das war super, du hast mir echt super geholfen!
Aber ein Problem habe ich immer noch.

Es funktioniert jetzt, dass die getrennten Buttons jeder sein eigenes Feld ansteuern. Nur sind die Felder von Anfang an eingeblendet. Die sollen ausgeblendet sein, man muss sich entscheiden, welches Feld eingeblendet werden soll. Hier sind Codeschnipsel:

Button 1 mit dazugehörigem Feld 1:
[HTML]<h1>Login <button id='b1' class='slide'></button></h1><br>
<div id='login_container'>

Inhalt des Containers[/HTML]

Button 2 mit dazugehörigem Feld 2:
[HTML]<h1>Registrieren <button id='b2' class='slide'></button></h1><br>
<div id='register_container'>

Inhalt des Containers[/HTML]

Skript-Code:
[HTML]<s*****>
$(document).ready(function() {
$("#b1").click(function () {
$("#login_container").slideToggle("slow");
});
$("#b2").click(function () {
$("#register_container").slideToggle("slow");
});
});
</s*****>[/HTML]

Natürlich habe ich alle erforderlichen Elemente eingebettet, funktioniert ja schon. Ich will nur, dass sie ab Seitenaufbau ausgeblendet sind. =)

evntl. mit

Ausblenden funktioniert so zwar, jedoch werden sie durch den Funktionsaufruf nicht eingeblendet.

Ich habe eben noch die Zeile
[HTML]$("#login_container").style.visibility("visible" );[/HTML]
vor der Animation eingefügt, also vor der Zeile mit slideToggle, aber das funktioniert auch nicht. =)

Hast du evtl. noch mehr Ideen, oder gibt es das so, wie ich es geschrieben habe, garnicht? Ich kenne dieses Format von JavaS***** zum Beispiel überhaupt garnicht, ich habe das bisher immer mit document.getElementById(""); gemacht. ^^

du musst irgendwie rausfinden welchen style slideToggle() bedient.
und dann das div im html-code entsprechend initialisieren.

dazu installier dir [Link nur für registrierte und freigeschaltete Mitglieder sichtbar. Jetzt registrieren...]

edit:
vorhin musste ich was ähnliches per jquery machen. mit style="display : none;" hats funktioniert...

Hammerhart! urga, ich bin dir echt was schuldig, danke! :-*