• Hallo Besucher!

    Du bist neu im Forum? Dann registriere dich hier, um Diskussionen beizutreten oder eigene Themen zu erstellen. Für die Registrierung ist es erforderlich, dass du einen Spielaccount bei Die Stämme hast.

    Andernfalls kannst du dich hier direkt einloggen.

    Falls du dein Passwort vergessen hast, kannst du hier ein neues Passwort anfordern.

Javascript: Bilder spiegeln, Denkfehler?!

DeletedUser

Gast
Ich möchte mit Javascript Bilder spiegeln, sowohl horizontal als auch vertikal.
Es klappt auch schon einigermaßen, nur habe ich beim letzten (siehe Quellcode) i-wie einen Fehler, aber komme nicht darauf woran es liegt.
Kann mir vielleicht jemand helfen?
HTML:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
//<![CDATA[

//]]>
</script>
<style type="text/css">
/* <![CDATA[ */
body {
  background:#5f9ea0;
  }

.imagebox {
  background-image: url(http://www.shooter-szene.de/albums/google_logos/4th_birthday.gif);
  height: 110px;
  width: 1px;
  margin: 0px;
  padding: 0px;
  float: left;
  background-position: 1px 0px;
  }

.imagebox_2 {
  background-image: url(http://www.shooter-szene.de/albums/google_logos/4th_birthday.gif);
  height: 1px;
  width: 276px;
  margin: 0px;
  padding: 0px;
  float: left;
  background-position: 1px 0px;
  }


/* ]]> */
</style>
<title>Bilder drehen</title>
</head>
<body>

<div class="imagebox" style="width:276px;"></div>
<p style="clear: both;"></p>
<br />
<script type="text/javascript">
for(var i=0;i<276;i+=1)
  {
  document.write('<div class="imagebox" style="background-position: '+i+'px 0px"><\/div>\n');
  }
</script>

<p style="clear: both;"></p>
<br />
<script type="text/javascript">
for(var i=273;i>0;i-=1)
  {
  document.write('<div class="imagebox" style="background-position: '+i+'px '+(i/6)+'px"><\/div>\n');
  }
</script>

<p style="clear: both;"></p>
<br />

<script type="text/javascript">
for(var i=0;i<110;i+=1)
  {
  document.write('<div class="imagebox_2" style="background-position: 0px '+i+'px"><\/div>\n');
  }
</script>

</body>
</html>
 

DeletedUser

Gast
Ich möchte mit Javascript Bilder spiegeln, sowohl horizontal als auch vertikal.
Es klappt auch schon einigermaßen, nur habe ich beim letzten (siehe Quellcode) i-wie einen Fehler, aber komme nicht darauf woran es liegt.
Kann mir vielleicht jemand helfen?
HTML:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<script type="text/javascript">
//<![CDATA[

//]]>
</script>
<style type="text/css">
/* <![CDATA[ */
body {
  background:#5f9ea0;
  }

.imagebox {
  background-image: url(http://www.shooter-szene.de/albums/google_logos/4th_birthday.gif);
  height: 110px;
  width: 1px;
  margin: 0px;
  padding: 0px;
  float: left;
  background-position: 1px 0px;
  }

.imagebox_2 {
  background-image: url(http://www.shooter-szene.de/albums/google_logos/4th_birthday.gif);
  height: 1px;
  width: 276px;
  margin: 0px;
  padding: 0px;
  float: left;
  background-position: 1px 0px;
  }


/* ]]> */
</style>
<title>Bilder drehen</title>
</head>
<body>

<div class="imagebox" style="width:276px;"></div>
<p style="clear: both;"></p>
<br />
<script type="text/javascript">
for(var i=0;i<276;i+=1)
  {
  document.write('<div class="imagebox" style="background-position: '+i+'px 0px"><\/div>\n');
  }
</script>

<p style="clear: both;"></p>
<br />
<script type="text/javascript">
for(var i=273;i>0;i-=1)
  {
  document.write('<div class="imagebox" style="background-position: '+i+'px '+(i/6)+'px"><\/div>\n');
  }
</script>

<p style="clear: both;"></p>
<br />

<script type="text/javascript">
for(var i=0;i<110;i+=1)
  {
  document.write('<div class="imagebox_2" style="background-position: 0px '+i+'px"><\/div>\n');
  }
</script>

</body>
</html>

Okay, erstmal sehr interessant, auf was fuer komische Ideen man kommen kann.. (So mithilfe von Javascript Bilder zu spiegeln... weird!)... Aber naja, nachdem ichs mir eben angeschaut hab, sehr leicht zu verstehen... Nun lass uns gemeinsam ueberlegen, wie hast du des mit den ersten 2 Spiegelungen gemacht? Du hast ganz viele Bilder NEBENeinander gesetzt... Dafuer das float:left im Style... Nun moechtest du aber Bilder UNTEReinander setzen... Da ist dann das float:left irgendwie Fehl am Platz... Wie man auch schoen sieht wenn man den Browser zusammenschiebt... Sobald das Fenster so breit ist wie das eigentliche Bild ist die letzte Darstellung naemlich korrekt. Also einfach bei "imagebox_2" float:left wegmachen und es sollte funktionieren... :)

lG
Zafara
 

DeletedUser

Gast
Danke, funktioniert natürlich
Wie konnte ich das vergessen *KopfGegenMonitorSchlag*

btw dank dem Google Chrome kann man es jetzt auch einsetzten, ohne Sekunden lang warten zu müssen^^
 

DeletedUser

Gast
Danke, funktioniert natürlich
Wie konnte ich das vergessen *KopfGegenMonitorSchlag*

btw dank dem Google Chrome kann man es jetzt auch einsetzten, ohne Sekunden lang warten zu müssen^^

mein ff3 hat nicht dran geladen... war sofort da. :)
 

DeletedUser

Gast
vieleich sollte man bilder nicht mit javaskript drehn sondern mit nem Grafikprogramm? ich glaub das könnt etwas shneller gehn :)
 

DeletedUser24674

Gast
vieleich sollte man bilder nicht mit javaskript drehn sondern mit nem Grafikprogramm? ich glaub das könnt etwas shneller gehn :)

