JS bilder

[schnua]

Hallo..

ich bin gerade am programmieren einer Homepage und bin jetzt am Punkt eine Gallerie für meine Fotos zu programmieren.
Jetzt habe ich ein einfaches Script gefunden (auf selfhtml) dass ich ein bisschen umschreiben möchte aber einfach keine Idee habe wie
Es soll wenn man auf ein Bild klickt das nächste Kommen (wie bei Facebook)
Dass hab ich.. was muss ich da noch hinzufügen

<script type="text/javascript">

var b = new Array();
b[0] = new Image(); b[0].src = "work/works/mittel/bachus.jpg";
b[1] = new Image(); b[1].src = "work/works/mittel/cocktail.jpg";
b[2] = new Image(); b[2].src = "work/works/mittel/berge.jpg";
b[3] = new Image(); b[3].src = "work/works/mittel/puppen.jpg";
b[4] = new Image(); b[4].src = "work/works/mittel/text.jpg";
var i = 0;
function klick () {
  if (i > 4)
    i = 0;

}
</script>

<img src="work/works/mittel/bachus.jpg" alt="bachus">

Mit freundlichen Grüßen

schnua

[EKKi]

Mahlzeit schnua,

ich bin gerade am programmieren einer Homepage

Das glaube ich nicht ... und zwar ganz einfach deshalb, weil HTML keine Programmiersprache ist. Darüber hinaus wirst Du vermutlich außer der Homepage auch noch weitere Seiten erstellen, oder?

Tu Dir selbst und Deinen Lesern einen Gefallen und informiere Dich über die von Dir verwendeten Fachausdrücke - damit Du sie dann auch korrekt benutzt.

und bin jetzt am Punkt eine Gallerie für meine Fotos zu programmieren.

Was ist eine "Gallerie"?

Jetzt habe ich ein einfaches Script gefunden (auf selfhtml)

Lass mich raten: Du hast keine Lust, die Grundlagen von Javascript zu lernen und suchst Dir deshalb überall halbwegs passende Code-Schnipsel zusammen? Das, was Du machen willst, ist nämlich eigentlich mehr als trivial ...

dass ich ein bisschen umschreiben möchte aber einfach keine Idee habe wie

Dann solltest Du Dir die o.g. Grundlagen aneignen.

Es soll wenn man auf ein Bild klickt das nächste Kommen (wie bei Facebook)
Dass hab ich.. was muss ich da noch hinzufügen

Du willst also, dass <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=beim Klick> <http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=auf eine Grafik> <http://de.selfhtml.org/javascript/objekte/images.htm#src@title=die aktuell dargestellte Datei> durch die jeweils nächste im http://de.selfhtml.org/javascript/objekte/array.htm@title=Array ersetzt wird?

MfG,
EKKi

[Steffen]

Hi,

wieso so unfreundlich und wenig hilfreich.
Dein Beitrag ist echt umsonst!

Grüße

• Steffen

[Gunnar Bittersmann]

@@Steffen:

nuqneH

wieso so unfreundlich und wenig hilfreich.

Inwiefern war

Du willst also, dass <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=beim Klick> <http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=auf eine Grafik> <http://de.selfhtml.org/javascript/objekte/images.htm#src@title=die aktuell dargestellte Datei> durch die jeweils nächste im http://de.selfhtml.org/javascript/objekte/array.htm@title=Array ersetzt wird?

wenig hilfreich?

Dein Beitrag ist echt umsonst!

Sagen wir: kostenlos.

Qapla'

[schnua]

Mahlzeit schnua,

Das glaube ich nicht ... und zwar ganz einfach deshalb, weil HTML keine Programmiersprache ist. Darüber hinaus wirst Du vermutlich außer der Homepage auch noch weitere Seiten erstellen, oder?

Tu Dir selbst und Deinen Lesern einen Gefallen und informiere Dich über die von Dir verwendeten Fachausdrücke - damit Du sie dann auch korrekt benutzt.

