Bilder "nachrutschen" lass in Javascript

C

Cokefan

Member
29 Februar 2008
11
0
Hi

Ich hab folgendes Problem.

Ich hab 40 Kleine Bildchen (40*40) die in Spalten und Zeilen geteilt sind.
Und zwar 8 Zeilen und 5 Spalten.
Also 5 Bilder nebeneinander und jeweils 8 Übereinander.
Ich will die Bilder wegklicken mit der Maus und die darüber liegenden Bilder nachrutschen lassen.
Zum wegklicken hab ich bereits folgende Funktion

Code: 
<IMG src="bild.JPG" onclick="this.src='blank.JPG'">

WIe kann ich nun die Bilder die darüber liegen nach unten rutschen lassen?

Also wie bei solchen Spielern wo man mehrere Farbsteine wegklicken muss.
Also sowas wie hier: https://www.de.zylom.com/game/600/super-collapse-3.html

Nur mit von mir vorgegeben Bildern.Die bilder Sollen nur nachrutschen.
Das ganze wird über Tabellenspalten realisiert da ich glaube das es so am einfachsten ist eine ganze Spalten nachrutschen zu lassen.

Jemand ne Idee?Über google find ich nichts passendes.

Edit: Die FUnktion zum wegklicken müsste auch ersetz werden da das Bild dort nur durch ein leeres Bild gleicher grösse ersetz wird.Aber ich denke mal ich kann auch ein 1*1 Pixel Bild draus machen.Das sollte nicht das Problem sein.Nur das nachrutschen ist das problem.
 
Johnson schrieb:
Hi,

vielleicht helfen dir hier die CombinationEffects von scriptaculous weiter.

Gruß
Zum Vergrößern anklicken....

Also die 2 Effekte die für mich interessant sein könnten sind Switch.Off und effect.drop.out
Schade das da kein Scriptbeispiel ist.
Also ne Demo ist ja da aber nicht das komplette Script dafür und das Script im Quelltext geht nicht :(
Aber schonmal gut zu wissen das es nur ein 3 Zeilen Script ist.Jetzt muss ich es nur noch rauskriegen :(

Kann mir da jemand ein Beispielscript geben?

Bsp:
Die Buchstaben symbolisieren jetzt mal Bilder

A
B
C
D
E

So übereinander.Wenn ich jetzt Auf Bild C klicke sollten A+B 1 nach unten rutschen.
Alternativ auch ein Scriptbeispiel für nur 2 Bilder übereinander.Das vergrössern krieg ich dann hin :)
 
Also wenn alles nach oben rutschen soll nachdem Du auf C geklickt hast, dann sollte es auch ein style="display:none;" auf das jeweilige td der Tabelle tun.

Wenn ich mich da jetzt nicht irre müsste jeder Browser dann alle nachfolgenden dionge der Tabelle nach oben rutschen. Problem dabei ist beim letzten td muss das display auf das tr gehen.
 
strolch00 schrieb:
Also wenn alles nach oben rutschen soll nachdem Du auf C geklickt hast, dann sollte es auch ein style="display:none;" auf das jeweilige td der Tabelle tun.

Wenn ich mich da jetzt nicht irre müsste jeder Browser dann alle nachfolgenden dionge der Tabelle nach oben rutschen. Problem dabei ist beim letzten td muss das display auf das tr gehen.
Zum Vergrößern anklicken....

Halt die sollen nach unten Rutschen ;)

