Chris: JQUERY Bildausschnitt verschieben bei Mausbewegung

SELF-Forum

JQUERY Bildausschnitt verschieben bei Mausbewegung

Chris
– Informationen zu den Bewertungsregeln

Hallo Zusammen.

Ich habe ein grosses Bild, von dem ich nur einen Ausschnitt in einem Div darstellen möchte. Der Rest des Bildes ist mit Overflow:hidden versteckt. Wenn nun mit der Maus an einem der vier Ränder des Divs gehovert wird, dann soll sich das Bild in die entsprechende Richtung verschieben.

Ich möchte gerne etwas mit JQUERY machen, google hat mir leider nichts schlaues ausgespuckt.

Es gibt bestimmt schon open source Skripte, nur finde ich keines in meiner Art.

Vielleicht habt ihr ja etwas ähnliches schon mal irgendwo gesehen?

Bin Dankbar für jeden Input.

Gruss Chris

Beitrag melden
–
Informationen zu den Bewertungsregeln

  1. JQUERY Bildausschnitt verschieben bei Mausbewegung

    suit Homepage des Autors
    – Informationen zu den Bewertungsregeln

    Ich habe ein grosses Bild, von dem ich nur einen Ausschnitt in einem Div darstellen möchte. Der Rest des Bildes ist mit Overflow:hidden versteckt. Wenn nun mit der Maus an einem der vier Ränder des Divs gehovert wird, dann soll sich das Bild in die entsprechende Richtung verschieben.

    Ich möchte gerne etwas mit JQUERY machen, google hat mir leider nichts schlaues ausgespuckt.

    Du willst vielleicht deine Suche mit "drag&drop" wiederholen - da wirst du in diesem Zusammenhang schnell auf jQuery UI stoßen wo es tonnenweise Beispiele dafür gibt.

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. JQUERY Bildausschnitt verschieben bei Mausbewegung

      Chris
      – Informationen zu den Bewertungsregeln

      Ich habe diverse sachen über Drag&Drop gefunden, aber ich möchte das Objekt ja nicht mit Drag&Drop verschieben, sondern mit Mouse-Hover ohne klicken... Also ein Hover am Rand des Bildes löst eine Bewegung aus.

      Ich habe eine Simple Form mit dem Dragable umsesetzt. Nun kann ich das Bild in einem Div dragen, aber dragen ist ja eigentlich nicht was ich will...

        
  
<html>  
<head>  
<title>X</title>  
  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>  
<script type="text/javascript">  
  
$(function() {  
	$( "#draggable" ).draggable({ scroll: false });  
});  
</script>  
<style>  
#headerbild {  
border: 2px solid grey;  
width:660px;  
height:200px;  
overflow:hidden;  
position:fixed;  
}  
</style>  
  
</head>  
<body>  
  
<div id="headerbild">  
<img id="draggable" src="DSCN0064.jpg" />  
  
</div>  
<br />  
Text Text  
  