Da ist aber wer ned gut drauf.. musst ja nichts schreiben wenns dich so angeht wie ich meine Fragen formuliere. Un ja ich will eine Homepage erstellen, das Grundgerüst mi HTML erstellen, es schön mit CSS formatieren und dann mit JS ein paar Specials einbauen.

Was ist eine "Gallerie"?

»»Oje ein kleiner Tippfehler .. wie schlimm

Lass mich raten: Du hast keine Lust, die Grundlagen von Javascript zu lernen und suchst Dir deshalb überall halbwegs passende Code-Schnipsel zusammen? Das, was Du machen willst, ist nämlich eigentlich mehr als trivial ...

Danke habe Javascript schon gelernt und ich habe auch lange überlegt und versucht selbst draufzukommen.. habs dann aber leider nicht geschafft. Worauf sich schließen lässt, da ich ja jetzt hier was gepostet hab und das nur mache wenn ich nicht mehr weiter weiß.

Es soll wenn man auf ein Bild klickt das nächste Kommen (wie bei Facebook)
Dass hab ich.. was muss ich da noch hinzufügen

Du willst also, dass <http://de.selfhtml.org/javascript/sprache/eventhandler.htm#onclick@title=beim Klick> <http://de.selfhtml.org/javascript/sprache/objekte.htm#this@title=auf eine Grafik> <http://de.selfhtml.org/javascript/objekte/images.htm#src@title=die aktuell dargestellte Datei> durch die jeweils nächste im http://de.selfhtml.org/javascript/objekte/array.htm@title=Array ersetzt wird?

genau so ist es..  :)

[Don P]

Hallo,

Danke habe Javascript schon gelernt

Ok, das da:

var b = new Array();  
b[0] = new Image(); b[0].src = "work/works/mittel/bachus.jpg";  
b[1] = new Image(); b[1].src = "work/works/mittel/cocktail.jpg";  
b[2] = new Image(); b[2].src = "work/works/mittel/berge.jpg";  
b[3] = new Image(); b[3].src = "work/works/mittel/puppen.jpg";  
b[4] = new Image(); b[4].src = "work/works/mittel/text.jpg";  

ist zwar nicht falsch, aber es geht besser:

1. Wenn man vorher schon weiß, wieviele Elemente ein Array haben wird (die Anzahl der Bilder), ist es günstiger, wenn man das beim Erzeugen gleich mit angibt. Entweder so: var b = new Array(5); oder bei überschaubarer Anzahl mit gleichzeitiger Befüllung auch literal:

  
var pfad = 'work/works/mittel/', b = ['bachus.jpg', 'cocktail.jpg', 'berge.jpg', 'puppen.jpg', 'text.jpg'];  

2. Wenn man mehrfach die gleiche Aktion ausführt, ist es besser, diese in einer Schleife abzuarbeiten:

for (var i=0; b[i]; i=i+1) {  
  
  var img = new Image(); img.src = pfad + b[i]; b[i] = img;  
}  

Gruß, Don P

[schnua]

Entweder so: var b = new Array(5); oder bei überschaubarer Anzahl mit gleichzeitiger Befüllung auch literal:

var pfad = 'work/works/mittel/', b = ['bachus.jpg', 'cocktail.jpg', 'berge.jpg', 'puppen.jpg', 'text.jpg'];

> 2. Wenn man mehrfach die gleiche Aktion ausführt, ist es besser, diese in einer Schleife abzuarbeiten:  
>   
> ~~~javascript

for (var i=0; b[i]; i=i+1) {  

>   
>   var img = new Image(); img.src = pfad + b[i]; b[i] = img;  
> }  
> 

Ich raffs irgendwie nicht!
Ich versteh noch immer nicht ganz wie ich dass dann mit der Ausgabe machen soll. Ich hab mir gedacht ich leg um die Schleife eine Function und ruf die dann ima HTML-Teil <img onClick="klick()" > auf?! Aber da lieg ich wohl falsch.

[Don P]

Hallo,

Ich hab mir gedacht ich leg um die Schleife eine Function und ruf die dann ima HTML-Teil <img onClick="klick()" > auf?! Aber da lieg ich wohl falsch.