Oh jemine das wird immer komplizierter :D
Ist es nicht möglich das Script in einer Spalte 5 mal übereinander zu legen und wenn man dann eins klickt rutschen die nach?Denn auf der oben geannten Seite von Jonson sind die Demos alle so das der Platz den die Demo einnimmt verschwindet wenn man draufklickt.Genauso brauch ich das auch nur halt mit mehr als 1 Bild.
Aber mit dem Codeschnipsel kann ich nichts anfangen :(
Das bauch ich: https://wiki.script.aculo.us/scriptaculous/show/Effect.SwitchOff aber mit dem Codeschnipsel
Code: 
Effect.SwitchOff('id_of_element');
komm ich nicht klar.Ich weiss nicht was noch dazu gehört.
Und im QUelltext find ich nur das
Code: 
<div class="demo">
      <div class="example" id="demo-effect-appear" onclick="Effect. SwitchOff(this)">
        <img src="https://script.aculo.us/images/demo-logo.gif" alt="" />
aber das funktioniert auch nicht.Irgendwas fehlt da noch aber ich weiss absolut nicht was.
 
so das ganze bringt mir leider nicht viel da es nicht erweiterbar ist auf mehrere Bilder.Denn es verschwinden alle Bilder.

Code: 
<head>

	<script src="src/global.js" type="text/javascript"></script>
	<script src="lib/prototype.js" type="text/javascript"></script>

	<script src="src/scriptaculous.js" type="text/javascript"></script>

</head>

<table width="100%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td width="100%">
<div class="demo">
      <div class="example" id="demo-effect-appear" onclick="Effect. SwitchOff(this)">
        <img src="grafiken/birne.JPG" alt="" />
<div class="demo">
      <div class="example" id="demo-effect-appear" onclick="Effect. SwitchOff(this)">
        <img src="grafiken/birne.JPG" alt="" />
<div class="demo">
      <div class="example" id="demo-effect-appear" onclick="Effect. SwitchOff(this)">
        <img src="grafiken/birne.JPG" alt="" />
<div class="demo">
      <div class="example" id="demo-effect-appear" onclick="Effect. SwitchOff(this)">
        <img src="grafiken/birne.JPG" alt="" />
<div class="demo">
      <div class="example" id="demo-effect-appear" onclick="Effect. SwitchOff(this)">
        <img src="grafiken/birne.JPG" alt="" /></td>
</tr>
</table>

Ich find auch nichts wo ich verschiedene ID´s zuweisen kann das jedes Bild eine eigene ID bekommt.
 
Klar, du musst jedem Block-Element um das Bild herum eine eindeutige id zuweisen.
this stellt dabei jeweils einen "Verweis" auf das entsprechende Block-Element, indem z.B. das onclick-Event stattfindet, dar.

edit:

Du kannst auch einfach im DOM das entsprechende Elternelement (Zelle) löschen.
Bei mehrspaltigen Tabellen müsste man da noch ein kleines Workaround einbauen, dass die anderen nachrutschen.
Ich bin mir auch nicht wirklich sicher, ob Tabellen für diesen Anwendungsfall wirklich gedacht sind, vielleicht könnte sich da ein HTML-Spezialist dazu äußern?
 
Zuletzt bearbeitet:
ich hab jetzt mal rumprobiert.wenn ich jedes bild in eine eigene zelle sperre dann geht jedes bild einzeln aber die die darüber liegen rutschen nicht nach unten sondern bleiben wo sie sind.
soweit war ich vorher auch schonmal :(
die doofen dinger sollen doch einfach nur nach unten rutschen.das kann doch nich so schwer sein :(
 
Kannst du mir villeicht ein konkretes Beispiel geben mit 3 bildern übereinander?
So das wenn ich das mitlere anklicke das obere nach unten rutscht und nicht alle 3 verschwinden??Bin hier voll am verzweifeln.Bin am rumprobieren wie ein blöder aber ich krieg es einfach nicht hin.

Code: 
<div class="demo1">
<div class="example" id="demo-effect-appear1" onclick="Effect. SwitchOff(this)">
<img src="grafiken/birne.JPG" alt="" />

<td width="33%"><div class="demo1">
<div class="example" id="demo-effect-appear1" onclick="Effect. SwitchOff(this)">
<img src="grafiken/birne.JPG" alt="" />

<td width="33%"><div class="demo1">
<div class="example" id="demo-effect-appear1" onclick="Effect. SwitchOff(this)">
<img src="grafiken/birne.JPG" alt="" />

Wie muss es aussehen das es so funktioniert wie ich es bräuchte?
 
Cokefan schrieb:
Kannst du mir villeicht ein konkretes Beispiel geben mit 3 bildern übereinander?
So das wenn ich das mitlere anklicke das obere nach unten rutscht und nicht alle 3 verschwinden??Bin hier voll am verzweifeln.Bin am rumprobieren wie ein blöder aber ich krieg es einfach nicht hin.

Code: 
<div class="demo1">
<div class="example" id="demo-effect-appear1" onclick="Effect. SwitchOff(this)">
<img src="grafiken/birne.JPG" alt="" />

<td width="33%"><div class="demo1">
<div class="example" id="demo-effect-appear1" onclick="Effect. SwitchOff(this)">
<img src="grafiken/birne.JPG" alt="" />

<td width="33%"><div class="demo1">
<div class="example" id="demo-effect-appear1" onclick="Effect. SwitchOff(this)">
<img src="grafiken/birne.JPG" alt="" />

Wie muss es aussehen das es so funktioniert wie ich es bräuchte?
Zum Vergrößern anklicken....

Mittlerweile bin ich zu dem Entschluss gekommen, dass das mit Listen viel besser geht.

Code: 
<ul>
<li id="pic1" onclick="Effect. SwitchOff(this)">
<img src="grafiken/birne.JPG" alt="" />
</li>

<li id="pic2" onclick="Effect. SwitchOff(this)">
<img src="grafiken/birne.JPG" alt="" />
</li>

<li id="pic3" onclick="Effect. SwitchOff(this)">
<img src="grafiken/birne.JPG" alt="" />
</li>
</ul>

Und damit du nicht tausendmal das onclick-Event in den Source reinschreiben musst, empfiehlt es sich, der gesamten liste noch eine id zu geben, diese zu beobachten und prüfen welches element angeglickt wurde. Funktionieren sollte es aber auch so wie oben ;)
 
naja bei listen haben ich ja dann die punkte vorher dran ;)

ich hab es mitlerweile mit <div id="1"></div> gelöst.jetzt geht es fast so wie ich will.die rutschen zusammen aber nicht nach unten.aber geht schon so für meinen verwendungszweck.
 
Gib dem <td> doch einfach ein vertical-align: bottom, dann dürften die auch nach unten rutschen.
 
Achso, sorry. Per CSS-Angaben musst Du das machen, also:
HTML: 
<td width="20%" style="vertical-align: bottom;">
 
Wenn schon, denn schon ;)

PHP: 
<td style="width: 20%; vertical-align: bottom;">BILD</td>

Greetz

paddya
 
Du musst dich einloggen oder registrieren, um hier zu antworten.
Zurück
Oben