Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt werden

zimmermann · 12.07.2013

Guten Morgen an alle,

ich hoffe, Ihr könnt mir hier helfen.

Ich habe mir für unsere Familienseite etwas überlegt, weiß allerdings nicht genau, wie ich so etwas realisieren kann.

Also auf der Seite sollen 4 Fotos plaziert werden. und wenn man auf die Fotos draufklickt, dann soll das Foto aus der Mitte nach links oben verschoben werden. Nach der Animation soll dann eine neue Seite geladen werden.

Wie kann ich das ohne Flash realisieren?

LG

Zimmermann

Myhar · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Mit Javascript oder mit einer Kombination von CSS3 und Javascript

Nur mit JS: Du musst einen Event listener für einen um ein Bild liegenden Link definieren. Sobald der ausgeführt wird, unterdrückst du das Ausführen des Linkziels und bewegst den Link (inklusive Bild) an die bestimmte Stelle, indem du laufend die X- und Y-Koordinaten änderst. Ist der Link (+Bild) an der Stelle angekommen, rufst du das Linkziel auf.
Alternativ kannst du die Animation auch mit CSS3 realisieren, den Link darfst du dann aber trotzdem erst nach Ende der Animation aufrufen.

zimmermann · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Hmm ... erstmal vielen Dank für die Antwort. Ich denke CSS3 ist wohl eleganter, oder?
Hast Du ggf. für eine der beiden Möglichkeiten Scriptbeispiele weil ich habe echt keinen großen Plan davon ...

Myhar · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Der Großteil davon beschäftigt sich zwar mit jQuery, aber das sollte hoffentlich kein Problem darstellen.
Mit CSS3 ist es zwar eleganter, aber da findet man (ich zumindest) schwerer etwas dazu.

zimmermann · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Also über die Links bin ich nun auf eine Seite gestoßen, wodurch ist das erstmal gemacht habe:

<title>Unbenanntes Dokument</title>

<SCRIPT type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></SCRIPT>

</head>

<body>
<SCRIPT type="text/javascript">
$("#right").click(function() {
$("#content").animate(
{"left": "+=50px"},
"slow");
});
$("#left").click(function() {
$("#content").animate(
{"left": "-=50px"},
"slow");
});
</SCRIPT>

<STYLE>
#content {
background-color:#6688ff;
position:absolute;
width:100px;
height:100px;
padding:3px;
margin-top:5px;
left: 100px;
}
</STYLE>
<input type="button" id="left" value="Left"/>
<input type="button" id="right" value="Right"/>
<div id="content">Move</div>

</body>
</html>