Aha, sagen wir du hast 200 Bilder - Dreh' die doch bitte mal schnell von hand. Halt einfach die klappe wenn du nichts sinnvolles zu sagen hast!

/sorry4spam
 

DeletedUser

Gast
Aha, sagen wir du hast 200 Bilder - Dreh' die doch bitte mal schnell von hand. Halt einfach die klappe wenn du nichts sinnvolles zu sagen hast!

/sorry4spam

Vll sollte man die Bilder per Batch drehen lassen (was bestimmt geht)... Und ansonsten eben php... Vll kommt ja irgendwann mal nen Javascript Befehl dazu der die Bilder so drehen kann (was sicherlich nicht wirklich schwer zu realisieren ist... ie hat sowas ja auch schon seit Jahren...)...
Whatever, Problem ist doch geloest, also wo ist das Problem ? :p
 

DeletedUser

Gast
ich würde da mal irfanview vorschlagen...
dort geht die batch-konvertierung ziemlich flott
 

DeletedUser

Gast
Um die Diskussion zu beenden:
Ich brauche das für eine Diashow (die Offline nur mit HTML und Javascript) funktionieren soll, ohne dass man andere Programme dazu benutzen muss.
Das ganze soll dann so werden, dass das angezeigte Bild gespiegelt wird, ungefähr so: http://www.emich.be/images/miscold/metro.jpg
Ich weiß, dass man das Serverseitig oder mit Programmen machen könnte, aber das ist nicht mein Ziel, mein Ziel ist eine Javascript Diashow, die sich auf jeden Ordner anwenden lässt, der Bilder in einem bestimmten Muster enthält.
 

DeletedUser

Gast
Ich würd dir dafür PHP empfehlen, mit JS is das nur unnötiger Aufwand -und dazu vermutlich auch noch lahmer.
Mit Imagick kriegst du diesen Effekt mit ~15 Zeilen, für GD hab ich in meiner Klasse ne Methode, bei Interesse kannste dich ja per PN melden.

MfG
dispy
 

DeletedUser

Gast
Um die Diskussion zu beenden:
Ich brauche das für eine Diashow (die Offline nur mit HTML und Javascript) funktionieren soll, ohne dass man andere Programme dazu benutzen muss.
Das ganze soll dann so werden, dass das angezeigte Bild gespiegelt wird, ungefähr so: http://www.emich.be/images/miscold/metro.jpg
Ich weiß, dass man das Serverseitig oder mit Programmen machen könnte, aber das ist nicht mein Ziel, mein Ziel ist eine Javascript Diashow, die sich auf jeden Ordner anwenden lässt, der Bilder in einem bestimmten Muster enthält.
;-)
 
Oben