J-Script bild in HTML verschieben

...komplette Frage anzeigen

3 Antworten

 <img id="img" class="img" onclick ="test();" src="Img/button.png" style="position:absolute;top:50%;left:50%;margin-left:-125px;margin-top:-125px;width:250px;height:250px;"></a>

    
    
<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  function test() {
$("img").animate({top:'-250px'}, 3000);
}
</script>
    
</body>

</html>

So dürfte es nun aber klappen!! :D

Für den anderen Fehler füge einfach:

Im head ein.... :) ändert den Zeichensatz auf "utf-8"

Lieben Gruß

javinator 23.05.2014, 11:34

Noch 2 kleine Tipps am rande...

angenommen dein Bild ist rechteckig... Dann setze einfach, die Breite oder höhe auf den Pixel Wert, den du haben möchtest und den anderen Wert einfach auf "auto"... Dan behälst du ziemlich einfach das Seitenverhältnis bei.

Die Breite und Höhe in eine externe css Datei ist wesentlich effektiver als sie in den html code einzubauen.

<img id = "img" class="img" src="Img/button.png" width="250px" height="250px"

Genau die beiden hast du einzeln im html code drinne... Effektiver ist es die in die css zu bauen. :)

Das zentrieren eines Objekts funktioniert am besten mit:

style="position:relative;margin:0 auto;"

siehe dir dazu einfach folgende Links an...

<a href="http://api.jquery.com/animate/" target="_blank">http://api.jquery.com/animate/</a> 

Alles was du über das animieren wissen musst findest du da oben..

little-boxes.de/lb1/7.4-webseite-zentrieren-mit-width-und-margin.html

Im Endeffekt funktioniert es auch so wie du es machst... Aber es ist nicht ganz so effektiv und vorallem bei unterschiedlichen Bildschirm größen, sieht man den unterschied gewaltig... :)

Liebe Grüße

1
TheEvilTyper 23.05.2014, 13:34
@javinator

Genial genau so wollte ich es eigent lich habe, war nur zu blöd das bild aus zu richten, dafür gibt den STERN

Vielen Dank noch mal.

1
javinator 26.05.2014, 11:24
@TheEvilTyper

Freut mich das es nun klappt und das Ergebnis so ist wie du es dir vorgestellt hast.

Dankesehr für den Stern und immer wieder gerne. :)

0

Bindest einfach ein Jquery ein und kannst dann ganz easy mittels der funktion .animate das raus animieren... Gruß :)

Hi,

Danke erst mal

Bei Jquerry handelt es sich doch um eine Jscript api oder?

funktioniert das ganze auch mit den Relativ angegebenen prozent angaben?

(blicks noch nicht ganz)

javinator 21.05.2014, 23:01
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

das packst du schonmal in den header, damit bindest du dein jquery ein...

function animieren() {
$("div").animate({top:'-250px'});
}

das hier packst du unter den link auch im header bereich..

Das ist unabhängig davon, wo sich das Objekt befindet, wenn die Funktion ausgelöst wird, bewegt sich jedes div element an "top:-250px" unabhängig davon ob es prozent oder pixel ist...

im html teil hast du vermutlich sowas hier:

<html>
<div id="abstand"></div>
</html>

da fügst du einfach nur noch das ein:

<html>
<div id="abstand" onclick="animieren();"></div>
</html>

So habe das jetzt grob geschrieben, könnten paar syntax fehler drin sein, wenn du mir die Datei schickst mit den genauen code zeilen, passe ich das für dein Dokument an...

Gruß

1
TheEvilTyper 22.05.2014, 10:09
@javinator

Hi, vilen dank für die Hilfe aber irgendwie funktioniert das ganze nicht. hast du eine idee warum es nicht geht?

HTML Code:

<html>
<head>
<title>Web Editor</title>

<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-theme.css">
<link rel="stylesheet" href="Style/main.css"></link> 
<link rel="stylesheet" href="Style/pics.css"></link>


</head>

<body>

<h1>Willkommen</h1>


 
<div id ="abstand" >
</div>


<div id="div1">
    <center><img id = "img" class="img" src="Img/button.png" width="250px" height="250px" onclick ="animieren()"></a></center>
</div>
    
</body>

<script type="text/javascript">

</script>

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
  
  function animieren() {
$("abstand").animate({top:'-250px'});
}
</script>

</html>

CSS pics:

#abstand {
          height: 45%;
          width: 100%;
          float: left;
          margin-bottom: -8em;
}
#div1{

}
.img {

cursor:pointer;
cursor:hand;

}

CSS main

h1{ font-size:40px;
    color:#cd1142;
    
    position: absolute;
    left: 50%;
    text-align:center;
    width: 100%;
    margin-left: -50%}
body{ background-color:#090909;
      
}
html{overflow:hidden;}
 

Vilen Dank Schon mal.

0
javinator 23.05.2014, 09:50
@TheEvilTyper

Hallo,

Bin eben erst wieder on gekommen...

Also wenn du "f12" drückst, öffnest du die konsole, des Browsers. Da sieht man relativ schnell, die Fehler eines javascripts... Was sagt denn deine Konsole?

Bzw welchen Browser hast du?

Mir sind ein paar kleinigkeiten aufgefallen, die einen Fehler verursachen könnten...

<div id="div1">
    <center><img id = "img" class="img" src="Img/button.png" width="250px" height="250px" onclick ="test();"></a></center>
</div>
    
    
<script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
  function test() {
$("#div1").animate({top: "-=500",}, 3000, function() {
    });
}
</script>
    
</body>

Also waren soweit ich das gesehen habe nur kleine strukturierungsfehler, aaaaaber! Bei mir gab es aber komplikationen mit dem externen google Link. Deshalb habe ich das query in eine externe datei gepackt...

Da wo vorher der Link:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
 

war, habe ich das hier eingefügt:

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

Die Jquery.js habe ich dir mal eben hochgeladen:

https://mega.co.nz/#!agQmhAyS!qo0Bcv_Pk0UyXVI-qQXNZL1RcEwERlGEw_IuqVISGoA

--- und damit hat es dann letzten endes bei mir geklappt...

1
javinator 23.05.2014, 09:54
@javinator
$("#div1").animate({top: "-=500",}, 3000

kleinigkeit am rande zu der Zeile hier...

#div1

ist wie du weißt die id deines Elements. du kannst das auch durch eine Klasse ersetzen. Muss also keine Id sein...

{top: "-=500",

bewegt das objekt vom derzeitigen standpunkt 500px nach oben...

und zum schluss, die 3000. Die bestimmt in welcher geschwindigkeit die Animation durchlaufen soll, in dem Fall 3000 milisekunden... - 3 Sekunden.

Viele Grüße, Christian

1
TheEvilTyper 23.05.2014, 10:23
@javinator

Hi, Habs jetzt mit den Script versucht. Hat auch nicht funktioniert, die konsole gibt nichts wierklich sinfolles raus biss auf Diese warunung unter js:

Die Zeichenkodierung des HTML-Dokuments wurde nicht deklariert. Das Dokument wird in manchen Browser-Konfigurationen mit verstümmeltem Text dargestellt, wenn das Dokument Zeichen außerhalb des US-ASCII-Bereichs enthält. Die Zeichenkodierung der Seite muss im Dokument oder Transferprotokoll deklariert werden.
0
javinator 23.05.2014, 11:12
@TheEvilTyper

Dann funktioniert es! :) Super, gibt nur eine kleinigkeit warum es "nicht funktioniert"...

Dein div brauch im style einen "position:absolute;" ich bearbeite es ganz kurz einen Moment.

0

Was möchtest Du wissen?