Ergebnis 1 bis 13 von 13
  1. #1
    Fridolin93 ist offline Mitglied
    registriert
    31-12-2010
    Beiträge
    33

    clip-Problem...

    Guten Tag,

    ich habe ein kleines Problem und zwar:

    möchte ich nur einen ausschnitt eines Bildes mit "clip" anzeigen lassen.
    funktioniert alles super, aber wie bekomme ich es hin, dass der angezeigt ausschnitt in der linken oberen ecke beginnt?
    im moment wird alles andere außer dem rechteck, das ich clipen will, ausgeblendet; steht also an der ursprünglichen stelle. es soll aber links oben stehen.
    wie geht das?
    bzw. was muss ich tun?

    lG

  2. #2
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: clip-Problem...

    Code? Testlink? Sonst können wir nur raten...
    Hoffe ich konnte helfen

  3. #3
    Fridolin93 ist offline Mitglied
    registriert
    31-12-2010
    Beiträge
    33

    AW: clip-Problem...

    oder besser gesagt:
    ich möchte, dass mein geclipter bereicht dann größer ausgegeben wird.
    sprich:
    ich clipe einen 100x100px bereich eines bildes. dieser bereich, soll dann vergrößert werden auf 400x400px.
    eine art "Lupe"...

  4. #4
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: clip-Problem...

    Hast du schon einen Ansatz? Hast du schon etwas ausprobiert? Wenn ja dann

    Zitat Zitat von miniA4kuser Beitrag anzeigen
    Code? Testlink? Sonst können wir nur raten...
    ansonsten mal Herrn Google fragen
    Hoffe ich konnte helfen

  5. #5
    Fridolin93 ist offline Mitglied
    registriert
    31-12-2010
    Beiträge
    33

    AW: clip-Problem...

    da gibts eig. nicht viel, was zu der frage interessiert..
    HTML-Code:
    var oben = (parseInt(kastenY)-abstandY)*zoomFaktor/100;
    var links = (parseInt(kastenX)-abstandX)*zoomFaktor/100;
    var unten = (parseInt(kastenY)-abstandY+kastenHoehe)*zoomFaktor/100;
    var rechts = (parseInt(kastenX)-abstandX+kastenHoehe)*zoomFaktor/100;
    	lupe.style.clip = "rect(" + oben + "px " + rechts + "px " + unten + "px " + links + "px)";
    das hab ich. und das lass ich dynamisch immer ändern (folgt der mousposition).
    mein problem ist jetzt:
    wenn ich clip verwende ist das was ich damit ausschneide an seiner ursprünglichen stelle. also an der stelle an der es im bild auch war. und außenrum sind leere balken.
    ich will die balken weg haben und dass der ausgeschnittene bereich, dann in der linken oberen ecke steht.

  6. #6
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: clip-Problem...

    Da musst du hald auch die position entsprechend anpassen:
    Code:
    lupe.style.top  = "-" + oben + "px";
    lupe.style.left = "-" + links + "px";
    - position: relative; vorausgesetzt.

  7. #7
    Fridolin93 ist offline Mitglied
    registriert
    31-12-2010
    Beiträge
    33

    AW: clip-Problem...

    ok, habs und läuft alles
    aber: den "zoom" erzeug ich, indem ich das bild nochmals einfügen lasse und das dann mit "clip" bearbeite.
    ein problem habe ich aber noch:
    wenn ich an den rand komme, "hüpft" mein gezoomtes (in richtung des randes an den man kommt) um 1px*zoomfaktor...

    hier mal mein gesammter quellcode:
    HTML-Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
    <head>
    <title>Lupe2</title>
    <meta name="author" content="Miran Mizani">
    
    <style type="text/css">
    body {
    	width: 800px;
    	border-left: 1px solid black;
    	border-right: 1px solid black;
    	text-align: center;
    	margin: 0px auto 0px auto;
    }
    #bild {
    	width: 400px;
    	height: auto;
    }
    #bildRahmen {
    	border: 3px double red;
    	height: auto;
    	width: 406px;
    }
    #lupe {
    	width: 400px;
    	height: 400px;
    	border: 0px double black;
    	background-color: white;
    	position:absolute;
    	display: none;
    	overflow: hidden;
    	background-color:transparent;
    }
    #kasten {
    	width: 150px;
    	height: 100px;
    	position:absolute;
    	border: 2px solid white;
    	display:none;
    	background-image: url(kastenBG.png);
    	z-index: 10;
    }
    </style>
    
    <script type="text/javascript">
    
    function getStyleTHIS(el,styleProp)
    {
    var x = el;
    if (x.currentStyle)
    var y = x.currentStyle[styleProp];
    else if (window.getComputedStyle)
    var y = document.defaultView.getComputedStyle(x,null).getPropertyValue(styleProp);
    return y;
    }
    
    
    //-----------------------------------------------------------------------
    var zoomFaktor = 300; //in %
    var bild = "bild1.png";
    //-----------------------------------------------------------------------
    
    
    
    function einstellungen() {
    document.getElementById("bild").addEventListener('mousemove', bereich, false);
    document.getElementById("bild").addEventListener('mouseover', bereich, false);
    document.getElementById("bild").addEventListener('mouseover', innerhalb, false);
    document.getElementById("kasten").addEventListener('mousemove', bereich, false);
    document.getElementById("kasten").addEventListener('mouseout', ausserhalb, false);
    
    document.getElementById("lupeZoom").value = "1";
    document.getElementById("bild").src = bild;
    document.getElementById("lupe").src = bild;
    }
    function lupeAn() {
    	var bild = document.getElementById("bild");
    	var lupe = document.getElementById("lupe");
    	var abstandX = parseInt(bild.offsetLeft) + parseInt(getStyleTHIS(bild, "width")) + 30;
    	var abstandY = parseInt(bild.offsetTop);
    	var lupeZoom = document.getElementById("lupeZoom");
    	var lupeBreite = parseInt(getStyleTHIS(bild, "width"));
    	var lupeHoehe = parseInt(getStyleTHIS(bild, "height"));
    	if (lupeZoom.value == "1") {
    	lupe.style.width = lupeBreite*(zoomFaktor/100);
    	lupe.style.height = lupeHoehe*(zoomFaktor/100);
    	}
    	lupeZoom.value = "0";
    }
    function innerhalb() {
    document.getElementById("kasten").style.display = "inline";
    document.getElementById("ausserhalb").value = "1";
    lupeAn();
    }
    function ausserhalb() {
    document.getElementById("kasten").style.display = "none";
    document.getElementById("ausserhalb").value = "0";
    document.getElementById("lupe").style.display = "none";
    }
    function bereich(ereignis) {
    	var bild = document.getElementById("bild");
    	var kasten = document.getElementById("kasten");
    	var lupe = document.getElementById("lupe");
    	var ausserhalb = document.getElementById("ausserhalb").value;
    	var kastenBreite = parseInt(getStyleTHIS(kasten, "width")+4);//<- border
    	var kastenHoehe = parseInt(getStyleTHIS(kasten, "height")+4);//<- border
    	var bildBreite = parseInt(getStyleTHIS(bild, "width"));
    	var bildHoehe = parseInt(getStyleTHIS(bild, "height"));
    	var mausX = parseInt(ereignis.pageX);
    	var mausY = parseInt(ereignis.pageY);
    	var abstandX = parseInt(bild.offsetLeft);
    	var abstandY = parseInt(bild.offsetTop);
    	var kastenX = mausX-(kastenBreite/2);
    	var kastenY = mausY-(kastenHoehe/2);
    	var GrenzeRechts = abstandX + bildBreite - kastenBreite + 3;//<- border
    	var GrenzeLinks = abstandX + 1;
    	var GrenzeOben = abstandY;
    	var GrenzeUnten = abstandY + bildHoehe - kastenHoehe - 4;//<- border
    	if (kastenX >= GrenzeRechts) {kastenX = GrenzeRechts;}
    	if (kastenX <= GrenzeLinks) {kastenX = GrenzeLinks;}
    	if (kastenY <= GrenzeOben) {kastenY = GrenzeOben;}
    	if (kastenY >= GrenzeUnten) {kastenY = GrenzeUnten;}
    	kasten.style.left = kastenX;
    	kasten.style.top = kastenY;
    	if (ausserhalb == "1") {kasten.style.display = "inline";}
    	else {kasten.style.display = "none";}
    
    if ((mausX>=(GrenzeLinks+kastenBreite/2))&&(mausX<=(GrenzeRechts+kastenBreite/2))) {
    lupe.style.left = (parseInt(bild.offsetLeft) + parseInt(getStyleTHIS(bild, "width"))+kastenBreite*2+ 30)-(mausX-abstandX)*zoomFaktor/100;
    var X = "ok";
    }
    if ((mausY>=(GrenzeOben+kastenHoehe/2))&&(mausY<=(GrenzeUnten+kastenHoehe/2))) {
    lupe.style.top = (abstandY+(bildHoehe)/2)-(mausY-abstandY)*zoomFaktor/100;
    var Y = "ok";
    }
    if ((X=="ok")&&(Y=="ok")) {
    lupe.style.display = "inline";}
    
    
    var oben = (parseInt(kastenY)-abstandY)*zoomFaktor/100;
    //if (kastenY==GrenzeOben) {oben = oben+2;}
    var unten = (parseInt(kastenY)-abstandY+kastenHoehe)*zoomFaktor/100;
    var links = (parseInt(kastenX)-abstandX)*zoomFaktor/100;
    var rechts = (parseInt(kastenX)-abstandX+kastenBreite)*zoomFaktor/100;
    	lupe.style.clip = "rect(" + oben + "px " + rechts + "px " + unten + "px " + links + "px)";
    }
    
    /* "Hüpft" manchmal, weil dann die scrollleisten erscheinen...bild ist dann einfach zu groß... iFrame?*/
    
    
    
    //document.all["..."].style.clip="rect(obenpx rechtspx untenpx linkspx)";
    
    </script>
    </head>
    <body onload="einstellungen()">
    <h1 align="center">Lupe</h1>
    <br>
    
    <div id="alles" style="text-align:left;">
    <div id="kasten"></div>
    <div id="bildRahmen"><img id="bild" alt="" src="bild.png"></div>
    
    <div id="lupeRahmen"><img id="lupe" alt="" src="bild.png"></div>
    <input type="text" id="ausserhalb" value="1" readonly></input>
    <input type="text" id="lupeZoom" value="1" readonly></input>
    
    </div>
    
    
    <p align="right">
    <i><font size="-1">&copy; Miran Mizani</font></i>
    </p>
    </body>
    </html>
    es liegt anscheinend daran, dass mein "clip" einmal mehr ausgefüht, als meine verschiebung...
    aber ich grig es nicht weg...

  8. #8
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: clip-Problem...

    Das Problem ist, dass du deine Mausposition am Rand nicht so anpasst, dass der Rahmen nicht aus dem Bild ragt. - nur beim "kasten" machst du da etwas dagegen.
    Das kann man daran sehen, dass der Versatz des Ausschnitts von der Gewindigkeit, mit der die Maus auf den Rand triff, abhängig ist.

  9. #9
    Avatar von miniA4kuser
    miniA4kuser ist offline Lounge-Member
    registriert
    12-07-2006
    Beiträge
    3.034

    AW: clip-Problem...

    Gewindigkeit
    Hoffe ich konnte helfen

  10. #10
    Fridolin93 ist offline Mitglied
    registriert
    31-12-2010
    Beiträge
    33

    AW: clip-Problem...

    super, das könnte es sein!
    aber wie kann ich das ändern?
    ich habe ja bei meinen Grenzen schon den border addiert.
    könntet ihr mir dabei nochmal bitte helfen...

  11. #11
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: clip-Problem...

    Du könntest darauf achten, dass links und oben einen gewissen Wert nicht unterschreiten und rechts und unten einen gewissen Wert nicht überschreiten. Wenn sie es doch tun, kannst du das Ganze einfach um den Fehlbetrag in die richtige Richtung schieben.

  12. #12
    Fridolin93 ist offline Mitglied
    registriert
    31-12-2010
    Beiträge
    33

    AW: clip-Problem...

    ich weis jetzt nicht ob es elegant gelöst ist, aber ich habe es hinbekommen :-)
    und zwar dadurch, dass ich die clip-werte immer an globale variabeln über gebe und die dann auslesen lasse.
    vorteil: wenn sich der neue clip-wert nicht berechnen lässt, bleibt so der alte.
    und die clip-werte lassen sich nur dann nicht berechnen, wenn der kasten an den rand stößt :-)

    HTML-Code:
    var obenSich;
    var untenSich;
    var linksSich;
    var rechtsSich;
    
    
    
    function bereich() {
    ...
    var oben = obenSich;
    var unten = untenSich;
    var links = linksSich;
    var rechts = rechtsSich;
    
    if ((mausY>=(GrenzeOben+kastenHoehe/2))&&(mausY<=(GrenzeUnten+kastenHoehe/2))) {
    var oben = (parseInt(kastenY)-abstandY+2)*zoomFaktor/100;
    obenSich = oben;
    var unten = (parseInt(kastenY)-abstandY+kastenHoehe+2)*zoomFaktor/100;
    untenSich = unten;
    }
    if ((mausX>=(GrenzeLinks+kastenBreite/2))&&(mausX<=(GrenzeRechts+kastenBreite/2))) {
    var links = (parseInt(kastenX)-abstandX+2)*zoomFaktor/100;
    linksSich = links;
    var rechts = (parseInt(kastenX)-abstandX+kastenBreite+2)*zoomFaktor/100;
    rechtsSich = rechts;
    }
    }
    ein problem gibt es allerdings noch:
    beim ersten aufrufen der funktion schlägt die fehlerkonsole an, weil zu dem zeitpunkt noch keine konkreten werte für die globaleb variablen zur verfügung stehen...
    aber auch bei seiten wie facebook oder der jswelt meldet sie sich^^
    macht das was aus?

  13. #13
    Avatar von kkapsner
    kkapsner ist offline Super Moderator
    registriert
    28-03-2008
    Beiträge
    17.760

    AW: clip-Problem...

    Fehler sind nie gut. Auch globale Variablen sind nicht das Gelbe vom Ei.

    Hab' mal auf die Schnelle was zusammengeschustert:
    Code:
    <!DOCTYPE html>
    
    <html>
    <head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <title>Fenstertitel</title>
    <script type="text/javascript" src="http://kkjs.kkapsner.de/modules/kkjs.load.js"></script>
    <script type="text/javascript">
    kkjs.event.onWindowLoad(function(){
    	var config = {
    		img: kkjs.$("big"),
    		zoomContainer: kkjs.$("zoom"),
    		zoomSize: {w: 80, h: 60},
    		zoom: 3
    	};
    	
    	var zoomBorder = kkjs.node.create({
    		tag: "div",
    		style: {
    			position: "absolute",
    			top: config.img.offsetTop + "px",
    			left: config.img.offsetLeft + "px",
    			margin: "-2px",
    			border: "2px solid white",
    			width: config.zoomSize.w + "px",
    			height: config.zoomSize.h + "px",
    			cursor: "-moz-zoom-in"
    		},
    		parentNode: config.img.offsetParent
    	});
    	
    	kkjs.css.set(config.zoomContainer, {
    		overflow: "hidden",
    		width: config.zoomSize.w * config.zoom + "px",
    		height: config.zoomSize.h * config.zoom + "px",
    		border: "1px solid black"
    	});
    	var zoomImg = kkjs.node.create({
    		tag: "img",
    		src: config.img.src,
    		width: config.img.width * config.zoom,
    		height: config.img.height * config.zoom,
    		parentNode: config.zoomContainer,
    		style: {position: "relative"}
    	})
    	
    	kkjs.koordAdd(config.img);
    	kkjs.event.add(document, "mousemove", function(ev){
    		var mousePos = kkjs.event.getMousePosition(ev);
    		if (
    			mousePos.left.isInRange(config.img.getX(), config.img.getX() + config.img.offsetWidth) &&
    			mousePos.top.isInRange(config.img.getY(), config.img.getY() + config.img.offsetHeight)
    		){
    			mousePos.left -= config.img.getX() + Math.floor(config.zoomSize.w / 2);
    			mousePos.top -= config.img.getY() + Math.floor(config.zoomSize.h / 2);
    			mousePos.left = mousePos.left.setInRange(0, config.img.width - config.zoomSize.w);
    			mousePos.top = mousePos.top.setInRange(0, config.img.height - config.zoomSize.h);
    			kkjs.css.set(zoomImg, {
    				left: "-" + (mousePos.left * config.zoom) + "px",
    				top: "-" + (mousePos.top * config.zoom) + "px"
    			});
    			kkjs.css.set(zoomBorder, {
    				top: config.img.offsetTop + mousePos.top + "px",
    				left: config.img.offsetLeft + mousePos.left + "px",
    			});
    		}
    	});
    });
    </script>
    <style type="text/css"></style>
    </head>
    <body>
    <img src="http://l.yimg.com/g/images/home_photo_jam343.jpg" id="big">
    <div id="zoom"></div>
    </body>
    </html>
    - ist hald mit meinem Framework gelöst... sollte aber kein Problem sein, das herauszulösen.

Ähnliche Themen

  1. Neue Communityseite your-clip.com
    Von redreggae im Forum Site-Check
    Antworten: 2
    Letzter Beitrag: 27-09-2010, 12:51
  2. clip:rect Probleme...
    Von richard im Forum CSS und (X)HTML
    Antworten: 1
    Letzter Beitrag: 27-05-2009, 22:19
  3. clip dynamisch
    Von Powerslave im Forum JavaScript
    Antworten: 3
    Letzter Beitrag: 15-12-2006, 13:11
  4. [Clip] Nice Dog
    Von Freelancer im Forum Fun
    Antworten: 0
    Letzter Beitrag: 04-11-2005, 19:05
  5. [Clip] Der Kellner
    Von Freelancer im Forum Fun
    Antworten: 3
    Letzter Beitrag: 11-10-2005, 12:48

Stichworte

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •