| Autor |
Nachricht |
13pixelchen
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 21.02.2006 18:22
Titel Wie am besten programmieren: Bilder synchron bewegen |
  |
|
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: -
|
|
| |
|
|
|
Anzeige
|
|
|
13pixelchen
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 21.02.2006 21:16
Titel
|
|
|
ja, casper, Ich spreche auch nicht von irgendeinem Billig-IE-only Script. Googlen kann ich selbst, wa. 
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht: 
|
Verfasst Di 21.02.2006 21:44
Titel
|
|
|
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 
|
|
| |
  |
|
13pixelchen
Account gelöscht Threadersteller
Ort: -
|
Verfasst Di 21.02.2006 21:48
Titel
|
|
|
Kein Problem, das mit dem lernen,
Aber genau das, ob getElementByID('blub').style.backgroundPosition = "neuX neuY" geht, wollt ich wissen Danke!
|
|
| |
|
|
Raumwurm
Dabei seit: 21.12.2004
Ort: -
Alter: -
Geschlecht:
|
Verfasst Di 21.02.2006 22:04
Titel
|
|
|
| 13pixelchen hat geschrieben: | Kein Problem, das mit dem lernen,
Aber genau das, ob getElementByID('blub').style.backgroundPosition = "neuX neuY" geht, wollt ich wissen 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.
|
|
| |
|
|
caZpa
Account gelöscht Threadersteller
Ort: -
|
Verfasst Mi 22.02.2006 13:53
Titel
|
|
|
| 13pixelchen hat geschrieben: | | ja, casper, Ich spreche auch nicht von irgendeinem Billig-IE-only Script. Googlen kann ich selbst, wa. |
wieso machstes dann nich
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">
</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: 42
Geschlecht:
|
|
| |
|
|
| |
|
|
| Ähnliche Themen |
wie und wo macht man am besten PIXEL bilder?
[Flash] Zufälliges Video und wie am besten Bilder laden?
Lightroom auf 2 PCs synchron
C4d Laserschnitt nicht synchron
[FLASH] Sound nicht synchron
Indesign CS5 - in zwei Dokumenten synchron navigieren?
|
|
Willkommen auf dem Portal für Mediengestalter