</body>  
</html>
      Beitrag melden
      –
      Informationen zu den Bewertungsregeln

      1. JQUERY Bildausschnitt verschieben bei Mausbewegung

        suit Homepage des Autors
        – Informationen zu den Bewertungsregeln

        Ich habe eine Simple Form mit dem Dragable umsesetzt. Nun kann ich das Bild in einem Div dragen, aber dragen ist ja eigentlich nicht was ich will...

        Sicher ist es das, nur das eben das Drag nicht beim Klick/Halten ausgeführt wird sondern beim mouseove.

        Sieh dir den Sourcecode an, so komplex ist das nicht.

        Beitrag melden
        –
        Informationen zu den Bewertungsregeln

        1. JQUERY Bildausschnitt verschieben bei Mausbewegung

          Chris
          – Informationen zu den Bewertungsregeln

          vielleicht ist es trivial, aber ich stehe im Moment auf dem Schlauch...

          sagen wir, der Bildausschnitt ist 200px hoch und 600 px breit

          x ---------- x
          |            |
          |            |
          e ---------- e

          wenn ich mit der Maus auf die X komme, dann soll nach oben-link oder oben rechts das Bild verschoben werden

          Bei e auf unten-links oder unten-rechts

          ---- nur nach oben oder unten
          | nur nach links oder rechts

          diese Bereiche sind am Rand definiert und sollten ca. 30px breit sein.

          bei mouse over soll sich das Bild dann automatisch bewegen.

          Hat das noch niemand erfunden?

          Wie müsste ich dann für die Umsetzung vorgehen?

          Ich müsste ja dem draggable initial Koordinaten des Bildausschnittes geben, danach eine hover action pro Himmelsrichtung. und dann solange die Maus auf dem hoverbereich ist, müssen die Koordinaten dess draggable elementes dynamisch aktualisiert werden...

          any ideas?
          danke

          Beitrag melden
          –
          Informationen zu den Bewertungsregeln

          1. JQUERY Bildausschnitt verschieben bei Mausbewegung

            suit Homepage des Autors
            – Informationen zu den Bewertungsregeln

            bei mouse over soll sich das Bild dann automatisch bewegen.

            Werde die Position des Cursors aus und stelle sie in Verhältnis zur Bildgröße aus welchem du die relative Position (offset) ermittelst.

            Das ist eine simple Verhältnisrechnung - das gehört zum Pflichtschulstoff.

            Hat das noch niemand erfunden?

            Das sind vermutlich 25 Zeilen Code.

            Wie müsste ich dann für die Umsetzung vorgehen?

            Siehe oben.

            Ich müsste ja dem draggable initial Koordinaten des Bildausschnittes geben, danach eine hover action pro Himmelsrichtung.

            Die kannst du extrem leicht auswerden: .height() und .width() stehen dir zur verfügung, den Rest machen Grundrechnungsarten.

            und dann solange die Maus auf dem hoverbereich ist, müssen die Koordinaten dess draggable elementes dynamisch aktualisiert werden...

            dafür ist setTimeout oder queue() - wenn du jQuery verwenden willst - da.

            any ideas?

            Du weißt doch schon wie es geht - woran scheitert es?

            Beitrag melden
            –
            Informationen zu den Bewertungsregeln

            1. JQUERY Bildausschnitt verschieben bei Mausbewegung

              Chris
              – Informationen zu den Bewertungsregeln

              Du weißt doch schon wie es geht - woran scheitert es?

              Ich denke an meinen Skills. Ich kann gut Skripte anpassen und bestehende Jquery Elemente in Webseiten einbinden, aber eigene zu Programmieren liegt mir nicht.

              Daher war auch die Frage, ob jemand etwas ähnliches schon mal gesehen hat und es eventuell ein Opensource oder kostenpflichtiges Skript gibt.

              Danke trotzdem für deine Hilfe.

              Beitrag melden
              –
              Informationen zu den Bewertungsregeln

              1. JQUERY Bildausschnitt verschieben bei Mausbewegung

                Kašter
                – Informationen zu den Bewertungsregeln

                Du weißt doch schon wie es geht - woran scheitert es?

                Ich denke an meinen Skills. Ich kann gut Skripte anpassen und bestehende Jquery Elemente in Webseiten einbinden, aber eigene zu Programmieren liegt mir nicht.

                Du kannst ruhigen Gewissens der Gemeinde die Zwischenergebnisse präsentieren. Dann wird dir weiter geholfen. Oder hast du noch gar keine?

                Bye,
                Kašter

                Beitrag melden
                –
                Informationen zu den Bewertungsregeln

                1. Bildausschnitt verschieben bei Mausbewegung

                  Chris
                  – Informationen zu den Bewertungsregeln

                  Also danke erstmals für die Inputs.

                  Ich habe etwas Zeit gefunden und etwas fast brauchbares entworfen.

                  Meine Frage nun: Wenn ich scrolle ist es nicht wirklich flüssig und ich muss auch immer mit der Maus bewegen. (ist auch logisch, da onmousemove)

                  Mit JQUERY.animate(); kann ich es zwar flüssiger bewegen
                  $("#draggable").animate({"left": "+=20px"}, "500");
                  Es bewegt sich und bremst ab nach 20px; und dann wieder 20px bewegen und abbremsen, also nicht wirklich eine konstante Bewegung.

                  Hier mal mein Code:

                  Danke für Tipps und Verbesserungsvorschläge.

                    
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"  
       "http://www.w3.org/TR/html4/loose.dtd">  
