mediengestalter.info
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter

Aktuelles Datum und Uhrzeit: Di 06.12.2016 17:01 Benutzername: Passwort: Auto-Login

Thema: Wie am besten programmieren: Bilder synchron bewegen vom 21.02.2006


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Programmierung -> Wie am besten programmieren: Bilder synchron bewegen
Seite: 1, 2, 3  Weiter
Autor Nachricht
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst Di 21.02.2006 17:22
Titel

Wie am besten programmieren: Bilder synchron bewegen

Antworten mit Zitat Zum Seitenanfang

Hi,

Folgende Situation:

Zwei absolut positionierte DIVs. Ein kleines und ein großes. Im kleinen ist ein Thumbnail. Im großen ist ein Ausschnitt des Bildes in Originalgröße. Jetzt soll sich der Ausschnitt mitbewegen, wenn man über das kleine Bild fährt. Flash ist verboten *g*. Das geht mit Javacript. Kennt jemand eine einfach Methode?

Geht es, das große Bild als background des DIVs zuzuweisen und per Javascript zu bewegen? Ich kann leider kein Javascript/DOM.
 
caZpa
Account gelöscht Threadersteller


Ort: -

Verfasst Di 21.02.2006 19:47
Titel

Antworten mit Zitat Zum Seitenanfang

5min google:
http://www.namibia-cd.com/menu/js/magnifier1.htm
 
Anzeige
Anzeige
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst Di 21.02.2006 20:16
Titel

Antworten mit Zitat Zum Seitenanfang

ja, casper, Ich spreche auch nicht von irgendeinem Billig-IE-only Script. Googlen kann ich selbst, wa. *Thumbs up!*
 
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 21.02.2006 20:44
Titel

Antworten mit Zitat Zum Seitenanfang

Ein fertiges Script kenne ich jetzt nicht, aber
Du kannst mit offsetX und offsetY die relativen
Mousekoordinaten abfragen (nach einem Mouse-
Event - am besten wohl onClick) - vorzugsweise
nur bei Elementen ohne padding und border - weil
die Browser sich da ja bekanntermaßen uneins
sind, was nu dazugehört und was nicht....

So und wenn Du die Koordinaten hast, kannst du
ja theoretisch die neue Position des Hintergrunds
mit einen Faktor neu ausrechnen und dann per
getElementByID('blub').style.backgroundPosition = "neuX neuY"
zuweisen. Um ein wenig JavaScript und DOM lernen
kommste aber wohl nicht drumrum Lächel
  View user's profile Private Nachricht senden
13pixelchen
Account gelöscht Threadersteller


Ort: -

Verfasst Di 21.02.2006 20:48
Titel

Antworten mit Zitat Zum Seitenanfang

Kein Problem, das mit dem lernen,

Aber genau das, ob getElementByID('blub').style.backgroundPosition = "neuX neuY" geht, wollt ich wissen Lächel Danke!
 
Raumwurm

Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Di 21.02.2006 21:04
Titel

Antworten mit Zitat Zum Seitenanfang

13pixelchen hat geschrieben:
Kein Problem, das mit dem lernen,

Aber genau das, ob getElementByID('blub').style.backgroundPosition = "neuX neuY" geht, wollt ich wissen Lächel Danke!


Ich vermute mal schon, weils bei SelfHtml so
aufgeführt wird, falls sich aber das Background-
Buidl nicht verschieben lässt, könntest Du ja
notfalls auch einfach einen Container mit
fixen Ausmaßen und overflow:hidden um das
Bild-Div bauen und dann nur das Bild-Div mit
absoluten Positionen verschieben oder so.
  View user's profile Private Nachricht senden
caZpa
Account gelöscht Threadersteller


Ort: -

Verfasst Mi 22.02.2006 12:53
Titel

Antworten mit Zitat Zum Seitenanfang

13pixelchen hat geschrieben:
ja, casper, Ich spreche auch nicht von irgendeinem Billig-IE-only Script. Googlen kann ich selbst, wa. *Thumbs up!*


wieso machstes dann nich

* Keine Ahnung... *

und wieso only ie??
bei mir gehz auch im fuchs

der code is klein und easy anzupassen
hat 2 absolut positionierte divs
ein kleines und ein großes; nur vertauschte größen
hab die divs nochmal angepasst

Code:
<style type="text/css">
<!--
 body { overflow:hidden; }
-->
</style>


<script type="text/javascript">
<!--

var ie = document.all?1:0;
var w3c = document.getElementById?1:0;
var ns4 = document.layers?1:0;

