Zum Inhalt springen

Auswahlrechteck


icemanonsnow

Empfohlene Beiträge

Dass ganze is n webfrontend für n programm was ich in meiner lehre machen soll.

und in dem programm soll es möglich sein bilder miteinander zu vergleichen. und um ,meinetwegen, nur einen teil zu vergleichen (ein kuhfleck zum beispiel) soll eine stelle markiert werden und um die markierung zu erleichten soll dass quadrat

sich dort aufziehen wo der benutzer dass halt vergleichen will

Link zu diesem Kommentar
Auf anderen Seiten teilen

Also für die, dies interressiert.

Hier der Quellcode.

<html>

<head>

<title></title>

<meta name="author" content="hellmuth">

<style type="text/css">

body {

margin:0px;

}

#auswahl {

border: solid 1px black;

margin:0px;

padding:0px;

font-size:0px;

position:relative;

top:0px;

left:0px;

z-index:2;

width:0px;

height:0px;

}

</style>

<script type="text/javascript">

var ziehn = false;

var startX = 0;

var startY = 0;

var limit = 10;

function Init() {

document.onmousedown = start;

document.onmousemove = zieh;

document.onmouseup = end;

rahmen = eval(document.getElementById('auswahl'));

}

function start (Ereignis) {

ziehn = true ;

if (!Ereignis) {

Ereignis = window.event;

bild = Ereignis.srcElement;

startX = Ereignis.offsetX;

startY = Ereignis.offsetY;

}

else {

bild = Ereignis.target;

startX = Ereignis.layerX ;

startY = Ereignis.layerY;

}

if(bild.id == 'bildchen') {

rahmen.style.top = startY + "px";

rahmen.style.left = startX + "px";

rahmen.style.width = "0px";

rahmen.style.height = "0px";

}

}

function zieh (Ereignis) {

if(ziehn==true) {

if (!Ereignis) {

Ereignis = window.event;

bild = Ereignis.srcElement;

var x = Ereignis.offsetX;

var y = Ereignis.offsetY;

}

else {

bild = Ereignis.target;

var x = Ereignis.layerX;

var y = Ereignis.layerY;

}

if(bild.id == 'bildchen') {

var posX = x - startX - limit;

var posY = y - startY - limit;

var negposX = startX - x - limit;

var negposY = startY - y - limit;

if(x > startX) {

if(y > startY) {

with(rahmen.style) {

width = posX > 0 ? posX + "px" : "0px";

height = posY > 0 ? posY + "px" : "0px";

}

}

else {

with(rahmen.style){

top = y + "px";

width = posX > 0 ? posX + "px" : "0px";

height = negposY > 0 ? negposY + "px" : "0px";

}

}

}

else {

if(y > startY) {

with(rahmen.style){

left = x + "px";

width = negposX > 0 ? negposX + "px" : "0px";

height = posY > 0 ? posY + "px" : "0px";

}

}

else {

with(rahmen.style){

left = x < left ? x + "px" : (x + 10) + "px";

top = y < top ? y + "px" : (y + 10) + "px";

width = startX - x + "px";

height = startY - y + "px";

}

}

}

}

}

}

function end() {

ziehn = false;

}

function mini() {

if(ziehn) {

with(rahmen.style) {

width = (parseInt(width) - 50) + "px";

height = (parseInt(height) - 50) + "px";

}

}

}

</script>

</head>

<body onload="Init();">

<div style="position:relative; left:0px; top:0px;">

<div id="auswahl" onmouseover="mini();"></div>

<div style="position:absolute; left:0px; top:0px; z-index:1;"><img src="karte.png" zindex="1" width="345" height="312" border="0" id="bildchen" onmousedown="return false;" onmousemove="return false;" alt=""></div>

</div>

</body>

</html>

einfach noch n richtigen pfad fürs bild angeben und dann probieren.

PS: Falls jemand verbesserungs vorschläge hat, ich bin offen für alles.

und wenn jemand schon eine idee hat wie man diese vorschläge umsetzen kann dann ist dass umso besser. :D

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dass ganze is n webfrontend für n programm was ich in meiner lehre machen soll.

Das geht irgendwie mit Javascript. Genau kann ich dir das nciht sagen, hab vorhin nur eine Seite gesehen, die das so tut.

http://www.rnz-epaper.de/sixcms/show.php?id=23805

Da siehst du eine Zeitungsseite und ziehst per Maus einen Rahmen. Per Doppelklick wird dieser Ausschnitt dan vergrößert angezeigt.

Denke so in der Art wirst du das ja haben wollen.

Link zu diesem Kommentar
Auf anderen Seiten teilen

Dein Kommentar

Du kannst jetzt schreiben und Dich später registrieren. Wenn Du ein Konto hast, melde Dich jetzt an, um unter Deinem Benutzernamen zu schreiben.

Gast
Auf dieses Thema antworten...

×   Du hast formatierten Text eingefügt.   Formatierung wiederherstellen

  Nur 75 Emojis sind erlaubt.

×   Dein Link wurde automatisch eingebettet.   Einbetten rückgängig machen und als Link darstellen

×   Dein vorheriger Inhalt wurde wiederhergestellt.   Editor leeren

×   Du kannst Bilder nicht direkt einfügen. Lade Bilder hoch oder lade sie von einer URL.

Fachinformatiker.de, 2024 by SE Internet Services

fidelogo_small.png

Schicke uns eine Nachricht!

Fachinformatiker.de ist die größte IT-Community
rund um Ausbildung, Job, Weiterbildung für IT-Fachkräfte.

Fachinformatiker.de App

Download on the App Store
Get it on Google Play

Kontakt

Hier werben?
Oder sende eine E-Mail an

Social media u. feeds

Jobboard für Fachinformatiker und IT-Fachkräfte

×
×
  • Neu erstellen...