nur irgendwie klappt da gar nix ... lol
Ich dachte mir, wenn das mit links und rechts klappt, dann kann ich das dann im zweitem schritt mit Koordinaten versuchen und dann zum schluß mich um den link kümmern ... wo ist denn hier mein `Fehler?

cythux · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

hier ein Tipp dazu

Myhar · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Erstens: Verwende die Code-Werkzeuge, um Code zu posten.
Zweitens: Fügt man deinen Code auf JSFiddle.net ein, dann funktioniert das anstandslos mit jQuery Version 1.9. Dein jQuery Code ist also für eine alte jQuery Version gedacht, mit jQuery-latest erhältst du 1.10, da wurde wohl etwas geändert, weshalb dein Code nicht mehr funktioniert.

zimmermann · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Hmm.. also irgendwie ist das nicht so meine Welt .. :/

Mit dem Magic.css ... wie kann ich das denn implementieren?

Also ich habe halt Grundlagen HTML und Grundlagen PHP aber mehr leider nicht.

cythux · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

https://github.com/miniMAC/magic hier ist alles beschrieben auf der Githubseite

Duddle · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Also ich habe halt Grundlagen HTML und Grundlagen PHP aber mehr leider nicht.

Und diese hast du dir irgendwann einmal angeeignet. Was spricht dagegen, dir die Grundlagen von JavaScript bzw. direkt jQuery anzulesen?

Es gibt genügend Tutorials für jQuery, die simple Animationen erklären. Du musst dann lediglich das Prinzip auf dein HTML anwenden, was in der Regel sehr einfach ist. Wenn du das dann hast, suchst du nach "javascript url" und lernst so, wie du die URL mit JavaScript änderst.

Duddle

zimmermann · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Also ich habe einen Ansatz gefunden, bei dem ich nun beginne, das mir anzueigenen, nur leider bekomme ich im Moment die Positionierung des Bildes nicht hin.

Das Bild steht oben links und wenn ich anklicke bewegt es sich von der Mitte bis zur Seite.

So sieht der Code nun aus:

Code:

<title>JavaScript-Test</title>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>

<style type="text/css">
  a#move_demo {
	 //* background:#fa0000; color:#fff; padding:5px; border:1px solid #000; */
	position:absolute;
	background: url(test.jpg); 
	left:550px;
	width:200px;
	height:300px;
	margin:5px;
	top: 200px;
	  }
	#demof1 {
	position:absolute;
	left:550px;
	width:200px;
	height:300px;
	margin:5px;
	top: 200px;
	  }  
	    
</style>

</head>

<body >

<div class="demo">
  <a href="#" id="move_demo" onclick="new Effect.Move(this, { x: 200, y: 0 }); return
false;"><img src="test.jpg" border="0"></a>
</div>

</body>
</html>

Als Grundlage habe ich die Javadateien von der Seite genommen:
http://madrobby.github.io/scriptaculous/effect-move/

zimmermann · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Hmm kann mir keiner Sagen, was ich da jetzt falsch mache?

Duddle · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Was passiert denn nicht wie erwartet? Laut dem CSS startet der Link (und das Bild darunter) 550 Pixel nach rechts und 200 Pixel nach unten versetzt. Dann soll es sich laut dem onclick-Code um 200 Pixel nach rechts bewegen.

Duddle

zimmermann · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Also beim Aufrufen der Datei ist das Bild oben links (das sollte allerdings mittig sein) und dann beim draufklicken ist der andere div in der mitte und fährt nach rechts.

Was ich eigentlich erreichen wollte ist, dass das Bild mittig ist nach dem aufrufen der Seite und dass es dann nach rechts fährt, wenn ich draufklicke.

Duddle · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Hast du das irgendwo online oder kannst du es in jsfiddle nachbauen?

Duddle

zimmermann · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Ja ich habe das mal auf meine Testdomain gepackt.

Also sobald Du auf das Bild klickst siehst Du, was ich mein. :/

Duddle · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Du hast das

Code:

position: "absolute";

im CSS vergessen.

Duddle

zimmermann · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Hmm.... mein CSS sieht so aus, da ist doch das absolute an beiden boxen drinnen .. wobei ich das erste bild nicht unbedingt haben muss ... also mir reicht es, wenn die box in der mitte steht und nach rechts fährt, wenn ich klicke.

Code:

<html>
<head>
<title>JavaScript-Test</title>
<script src="javascript/prototype.js" type="text/javascript"></script>
<script src="javascript/scriptaculous.js" type="text/javascript"></script>

<style type="text/css">
  a#move_demo {
	 //* background:#fa0000; color:#fff; padding:5px; border:1px solid #000; */
	position: "absolute";
	background: url(test.jpg); 
	left:550px;
	width:200px;
	height:300px;
	margin:5px;
	top: 200px;
	  }
	#demof1 {
	position: "absolute";
	left:550px;
	width:200px;
	height:300px;
	margin:5px;
	top: 200px;
	  }  
	    
</style>

</head>

<body >

<div class="demo">
  <a href="#" id="move_demo" onclick="new Effect.Move(this, { x: 200, y: 0 }); return
false;"><img src="test.jpg" border="0"></a>
</div>

</body>
</html>

Duddle · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Hier ist eine Kombination aus meinem Tippfehler und deinem unsauberen CSS. Es muss natürlich

Code:

position: absolute;

heißen. Jetzt musst du nur noch diesen Fleck

Code:

	 //* background:#fa0000; color:#fff; padding:5px; border:1px solid #000; */

bereinigen und du hast etwas akzeptables.

Wir bewegen uns aber schon seit mindestens 5 Posts nicht mehr im Bereich "PHP und andere Scriptsprachen". Diese grundlegenden CSS-Geschichten sind (für die Zukunft) im HTML-Unterforum besser aufgehoben.

Duddle

zimmermann · 12.07.2013

AW: Grafik soll nach Klick bewegt werden und gleichzeitig soll ein Link ausgeführt we

Okay, Dir vielen Dank für diese Fehlersuche. Aber diese Zeile mit dem //* ist doch ein Kommentar oder nicht? Also ohne diese Zeile sehe ich klappt es wunderbar!!! Das war am Anfang meine Testbox gewesen ... lol... Nochmal Danke