|
JavaScript - Image Motion By Drag Or Mouse Swipe
Hi,
I am new here, I am trying to find solution for one problem with my new web page, I want to use amazing effect -by mouse draging or swipe on the certain image which should launch animation effect (something like image rotating) -set of images should run dynamicaly and so simulate fluid effect (movie). For a better Idea what I need it can be for example something as physical lever switch with spring when this switch is slightly tilted spring complete this action and switch is flipped to other state. Or another example image of book should be on web and when someone drag and pull page this should independently continue and complete action - turn to new page. So my question .. is something like that possible with javascript if yes can You please point me where I have look or how this can be done, each advice will be valuable for me or maybe javascript isnt right choice for this can You advise me? THANKS Similar TutorialsHi, I have a scenario in which i have to drag and drop some objects in a circular motion, but under spacific boundaries. To expain the scenario better, I have attached a image of the problem. If possible kindly provide me code, either logical description/solution of the problem would be very helpful. Thanks Sa9chit can any one say me how to resize a div by mouse dragging in javascript........ ..first of all is it possible or not?? and if so , what should i do...... Hi! Just registered, because I'm trying to figure out some dragging stuff and it's not working the way I'd like and I really can't figure out why. I made a drag element (image). I just want to apply the code to this element. This is what happens: 1. I click on the image 2. I hold the mouse down and drag => the element don't follow 3. I let go of the mouse button => the element gets dragged 4. I click again => the element stops dragging This is what I would like to happen (obviously): 1. I click the image 2. Hold the mouse down and drag => element follows 3. Mouse up => element stops following Code: var dragSko;
var dragSkoUrsp;
document.onmousedown = startaKod;
document.onmouseup = musUpp;
function startaKod(e) {
if (e.target.id == 'dragsko') {
startX = e.clientX;
dragSkoUrsp = parseInt(e.target.style.left);
document.onmousemove = musFlyttDrag;
dragSko = e.target
}
function musFlyttDrag(e) {
dragsko.style.left = (dragSkoUrsp + e.clientX - startX) + 'px' ;
}
}
function musUpp(e) {
document.onmousemove = null;
}
I'd very much appriciate if some kind soul had a look and explained what I've done wrong. I've got to have a typo somewhere, but i can't seem to find it. I need a new pair of eyes to point it out for me. background: trying to code a mouseover link for a nav bar. everything is working( hyperlink, normal image shows up) but when i mouse over the image swap doesn't happen. I have 2 parts of code. 1st preloads images and does the swap function. loads in <head> See below: Code: <SCRIPT language="javascript" type="text/javascript">
if (document.images)
{
/* preload images */
var subcontractorsOn = new Image ();
subcontractorsOn.scr = "subcontractorsOn.gif";
var subcontractorsOff = new Image ();
subcontractorsOff.scr = "subcontractorsOff.gif";
}
function mouseOn (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "On.scr");
}
function mouseOff (imgName)
{
if (document.images)
document [imgName].scr = eval (imgName + "Off.scr");
}
</SCRIPT>
2nd just calls the functions to preform the swap. this is in the <body> see code below Code:
<a href="subcontractors.htm" onMouseOut="mouseOn('subcontractors')"
onMouseOver="mouseOff('subcontractors')">
<img src="subcontractorsOff.gif" height="40" width="133" name="subcontractors" id="subcontractors" border="0" alt="subcontractors"></a>
any insight would be great. regards, Fatmann66 hi, i want to drag the div which have a image in it: but i find that if i click on the image, i cannot drag the div, (in FF3.5) any advice would be appreciated. Code: <div id="div1"> <imc src="XXX.jpg"> </div> and i have a JS something like that...: Code: drag();
function drag(){
document.onmousedown = startdrag;
document.onmouseup = enddrag;
}
function startdrag(e){
dragobj=e.target;
alert(dragobj.id);
}
......................
Hi, I am still designing the website and want some flexibility. I am capturing the mouse clicks fine on top of an image, but the coordinates are absolute and not relative to the image. How can I capture mouse clicks relative to the image so that I can move the image anywhere in my website? Thanks! Hi all, I hope you are able to help me out. I have a a page (see code below, I have compressed it to 2 images) where I want to let the user drag and drop images to anywhere on the page (I have achieved this.) What I want to be able to do is allow the user to dock 2 images together. In the example below the 2 images are horizontal lines. What I want the user to be able to do is move the images together and dock them so that they form one horizontal line. When the user moves one of the pictures both will move and stay docked. my initial idea was that when the user selects "dock" I somehow move both images into a div and make the div dragable, that way both images move together. Then if the user selects "undock" both images are removed from the div and become draggable again. I hope this makes sense. Can anyone help? [CODE] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>drag, Drop and dock</title> <style type="text/css"> .drag { border: 1px solid black; background-color: rgb(240, 240, 240); position: relative; padding: 0.5em; margin: 0 0 0.5em 1.5em; cursor: move; } </style> <script language="JavaScript" type="text/javascript"> <!-- // this is simply a shortcut for the eyes and fingers function $(id) { return document.getElementById(id); } var _startX = 0; // mouse starting positions var _startY = 0; var _offsetX = 0; // current element offset var _offsetY = 0; var _dragElement; // needs to be passed from OnMouseDown to OnMouseMove var _oldZIndex = 0; // we temporarily increase the z-index during drag InitDragDrop(); function InitDragDrop() { document.onmousedown = OnMouseDown; document.onmouseup = OnMouseUp; } function OnMouseDown(e) { // IE is retarded and doesn't pass the event object if (e == null) e = window.event; // IE uses srcElement, others use target var target = e.target != null ? e.target : e.srcElement; // for IE, left click == 1 // for Firefox, left click == 0 if ((e.button == 1 && window.event != null || e.button == 0) && target.className == 'drag') { // grab the mouse position _startX = e.clientX; _startY = e.clientY; // grab the clicked element's position _offsetX = ExtractNumber(target.style.left); _offsetY = ExtractNumber(target.style.top); // bring the clicked element to the front while it is being dragged _oldZIndex = target.style.zIndex; target.style.zIndex = 10000; // we need to access the element in OnMouseMove _dragElement = target; // tell our code to start moving the element with the mouse document.onmousemove = OnMouseMove; // cancel out any text selections document.body.focus(); // prevent text selection in IE document.onselectstart = function () { return false; }; // prevent IE from trying to drag an image target.ondragstart = function() { return false; }; // prevent text selection (except IE) return false; } } function ExtractNumber(value) { var n = parseInt(value); return n == null || isNaN(n) ? 0 : n; } function OnMouseMove(e) { if (e == null) var e = window.event; // this is the actual "drag code" _dragElement.style.left = (_offsetX + e.clientX - _startX) + 'px'; _dragElement.style.top = (_offsetY + e.clientY - _startY) + 'px'; } function OnMouseUp(e) { if (_dragElement != null) { _dragElement.style.zIndex = _oldZIndex; // we're done with these events until the next OnMouseDown document.onmousemove = null; document.onselectstart = null; _dragElement.ondragstart = null; // this is how we know we're not dragging _dragElement = null; } } //--> </script> </head> <body> <img class="drag" src="Horizontal_Line.png" alt="A horizontal line" /> <img class="drag" src="Horizontal_Line.png" alt="Another horizontal line" /> </body> </html> [CODE] Hello All, How can I prevent a browser from letting an image drag. I've tried this snippet: Code: document.onmousemove = function() {return false};
Thanks in advance! How do I use JS to make an html file that displays vehicular motion on intersecting roadways? - FULL QUESTION IS ENCASED IN SAMPLE HTML BELOW HERE Code: <style>
.Road1
{
background: black;
color: white;
width: 30px;
height: 250px;
border: solid black 2px;
}
.IntersectContainer
{
width: 100%;
}
.Road2a
{
background: darkred;
color: white;
float: left;
margin-left: 20%;
width: 30%;
border: solid black 2px;
}
.Road2b
{
background: darkred;
color: white;
float: right;
margin-right: 20%;
width: 30%;
border: solid black 2px;
}
pre
{
background: turquoise;
color: black;
width: 40%;
font-weight: bold;
padding: 1%;
}
</style>
<body style="background: #349533;">
<center> <textarea rows=20 cols=70>
How do I use JS to make an html file that displays vehicular motion on intersecting roadways?
Since I do not know how to do this in JS, I include only html code that simulates the display.
This appears to be impossible to do in JS; but JS easily moves images from left to right and up and down; so the solution to the problem seems to be to create a traffic grid with JS and then have images that look like vehicles move along the grid roadways.
The kicker is this: the JS has to have a series of funx that allow the following:
1 add more vehicles to a part of the gridway to simulate the buildup of traffic on one road section
2 speed variances between vehicles: slow vehicles, fast vehicles, stationary vehicles
3 remove vehicles from a part of the gridway to simulate how traffic jamming can be reduced
The creation of these 3 items would require a button-clicking action somewhere onscreen to do the job.
Below here is html code that simulates one potential display of this gridway:
</textarea> </center>
<hr>
<center>
<div Class="Road1">
Road1
<br>
motion
<br>
down
<br>
|
<br>
|
<q style="background: darkred; color: white;" width: 15px;> car </q>
</div> </center>
<center> <div class="IntersectContainer">
<div class="Road2a">
Intersecting Road2
<br>
motion left to right ---------
<q style="background: #955479; color: black;" width: 15px;> car </q>
</div>
<div Class="Road2b">
Intersecting Road2
<br>
motion left to right ---------
<q style="background: #504504; color: black;" width: 15px;> car </q>
</div>
</div> </center>
<cite style="background: white; color: darkblue; width: 50px; float: left; margin: 5px;">
button speed of cars on road 1
</cite>
<cite style="background: white; color: darkblue; width: 50px; float: left; margin: 5px;">
button speed of cars on road 2
</cite>
<cite style="background: darkblue; color: white; width: 50px; float: right; margin: 5px;">
button add cars to road 1
</cite>
<cite style="background: darkblue; color: white; width: 50px; float: right; margin: 5px;">
button add cars to road 2
</cite>
<center>
<div Class="Road1">
Road1
<br>
motion
<br>
down
<br>
|
<br>
|
<q style="background: #434349; color: black;" width: 15px;> car </q>
</div> </center>
<center> <pre>
TWO IMPORTANT POINTS:
1 Don't be seduced into using the html code shown here
because it will only interfere with the solution
2 Since this is a difficult problem to solve
any efficient solution
should include some sort of copyright credit to the encoder
</pre> </center>
I have a javascript slideshow and I can't seem to get the thumbnail motion tween to be smooth and consistent on all browsers. the entire script is on one single HTML file. here is a link to it: http://www.mediastream247.com/temp/ss9.html somebody please help. I have been trying for weeks to figure this out and have searched all over the internet, but still no solution. it's slow on IE and choppy on Firefox. On Safari it's OK, but could be better. How to mouse over the image then the words will appear below it?
I Need some help with mouse overs. I have 2 images, Image A and Image B. I need to mouse over Image A and have Image B change. Please help.
Hello everyone, I'm looking for a javascript script that will load a small image where the mouse is, then it would go away after a couple seconds. Thanks a bunch! area of an image on which the mouse is positioned should only show in the preview, not the full image .. is this posible if yes how ?? Plz suggest me something ........... Samaiya Example of my problem: HERE The code is derived from a site offering some advice for javascript: HERE The example of mine tries to use an image as hyperlink... and use mouse events for certain actions. Aside from possibly being the worst javascript code humanly possible...once I slaughtered the code from the site mentioned above, I'm not getting how to arrange things so that a mouse over event switches an image , as does mousedn and mouseup, And (and this is the rub for me) repeating the setup in the same way for a list of quicktime video links. I've got it to work for one row in the table I'm using to attempt some kind of formatting. I'm told `css' is a better way for that but I'm completely ignorant about how to use `css'. So, for now I'm using a table to get at the javascript question. The idea is for viewer to see three red dots at the front of each item being offered. Mouseover is supposed to switch to a green arrow... mousedn is supposed to switch to 2 check marks. I wanted the check marks to persist, so for lack of knowing how to accomplish that... I let mouseup call the same image. (the check marks; Maybe just omitting any directive for mouseup would have the same effect?) About the `image persisting after being clicked' question: It is really a separate question so I will probably start a different thread for that. What I've done works for one list item... but fails for more than one. The only active member of the list (2 in my example) is the bottom one. mouse events on the top one are carried out on the bottom one. I tried to just change the name of all variables in the javascript, and the name given in the `img src=' section of the html code, for the second row... but clearly not what is needed. I changed the names shown below by incrementing the number in the names by 1. I've only posted one row's worth but the next row uses the same code with the variables incremented. And hopefully someone will look at the actual example (URL given above) and see the full code. The basic code I've put here for convience.: Code: <table>
<tr>
<td valign=top >
<A href="./t2.html" onMouseOver="return changeImage()" onMouseOut= "return changeImageBack()"
onMouseDown="return handleMDown()" onMouseUp="return handleMUp()"
><img
name="jsbutton_0" src="./3dots.png" border="0"
alt="javascript button"></A> some nice video
<SCRIPT language="JavaScript">
var myimgobj_0 = document.images["jsbutton_0"];
function changeImage()
{
document.images["jsbutton_0"].src= "./aro1r-mo.png";
return true;
}
function changeImageBack()
{
document.images["jsbutton_0"].src = "./3dots.png";
return true;
}
function handleMDown()
{
document.images["jsbutton_0"].src = "./checks.png";
return true;
}
function handleMUp()
{
document.images["jsbutton_0"].src = "./checks.png";
return true;
}
</SCRIPT>
</tr>
</td>
hi everyone, firstly to call myself a noob would be inflating my ego. I have done one project in javascript so far and have had no schooling on the topic, however I have learned quite a lot in the last few months from this thing called the 'internet'. So far I managed to make an html image map that has various tooltips which will appear onmouseover, and the tooltip disappears onmouseout. Each point of coords that i have defined has a hyperlink to a different page on the internet. It works just like i wanted it to and i couldn't be happier, that is, when i'm using a mouse... When i am using a touchscreen device it is a different story. specifically i'm trying to port my html page to android as i figured it would be easy with the android sdk and webview (it was, but read on). What i found when i used the 'app' on my phone was that onmouseover works when you touch the screen, however it also registers as a click, so pop goes the tooltip, and i'm whisked away to my webpage. not the desired result. Ideally I would like to hold down the screen for 3 seconds and then the hyperlink would activate, but i decided that just getting the thing functional would suffice for the time beaing so i tried to include some 'ondblclick' that would trigger a document.location. This worked fine on a web browser again, but had no result on the touchscreen. I decided to abandon this half step because I have read that ondblclick doesn't work in an image map and it isn't my intended result anyway. I have found a lot of javascript and jquery samples that emulate the onHold event that i'm trying to achieve, both on this forum and all over the internet, however these samples are overly complex and are focused on looping an action, such as incrementally increasing a value or zooming or whatever. I just want to redirect the user to another page if they trigger 'onmousedown' for 3 seconds. anybody want to trade some help for a thankyou? Hi all, First post here in a long time, I'm finally getting round to sorting out a portfolio website. I have a rollover image which has a mouse over and down action and a table cell which has a mouse over and down action which swaps the assigned css class. What i need to happen is when i mouse over the table cell containing the rollover image the table cell below switches the style assigned to it. I have it working the other way around so when you mouse over the bottom cell the image in the top cell swaps, see he http://onebitrocket.co.uk/swapimageandtext.html I'm basically looking for an action similar to a swap image in a cell which has it's ID defined onmouseover="MM_swapImage('Image4','','images/thumbs/th04.jpg',1)" so onmouseover="MM_swapstyle... Any help would be great Thanks want to get selected text and image values .Since there is an randomly changed text and image on my page.I used window.getSelection() but this will return only selected text values not images ..so please guide me to solve this problem.
In homePage(1 photo) and in Gallery(9 photos) at http://www.pafos-wedding.com/ I setup mouse rollover functionality > bigger photo...but bigger image appear below smaller...what to do appear next to smaller, so top side of both photos are on same line? Hi All, I'm new to the CF forums and also to JavaScript. Trying to get a pop-up div to be draggable, but it doesn't seem to be working. Can someone help me out? I'd be very grateful! JavaScript I'm using: Code: //used for dragging div
function agent(v)
{
return(Math.max(navigator.userAgent.toLowerCase().indexOf(v),0));
}
function xy(e,v)
{
return(v?(agent('msie')?event.clientY+document.body.scrollTop:e.pageY):(agent('msie')?event.clientX+document.body.scrollTop:e.pageX));
}
function dragOBJ(d,e)
{
function drag(e)
{
if(!stop)
{
d.style.top=(tX=xy(e,1)+oY-eY+'px');
d.style.left=(tY=xy(e)+oX-eX+'px');
}
}
var oX=parseInt(d.style.left),oY=parseInt(d.style.top),eX=xy(e),eY=xy(e,1),tX,tY,stop;
document.onmousemove=drag;
document.onmouseup=function()
{
stop=1;
document.onmousemove='';
document.onmouseup='';
};
}
//used for pop-up div
function pop(div)
{
document.getElementById(div).style.display='block';
return false
}
function hide(div)
{
document.getElementById(div).style.display='none';
return false
}
Also, here is the HTML: Code: <a href="#" onclick="return pop('myDiv2')">Pop-up div #2</a> - Hidden div shows upon clicking this link, but it won't drag
<div class="bubble" onmousedown="dragOBJ(this,event); return false;">
<div id="myDiv2" class="parentDisable">
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
<p><a href="#" onClick="return hide('myDiv2')">Close [X]</a></p>
</div>
</div>
And the CSS: Code:
.parentDisable {
position:absolute;
margin:120px;
padding:20px;
width:400px;
display:none;
z-index:3;
background-color:#DEDEDE;
border:1px solid #DEDEDE;
border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px;
}
.bubble { position:fixed; width:400px; top:150px; left:250px; cursor:move; }
|
|||||||