var smallWidth=200, smallHeight=133;   // Breite und Hoehe der kleinen Grafik
var smallLeft = 350, smallTop = 98;   // Position der kleinen Grafik
var lensWidth = 250, lensHeight= 250;   // Breite und Hoehe der Lupe
var detailLeft = 80, detailTop = 96;   // Position des Rahmen-Layers

var zoom = 4;   /* Jeder Faktor ist moeglich, wenn Breite und Hoehe der grossen
                und kleinen Grafik im gleichen Verhaeltnis referenziert werden */

var lens, mouseX = 0, mouseY = 0, X, Y;
var leftClip, topClip, rightClip, bottomClip;


function intro() {

 // Opera ab Version 7 ermitteln - unabhaengig von der eingestellten Identifizierung
 if((window.opera) && !(navigator.userAgent.indexOf("7")!=-1)) {

  alert("Die Lupe funktioniert leider erst mit Opera 7.");
  return;
 }

 lens = (ie)?document.all.magnify.style:(w3c)?document.getElementById("magnify").style:document["magnify"];

  if(ns4) {
   document.captureEvents(Event.MOUSEMOVE);
  }
  setInterval("cut()", 30);
  document.onmousemove = pos;
}


function pos(e) { // Mausposition und Clipping-Werte berechnen

 if(!e) e = window.event; // Event-Definition fuer IE
 mouseX = ((ns4)?e.pageX:e.clientX) - smallLeft; // Mausposition innerhalb der
 mouseY = ((ns4)?e.pageY:e.clientY) - smallTop;  // kleinen Grafik ermitteln

 X = Math.round(mouseX * zoom); // Umrechnen der Mausposition
 Y = Math.round(mouseY * zoom); // auf grosse Grafik

 leftClip = X - lensWidth /2; // Clipping-Werte
 topClip = Y - lensHeight /2; // fuer die grosse Grafik
 rightClip = X + lensWidth /2;
 bottomClip = Y + lensHeight /2;
}


function cut() {

 if(mouseX > 0 && mouseX < smallWidth && mouseY > 0 && mouseY < smallHeight) {

  lens.visibility = "visible";

  if(ie||w3c) { // Fuer IE 5+, Mozilla, Netscape 6+ und Opera 7

   lens.clip="rect(" + topClip + "px " + rightClip +"px "+ bottomClip +"px "+ leftClip +"px)";
   lens.left = (detailLeft - leftClip + 4) + "px";
   lens.top = (detailTop - topClip + 4) + "px";
  }
  else if(ns4) { // Fuer NS 4

   lens.clip.left = leftClip;
   lens.clip.top = topClip;
   lens.clip.right = rightClip;
   lens.clip.bottom = bottomClip;
   lens.left = (detailLeft - leftClip + 4);
   lens.top = (detailTop - topClip + 4);
  }
 }
 else {
  lens.visibility = "hidden";
 }
}
//-->
</script>

</head>

<body onload="intro()" bgcolor="#FFFFCC">


<div id="magnify" style="position:absolute; left:auto; top:auto; visibility:hidden; z-index:3;">
<img src="http://www.namibia-cd.com/menu/js/p0193.jpg" width="800" height="530" alt="" title="">
</div>

<div id="small" style="position:absolute; left:350px; top:98px; z-index:1;">
<img src="http://www.namibia-cd.com/menu/js/p0193.jpg" width="200" height="133" alt="" title="">
</div>


<div id="detail" style="position:absolute; left:80px; top:96px;">
<table border="0" bgcolor="#FFFF99">
<tr><td width="250" height="250">
&nbsp;
</td></tr>
</table>
</div>

zum gucken

das ist docheigentlich _genau das was du suchst

oder hab ich da was falsch verstanden?
 
copic

Dabei seit: 09.07.2004
Ort: Stuttgart
Alter: 34
Geschlecht: Männlich
Verfasst Mi 22.02.2006 13:32
Titel

Antworten mit Zitat Zum Seitenanfang

ist vom prinzip evtl. dasselbe wie oben...

http://www.cssplay.co.uk/menu/enlarge.html
  View user's profile Private Nachricht senden
 
Ähnliche Themen wie und wo macht man am besten PIXEL bilder?
[Flash] Zufälliges Video und wie am besten Bilder laden?
[FLASH] Sound nicht synchron
C4d Laserschnitt nicht synchron
Lightroom auf 2 PCs synchron
Indesign CS5 - in zwei Dokumenten synchron navigieren?
Neues Thema eröffnen   Neue Antwort erstellen Seite: 1, 2, 3  Weiter
MGi Foren-Übersicht -> Programmierung


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.