Breite eines Div-Layers mit mouseover/mauskoordinaten verändern?

[Mike1707]

Hallo,

ich bin ein ziemlicher Neuling im Bereich JS und habe ein kleines Problem, bei dem ich hoffe, dass ihr mir helfen könnt!

Folgendes ist mein Problem:

Ich möchte ein "Rating-Script" schreiben, das man sich wie folgt vorstellen muss:
Ich habe ein Bild mit 5 Sternen wo die Sterne durchsichtig sind und möchte die Sterne immer bis dahin färben, wo die Maus sich gerade befindet.

Dabei jedoch nicht einfach nur den ganzen Stern, sondern immer exakt der Mauskoordinate nach (dass man z.B. auch 1/5 des Sterns färben kann).

Dafür habe ich mir überlegt einen div-layer unter das Sternenbild zu legen, welcher die Sterne quasi von unten färbt. Und genau dieser soll sich jetzt immer in Echtzeit verändern, wenn man mit der Maus über das bild fährt.

Ich hoffe ihr habt mich verstanden.

Mit google habe ich schon ein Script gefunden, was einem die Mauskoordinaten ausgibt, jedoch weiß ich nicht, wie ich damit jetzt die Breite des Div-Layers verändern soll... schauts euch an, vielleicht kann man das als Ansatz verwenden:

http://www.kostenlose-javascripts.de/javascripts/statusleiste/mauskoordinaten.html

VIELEN DANK!

Mike

 

[chmee]

d = document.getElementById('Farblayer');
d.style.width="1270px";

// 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

// Main function to retrieve mouse x-y pos.s

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}  
  // show the position values in the form named Show
  // in the text fields named MouseX and MouseY
  document.Show.MouseX.value = tempX
  document.Show.MouseY.value = tempY
  return true
}

Auf die Schnelle aus dem Netz zusammengesucht.. Erstmal solltest Du die absolute Position des Layers herausfinden, dann bekommst Du mit dem zweiten Codeschnippsel die absolute Mausposition, von welcher Du die Layerposition abziehst. Das Ergebnis müsstest schon für die Liveanzeige benutzen können, gleichzeitig zum Speichern noch in Dein "Rating" umrechnen, zB 4,2 von 5

mfg chmee

 

[hundetochterfünf]

Ich versuchte einfach mit :

document.get....... style.width = tempX;

und dadurch temporär die größe zu ändern .. bin aber genau so ein JS anfänger.

ist es überhaupt möglich das so temporär zu ändern oder bedarf es da besonderer befehle?.. und um auf deinen lösungsansatz zurückzukommen

-> wie ermittle ich die position des div layers wenn die ausrichtung der gesamten seite mit prozent angaben läuft?

 

[Quaese]

Hi,

selbstverständlich ist es möglich, die Dimensionen dynamisch zu ändern. Dein Ansatz sieht auch schon sehr vielversprechend aus, lediglich die Einheit fehlt:

document.getElementById("dieID").style.width = tempX + "px";

Das Top-Offset eines Elements kannst du mit folgender Routine ermitteln. Für das linksseitige Offset funktioniert es genauso, du musst nur offsetTop durch offsetLeft ersetzen oder in der Routine ergänzen.

function getOffset(strID){
  var objOffset = document.getElementById(strID);
  var intOffset = objOffset.offsetTop;

  while(objOffset = objOffset.offsetParent){
    intOffset += objOffset.offsetTop;
  }

  return intOffset;
}

Der Aufruf erfolgt mit der ID des Elements, dessen Offset ermittelt werden soll.

Unter der Annahme, es existiert im Dokument ein DIV-Container mit der ID myId, könntest du dessen Offset zum Beispiel im onload-Event anzeigen lassen.

window.onload = function(){
  alert(getOffset("myId"));
}

Ich hoffe, das hilft dir weiter.

Ciao
Quaese

 

[hundetochterfünf]

Ich hab verstanden wie du das meinst und habe gedacht erstmal einen Test :

<script type='text/javascript'>
  function getOffset(strID){
  var objOffset = document.getElementById(strID);
  var intOffset = objOffset.offsetTop;

  while(objOffset = objOffset.offsetParent){
    intOffset += objOffset.offsetTop;
  }
  alert(intOffset);
  return intOffset;
  }
  </script>

das im head und das hier im body

<div style="margin-top:200px; border:1px solid;" id="layer" onload="getOffset(layer)" ></div>

Kriege nen mittelschweren anfall weil er mir nichtmal das zeigen will.. versteh mal absolut gar nicht was ich da falsch machen konnte :/

Liegt das vielleicht daran, dass man onLoad nur im Body-Tag benutzen kann?

Wie gesagt: JS-nap!

Mittelschwerer Anfall hat sich ausgeweitet auf einen Völlig katastrophalen Anfall


Habe es mit jedem EventHandler getan der mir bekannt ist.. habe wilde neue Zeichensetzungen ausprobiert ..

es muss ja eigentlich nur :

offsettop und offsetleft ermittelt werden und solang die maus sich über OffsetTop+divhöhe und unter OffsetTop bewegt und mausKoord > als offsetleft aber kleiner als offsetzleft + div layer breite sind... DANN muss der kasten die breite (momentane X koordinate der maus) -( die x koordinate des div layers) haben


gott will mir kein zeichen geben.. vll könnt ihr es DANKE!

**edit

15:40 zweifle an meinem gesunden menschen vestand
15:41 anfall nummer 340..


16:07 IHR SEID GÖTTER es funktioniert.. speziellen dank an Quaese danke...


Daran schließt sich gleich das nächste Problem an... wenn man nun klickt soll der Xkoord in die datenbank eingetragen werden.. das mit dem ermitteln das krieg ich hin.. aber wie kriege ich es gebacken das er dann was in eine mysql tabelle schreibt.. ?..

wenn ihr mir helft rauch ich auch weniger .. ist das nicht ein angebot? .. rettet mein leben

ach wenn es interessiert , das wars schon :

var testY = getOffsetTop("myId");
  var testX = getOffsetLeft("myId");
  if(tempY>testY && tempY<testY+50 && tempX<=testX+200){
   document.getElementById("tochange").style.width = tempX-getOffsetLeft("myId") + "px";
  }

Edit 304202


Habe es mit nem Http ref versucht oder wie das genantn wird.. aber ich check da nicht ganz durch.. muss die seite dich ich aufrufe nur den datenbank speicher eintrag haben?.. wieso ruft er die seite doch auf, dachte das läuft invisible im hintergrund.. bzw. kann man das so einstellen?.. google liefert mir unverständliche dinge .. bzw. mein Skill in Js scheint noch nicht ausgereift .. wäre nett wenn sich jemand meinem gedanken anschließen kann und den vll entwirrt

 

[Quaese]

Hi,

wenn du die Koordinaten ohne einen Reload der Seite in eine Datenbank eintragen willst, empfehle ich dir AJAX. Dabei handelt es sich um einen asynchronen Request, der im Hintergrund ausgeführt wird.

Eine gute Einführung findest du beispielsweise in einem OpenBook von Galileo-Computing. Ausserdem solltest du mit diesem Suchbegriff bei der Suchmaschine deiner Wahl ausreichend Tutorials finden.

So sehr ich nachvollziehen kann, dass du deine Verzweiflung dahingehen kanalisierst, Grossbuchstaben zu ignorieren, bitte ich dich dennoch um durchgehende Gross- und Kleinschreibung.

Ciao
Quaese