<html>  
<head>  
<title>Bildausschnitt bewegen mit JQUERY</title>  
  
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>  
<script type="text/javascript">  
  
  
</script>  
<style>  
#headerbild {  
border: 2px solid grey;  
width:660px;  
height:200px;  
overflow:hidden;  
}  
  
#draggable {  
	left:0px;  
	top:0px;  
	position:relative;  
}  
  
</style>  
  
</head>  
<body>  
  
<div id="headerbild">  
<img id="draggable" src="http://upload.wikimedia.org/wikipedia/commons/archive/6/6c/20070308024414!Angkor_Wat_from_north_pond.JPG" />  
</div>  
<br />  
<div id="result">Maus über das Bild bewegen</div>  
<div id="trackme"></div>  
  
<script type="text/javascript">  
  
  	var moveLeft = "";  
	var moveRight = "";  
	var moveUp = "";  
	var moveDown = "";	  
	  
	var imgWidth = $("#draggable").width();  
	var imgHeight = $("#draggable").height();  
	  
	var startLeft = "-1300px";  
	var startTop = "-1100px";  
	  
	var myOffset = 30;  
	  
	$("#draggable").css('left', startLeft);  
	$("#draggable").css('top', startTop);  
  
$("#headerbild").mousemove(function(e){  
	var relativeX = e.pageX - this.offsetLeft;  
	var relativeY = e.pageY - this.offsetTop;  
  
	  
	if(relativeX <= 30) {  
		moveLeft = true;  
		var posLeft = parseInt($("#draggable").css('left').replace("/px/i", ""));  
		if(posLeft < -5) {  
			//$("#draggable").animate({"left": "+=20px"}, "500");  
			$("#draggable").css('left', posLeft+=3);  
			$("#trackme").append("l-");  
		}  
	} else {  
		if(moveLeft===true) {  
			$("#trackme").append(" [out] ");  
			moveLeft = false;  
			$("#draggable").clearQueue();  
			$("#draggable").stop();			  
		}  
	}  
	  
	if(relativeX >= 630) {  
		moveRight = true;  
		var posRight = parseInt($("#draggable").css('left').replace("/px/i", ""));  
		if(posRight > 665 - imgWidth) {  
			//$("#draggable").animate({"left": "-=200px"}, "300");  
			$("#draggable").css('left', posRight-=3);  
			$("#trackme").append("r-");  
		}  
	} else {  
		if(moveRight===true) {  
			$("#trackme").append(" [out] ");  
			moveRight = false;  
			$("#draggable").clearQueue();  
			$("#draggable").stop();			  
		}  
	}  
	if(relativeY <= 30) {  
		moveUp = true;  
		var posUp = parseInt($("#draggable").css('top').replace("/px/i", ""));  
		if(posUp < -5) {  
			//$("#draggable").animate({"top": "+=20px"}, "200");  
			$("#draggable").css('top', posUp+=3);  
			$("#trackme").append("u-");  
		}  
	} else {  
		if(moveUp===true) {  
			$("#trackme").append(" [out] ");  
			moveUp = false;  
			$("#draggable").clearQueue();  
			$("#draggable").stop();			  
		}  
	}  
	if(relativeY >= 170) {  
		moveDown = true;  
		var posDown = parseInt($("#draggable").css('top').replace("/px/i", ""));  
		if(posDown > 205 - imgHeight) {  
			//$("#draggable").animate({"top": "-=20px"}, "100");  
			$("#draggable").css('top', posDown-=3);  
			$("#trackme").append("d-");  
		}  
	} else {  
		if(moveDown===true) {  
			$("#trackme").append(" [out] ");  
			moveDown = false;  
			$("#draggable").clearQueue();  
			$("#draggable").stop();			  
		}  
	}  
	  
	$("#result").text(" mousecords ( " + relativeX + ", " + relativeY + " ) direction [ left:" + moveLeft + " | right: " + moveRight + " | up: "+ moveUp + " | down: "+ moveDown + " ]");  
	  
});  
$("#headerbild").mouseout(function(e){  
	$("#draggable").clearQueue();  
	$("#draggable").stop();		  
});  
  
  
</script>  
</body>  
</html>
                  Beitrag melden
                  –
                  Informationen zu den Bewertungsregeln

                  1. Bildausschnitt verschieben bei Mausbewegung

                    Chris
                    – Informationen zu den Bewertungsregeln

                    hat jemand ein paar Inputs für mich?

                    Wäre sehr hilfreich.

                    Geht wohl vorallem an die JQUERY Experten in diesem Forum

                    Vielen Dank

                    Beitrag melden
                    –
                    Informationen zu den Bewertungsregeln

              2. JQUERY Bildausschnitt verschieben bei Mausbewegung

                Joachim Homepage des Autors
                +1 Informationen zu den Bewertungsregeln

                Hi,

                Ich denke an meinen Skills. Ich kann gut Skripte anpassen und bestehende Jquery Elemente in Webseiten einbinden, aber eigene zu Programmieren liegt mir nicht.

                Naja, dann missverstehst Du aber die Intention von Selfhtml - Betonung auf SELF. Vielleicht solltest Du Dir einfach mal einen Schubs geben, und ein paar Experimente wagen. Der Einstieg wäre z.B., die Mousemove-Events über einem Element zu registrieren und auszugeben, um anschliessend entsprechend der Werte irgendwas anzustossen. Nur Mut ;-)

                Gruesse, Joachim

                --
                Am Ende wird alles gut.
                Beitrag melden
                +1
                Informationen zu den Bewertungsregeln

  2. JQUERY Bildausschnitt verschieben bei Mausbewegung

    Kašter
    – Informationen zu den Bewertungsregeln

    Hallo Zusammen.

    Ich habe ein grosses Bild, von dem ich nur einen Ausschnitt in einem Div darstellen möchte. Der Rest des Bildes ist mit Overflow:hidden versteckt. Wenn nun mit der Maus an einem der vier Ränder des Divs gehovert wird, dann soll sich das Bild in die entsprechende Richtung verschieben.

    Du muss schon entscheiden ob du onmouseout am DIV oder onmouseover an irgendwelchen Elementen neben dem DIV auslösen möchtest. Beides geht.

    Ich möchte gerne etwas mit JQUERY machen, google hat mir leider nichts schlaues ausgespuckt.

    Wie hast du denn gesucht? Und warum nur bei Google? Kennst du keine anderen Suchmaschinen?

    Du hast falsche Vorstellung von jQuery: jQuery kann dir die Arbeit erleichtern aber nicht abnehmen. Sollte es auch nicht.

    Es gibt bestimmt schon open source Skripte, nur finde ich keines in meiner Art.

    Versuche es selber zu machen. Stichwörter hast du ja selbst genannt: onmouseover und owerflow. Dazu füge ich noch eins: timeout.

    Der Rest ist nur Berechnung der Koordinaten und setzen der entspr. CSS-Eigenschaften. Ich will dir aber auch nicht zu viel verraten. :)

    Grüß,
    Kašter

    Beitrag melden
    –
    Informationen zu den Bewertungsregeln

    1. JQUERY Bildausschnitt verschieben bei Mausbewegung

      suit Homepage des Autors
      – Informationen zu den Bewertungsregeln

      Wie hast du denn gesucht? Und warum nur bei Google? Kennst du keine anderen Suchmaschinen?

      Alsob eine andere Suchmaschine bessere Ergegnisse für "Ich habe ein triviales Problem welches ich mit jQuery lösen möchte" liefern würde ;)

      Wie bereit erwähnt: die Sache lässt sich mit vermutlich etwa 25 Zeilen JavaScript/jQuery lösen.

      Beitrag melden
      –
      Informationen zu den Bewertungsregeln