Forum - Beitrag anzeigen

CF-Basics - javascript bild bewegen

Icon Pfeil Startseite Icon Pfeil Kategorie Icon Pfeil Suche

Icon Forum Beitrag vom 29.07.2010 08:25 (1080 Aufrufe)
Name: thorsten
Titel: javascript bild bewegen
Inhalt: hi zusammen,

ich habe ein javscript gefunden wo ich ein bild auf der seite verschieben kann.
ich möchte allerdings das sich das bild nur in einem gewissen bereich verschieben lässt.
also nicht über das gesamte browserfenster.
weiss jemand wie ich entweder dem script sage wenn eine maxinmale pixelanzahl überschritten ist, dann setze zurück auf letzte pixelzahl oder einfacher noch.
das ich einen rahmen um das ganze ziehe und das bild sich wie in einem frame nur in dem rahmen plazieren lässst ?
gut wäre natuerlich auch wenn man es zb an den rand schieben kann und die hälfte meinetwegen verschwindet, aber halt nicht über den rahmen hinaus dargestellt wird.

mhh hoffe jemand weiss rat.
hier mal das script:


<html>
<head>

<style>
img
{
position:absolute;
}
</style>

<script type="text/javascript">
document.onmousedown=coordinates;
document.onmouseup=mouseup;

function coordinates(e)
{
if (e == null) { e = window.event;}
var sender = (typeof( window.event ) != "undefined" ) ? e.srcElement : e.target;

if (sender.id=="moveMe")
{
mouseover=true;
pleft=parseInt(movMeId.style.left);
ptop=parseInt(movMeId.style.top);
xcoor=e.clientX;
ycoor=e.clientY;
document.onmousemove=moveImage;
return false;
}
else { return false; }
}




function moveImage(e)
{
if (e == null) { e = window.event;}
movMeId.style.left=pleft+e.clientX-xcoor+"px";
movMeId.style.top=ptop+e.clientY-ycoor+"px";
return false;
}

function mouseup(e)
{
document.onmousemove=null;
alert(movMeId.style.top);
alert(movMeId.style.left);
}
</script>
</head>
<body>
<div style="background-color:yellow;
width: 400px;
height: 100px;
">
<img id="moveMe" src="image.gif" width="465px" height="43px" />

</div>
<p>Drag and drop the image</p>

<script type="text/javascript">
//The movable image
movMeId=document.getElementById("moveMe");
//image starting location
movMeId.style.top="25px";
movMeId.style.left="75px";

</script>



</body>
</html>




gruss
thorsten

Antworten
Icon Forum javascript bild bewegen (thorsten, 29.07.2010 08:25)
   Icon Forum Re: javascript bild bewegen (Thomas S, 29.07.2010 08:37)

Bitte melden Sie sich kostenlos an, um eine Antwort auf diesen Beitrag zu erstellen.


Das deutsche ColdFusion-Forum cfml.de ist das Portal für Einsteiger und Experten zum Thema ColdFusion und der ColdFusion Markup Language (CFML).

© 2017 Webdesign & Hosting: CHC ONLINE Kassel | SOLVA Content-Management-System CMS
Urlaub-Angebote.de - Urlaub mit Bestpreis-Garantie buchen