Nicht komplett falsch, nur ein bisschen.
Bei <img onClick="klick()">
wegen------------------^^
die Funktion einmal ausgeführt und der oncklick-Handler bekommt ihr Ergebnis zugewiesen (wahrscheinlich gibt sie ja gar keins zurück).
Du musst dem Handler die Funktion selbst zuweisen (bzw. eine Referenz darauf), nicht ihr Egrebnis:
<img onClick="klick">

Gruß, Don P

[Gunnar Bittersmann]

@@Don P:

nuqneH

Aber da lieg ich wohl falsch.
Nicht komplett falsch, nur ein bisschen.

Nicht komplett schnua, nur ein bisschen du.

Vermutlich trennst du HTML und JavaScript fein säuberlich (gut so!), da kann nicht mehr benötigtes Wissen schonmal abhanden kommen oder zumindest durcheinander geraten.

Du musst dem Handler die Funktion selbst zuweisen (bzw. eine Referenz darauf), nicht ihr Egrebnis:

Das gilt bei
document.getElementById("foo").onclick = klick;

nicht aber bei

<img onClick="klick">

„Hinter dem Istgleichzeichen notieren Sie - in Anführungszeichen, eine JavaScript-Anweisung.“ [<http://de.selfhtml.org/javascript/sprache/eventhandler.htm#allgemeines@title=SELFHTML: Eventhandler>]

„Eine Anweisung ist zum Beispiel: […] wenn Sie eine Seite selbst definierte Funktion oder eine Objektmethode aufrufen“ [<http://de.selfhtml.org/javascript/sprache/regeln.htm#anweisungen@title=SELFHTML: Anweisungen>]

„[…] dann definieren Sie sich dazu am besten in einem JavaScript-Bereich eine Funktion und rufen hinter dem Istgleichzeichen diese Funktion auf, also z.B. onclick="Umrechnen()".“ [<http://de.selfhtml.org/javascript/sprache/eventhandler.htm#allgemeines@title=SELFHTML: Eventhandler>]

Richtig ist
<img onclick="[code lang=javascript]klick();">[/code]

(Von fehlenden @src und @alt natürlich abgesehen.)

Qapla'

[Don P]

Hallo,

@@Don P:

nuqneH

Aber da lieg ich wohl falsch.
Nicht komplett falsch, nur ein bisschen.

Nicht komplett schnua, nur ein bisschen du.

Vermutlich trennst du HTML und JavaScript fein säuberlich (gut so!), da kann nicht mehr benötigtes Wissen schonmal abhanden kommen oder zumindest durcheinander geraten.

Anscheinend. Habe wirklich schon lange kein JavaScript mehr in HTML-Tags notiert. Die Zeiten, als ich noch HTML, CSS, JavaScript und serverseitigen Code in einem heillosen Durcheinander schreib, sind zum Glück vorbei.

Gruß, Don P

[ChrisB]

Hi,

Da ist aber wer ned gut drauf.. musst ja nichts schreiben wenns dich so angeht wie ich meine Fragen formuliere.

Du musst nicht fragen, wenn du keine Hilfestellung willst.

(Hilfestellung dazu, wie man zielführend fragt, bekommst du hier auch gratis.)

Un ja ich will eine Homepage erstellen, das Grundgerüst mi HTML erstellen, es schön mit CSS formatieren und dann mit JS ein paar Specials einbauen.

Ja, dann mach.

Danke habe Javascript schon gelernt und ich habe auch lange überlegt und versucht selbst draufzukommen.. habs dann aber leider nicht geschafft. Worauf sich schließen lässt, da ich ja jetzt hier was gepostet hab und das nur mache wenn ich nicht mehr weiter weiß.

"Gelernt" und dann schon nach dem Befüllen einer Datenstruktur "nicht mehr weiter wissen", das passt nicht ganz zusammen.

Du willst also, dass [...]

genau so ist es..  :)

Fein, dann mach.

MfG ChrisB