selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

Panoramabild mit Javascipt und Mousover bewegen

Autor: Daniel95
Datum: 02.03.2014 18:45:42

Hallo Community!

Im Rahmen eines Schulprojektes bin ich dabei, eine Internetseite zu überarbeiten und zu aktualisieren.
Die alte Version der Webpage wurde über Tabellen aufgebaut. Im oberen Bereich befand sich ein Panoramabild, das sich entsprechend der Mausposition (links/rechts) horizontal bewegen ließ. Je näher der Cursor hierbei dem rechten/linken Bildrand ram, umso schneller bewegte sich das Bild. Wenn man sich in der Bildmitte befand, stand das Bild still und wenn man das Bild verließ ebenfalls.

Die neue Version der Internetseite habe ich über div-Tags und css aufgebaut. Wie schaffe ich es jetzt, dass sich das Bild innerhalb des div-tags genau so wie in dem oben beschrieben Beispiel bewegt?

Grundlegene Kentnisse über html und css sind bei mir vorhanden, Javascipt hingegen ist leider gänzliches Neuland für mich.

Der js-code der alten Seite:

g=1;  //Geschwindigkeit -3 bis +3
p=0;        //Position
        function move()
        {
                if(!document.getElementById){return;}
                p = p+g;
                document.getElementById('panorama').style.backgroundPosition=p;
                setTimeout('move()',10);
        }

            function showMouseOver(text, event)
            {
                   g=0
                if (tempX < 300) {g=1}
                if (tempX < 200) {g=2}
                if (tempX < 100) {g=4}

                if (tempX > 500) {g=-1}
                  if (tempX > 600) {g=-2}
                  if (tempX > 700) {g=-4}
            }

            function hideMouseOver()
            {
                if (g<0) {g=-1}
                if (g>0) {g=1}

            }


                // Detect if the browser is IE or not.
                // If it is not IE, we assume that the browser is NS.
                        var IE = document.all?true:false

                // If NS -- that is, !IE -- then set up for mouse capture
                        if (!IE) document.captureEvents(Event.MOUSEMOVE)
                // Set-up to use getMouseXY function onMouseMove
                        document.onmousemove = getMouseXY;
                // Temporary variables to hold mouse x-y pos.s
                        var tempX = 0
                        var tempY = 0

        function getMouseXY(e) {
                  if (IE) { // grab the x-y pos.s if browser is IE
                                    tempX = event.clientX + document.body.scrollLeft
                                    tempY = event.clientY + document.body.scrollTop
                          } else {  // grab the x-y pos.s if browser is NS
                                            tempX = e.pageX
                                            tempY = e.pageY        }

                // catch possible negative values in NS4
                          if (tempX < 0){tempX = 0}
                          if (tempY < 0){tempY = 0}
                           return true
        }


window.onload=move;


Das Panoramabild befindet sich in einem ganz normalen div-tag

<div id="foto">
</div>


Den div-tag habe ich in css folgendermaßen angesprochen:

#foto {
  float:left;
  margin: auto;
  background: url(panorama2.jpg) no-repeat center;
  -webkit-background-size: contain;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  width:800px;
  height:145px;
  background-color:orange;
  margin-top:0px;
  margin-bottom:5px;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
}



Ich bedanke mich schoneinmal recht herzlich für alle Antworten!

Daniel



Re: Panoramabild mit Javascipt und Mousover bewegen

Autor: reporter
Datum: 03.03.2014 11:00:30

Hallo,

passiert wenn du an stelle von


> document.getElementById('panorama').style.backgroundPosition=p;

document.getElementById('foto').style.backgroundPosition=p;

schreibst?

Hast du ein Link zur der Seite? Ich würde mir diesen Effekt gerne mal selbst anschauen.



Re: Panoramabild mit Javascipt und Mousover bewegen

Autor: Daniel95
Datum: 03.03.2014 16:54:17

Hallo,

Wenn ich das schreibe, wird das Bild zwar eingefügt, der Effekt bleibt jedoch aus.

Hier der Link zur Seite:
http://www.stecklenberg.de/



Re: Panoramabild mit Javascipt und Mousover bewegen

Autor: reporter
Datum: 05.03.2014 21:58:51

Hallo,

also ich habe es irgendwie hinbekommen, dank des Links den du gepostet hast. Folgende Dinge musst du schon einmal abändern:

> <div id="foto"></div>

ändern in:

<div id="foto" onmousemove="showMouseOver('Stopp', event)" onmouseout="hideMouseOver()"></div>

und

> document.getElementById('panorama').style.backgroundPosition=p;

in:

document.getElementById('foto').style.backgroundPosition=p;