|
JavaScript - Keep Track Of Mouse Click On Top Of Image, But What If Image Moves
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! Similar TutorialsI'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 have a problem with a small div of mine, namely: Code: <div id="mui" class="disk" onmousedown="mouse_down(event, 'mui');" onMouseUp="mouse_up()"> <div id="mui_image"></div> <div>MUI</div> </div> I am using some javascript to move it and the first time I press down the mousebutton on it and move around, it works fine! Usually if I release the mouse button and then hold it down again on the same div to continue moving.. Then instead I select the div with id="mui_image" instead, so that one gets dragged away just as if you select some text and drag it. My div just stay put then. If I instead were to move it once, then click outside the div, and then try to move the div again, everything works like a charm. How to solve this problem? Oh yeah, only try it in FF, works even worse in Safari. Code: <html>
<head>
<script src="geut.js">
</script>
<style type="text/css">
body
{
margin: 0px;
margin-top: 13px;
padding: 0;
font-family: georgia, times, "times new roman", serif;
font-size: 12;
color: #000;
background-color: #959595;
overflow: hidden;
}
p
{
margin: 0;
padding: 0;
}
img
{
margin: 0;
padding: 0;
display: inline;
}
#mui
{
position: absolute;
left: 850px;
top: 110px;
}
#mui_image
{
width: 43px;
height: 23px;
background-image:url(disk_up.png);
background-repeat: no-repeat;
background-position: relative;
}
.disk
{
text-align: center;
height: 63;
width: 50;
}
</style>
</head>
<body onload="resizeMainWindow()" onmousemove="mousemove(event)">
X: <span id="X-coord"></span><br>
Y: <span id="Y-coord"></span><br>
Message : <span id="message"></span><br>
Diverse: <span id="diverse"></span>
<div id="mui" class="disk" onmousedown="mouse_down(event, 'mui');" onMouseUp="mouse_up()">
<div id="mui_image"></div>
<div>MUI</div>
</div>
</body>
</html>
Code: var x;
var y;
var xcor=0;
var ycor=0;
var xcor_old=0;
var ycor_old=0;
var being_dragged = false;
var element;
function mousemove(event) {
if(event.offsetX || event.offsetY) { //For Internet Explorer
x=event.offsetX +xcor;
y=event.offsetY +ycor;
}
else { //For FireFox
x=event.pageX +xcor;
y=event.pageY +ycor;
}
document.getElementById('X-coord').innerHTML = x +'px';
document.getElementById('Y-coord').innerHTML = y +'px';
if(being_dragged == true) { //
if((y > 14)) {
document.getElementById(element).style.top = y +'px'; //
} else {
document.getElementById(element).style.top = 14;
}
document.getElementById(element).style.left = x +'px'; //
} //
}
function mouse_down(event, ele_name) {
if(being_dragged)
return;
being_dragged = true;
element = ele_name;
if((document.getElementById(ele_name).offsetLeft - x) != 0) {
document.getElementById('message').innerHTML = "ms !=0)" +document.getElementById(element).offsetLeft + "||" +(document.getElementById(element).offsetLeft - x);
xcor = document.getElementById(element).offsetLeft - x;
ycor = document.getElementById(element).offsetTop - y;
} else {
xcor = xcor_old;
ycor = ycor_old;
}
document.getElementById(element).style.cursor = 'move';
document.getElementById('X-coord').innerHTML = x +'px' + xcor;
document.getElementById('Y-coord').innerHTML = y +'px' + ycor;
x=event.pageX +xcor;
y=event.pageY +ycor;
}
function mouse_up() {
if(being_dragged) {
being_dragged = false;
document.getElementById(element).style.cursor = 'auto';
document.getElementById(element).style.top = y +'px';
document.getElementById(element).style.left = x +'px';
xcor_old = xcor;
ycor_old = ycor;
xcor = 0;
ycor = 0;
}
}
Hi I have created the following effects on the images seen here http://techavid.com/design/test3.html . You see when you hover and then click on each image, they go from grey to color. When you click on one - the others go grey and the one clicked remains color. That's cool, but now I need the text 1st: Sun for example to display and hide along with its graphic button. The word "Sun," is a link that needs to link out to a URL so it has to be separated from the image effect code. Here code I have now.... Code:
<style type="text/css" media="screen">
#wrapper {
background: url('_assets/images/sun-inactive.p') no-repeat #777eee;
width: 470px;
margin: 0 auto;
}
a#sun{
background: url('_assets/images/sun-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#sun:hover,
a#sun.active {
background: url('_assets/images/sun.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#plane {
background: url('_assets/images/plane-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#plane:hover,
a#plane.active {
background: url('_assets/images/plane.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
a#nano {
background: url('_assets/images/nano-inactive.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
float: left;
}
a#nano:hover,
a#nano.active {
background: url('_assets/images/nano.png') no-repeat;
width: 107px;
height: 78px;
display:block;
padding: 20px 10px;
}
#popuptext {
float: left;
margin: -30px 0 0 0;
padding: 0 0 0 0px;
font-size: 11px;
}
#popuptext a {
color: #ff6600;
padding: 0 30px;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="navigation">
<a id="sun" href="#"></a>
<a id="plane" href="#"></a>
<a id="nano" href="#"></a>
</div>
<div style="clear:both"></div>
<div id="popuptext">1st: <a href="#">Sun</a>
2nd: <a href="#">Airplane</a>
3rd: <a href="#">Nano</a>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function() {
// target each link in the navigation div
$('#navigation a').click(function() {
// link that you clicked
clicked = $(this).attr('id');
// make sure that all the others are not active
// except for the clicked one
$('#navigation a').each(function() {
if ($(this).attr('id') == clicked) {
$(this).addClass('active');
} else {
$(this).removeClass('active');
}
});
// prevent the default link action
return false;
});
});
</script>
What jquery or javascript code do I need to do this? thanks, chaser Hey everyone, I'm working on a website, and I have one page that uses a forum that is supplied by tal.ki. The forum works fine, but the .js file that the forum uses is grabbing the image that I am using as my header on the page (not in the header of the html, just on top of the page) and moves it down and right from where it is supposed to be. My apologizes for the file being so long, but I have no idea which line it is that makes the image move. If needed, I have pictures of how it looks in the program that I use, vs. how it looks when viewed in a browser. Thanks so much (in advance) for any help. Code: if (!window.chatter) {
window.chatter = function() { return this; }();
}
if (!window.chatter.embeds) {
window.chatter.embeds = {};
}
window.chatter.embed = function(host, args) {
var host = host;
var cid = Math.floor((Math.random())*1000000000).toString();
var default_height = 1600;
var embed_url = window.location.href.split('#')[0];
var current_path = window.location.hash.substr(1);
var disable_path = current_path && current_path[0] != "/";
disable_path |= (window != top);
if (!current_path || disable_path) {
if (!current_path && !disable_path) {
location.href = embed_url + "#/";
}
current_path = "/";
}
if (window.gadgets)
embed_url = ''; // Don't let the site change the hash
window.chatter.embeds[cid] = this;
handleCommand = function (cmd) {
if (cmd[0] == 'ch_resize') {
resizeFrame(cmd[1]);
} else if (cmd[0] == 'ch_load') {
if (disable_path)
current_path = cmd[1];
else {
current_path = window.location.hash.substr(1);
if (current_path != cmd[1]) {
current_path = cmd[1];
location.href = embed_url + "#" + current_path;
}
}
} else if (cmd[0] == 'ch_unload') {
if (window.attachEvent || findPosScroll('chatterframe'+cid) < 0)
document.getElementById('chatterframe'+cid).scrollIntoView(true);
// resizeFrame(default_height);
} else if (cmd[0] == 'ch_scrollto') {
window.scrollTo(0, findPos('chatterframe'+cid)+parseInt(cmd[1], 10));
} else if (cmd[0] == 'ch_delfoot'){
var a = document.getElementById(cmd[1]);
a.parentNode.removeChild(a);
}
}
if (window.postMessage) {
function onMessage(e) {
var cmd = e.data.split(':');
var frame = document.getElementById('chatterframe'+cid);
if (frame.contentWindow != e.source)
return;
handleCommand(cmd);
}
if (window.addEventListener)
window.addEventListener("message", onMessage, false);
else
window.attachEvent("onmessage", onMessage);
} else {
/* Fall back for browsers that don't support HTML5's postMessage */
var msg_seq = null;
function checkMessages() {
var chatter_frame = window.frames['chatterframe'+cid];
if (!chatter_frame)
return;
try {
var bus = chatter_frame.frames.msg_frame;
var hash = bus.location.hash.substr(10);
} catch(e) {
return;
}
var cmd = hash.split(':');
var seq = cmd[0];
if (msg_seq == seq)
return;
msg_seq = seq;
cmd.splice(0, 1);
handleCommand(cmd);
}
setInterval(checkMessages, 300);
}
function checkHash() {
var path = window.location.hash.substr(1);
if (!path)
path = "/";
if (path != current_path) {
current_path = path;
window.frames['chatterframe'+cid].location.replace(buildURL(path));
}
}
if (!window.gadgets) {
if (!disable_path) {
if ("onhashchange" in window) {
if (window.addEventListener)
window.addEventListener("hashchange", checkHash, false);
else
window.attachEvent("onhashchange", checkHash);
} else {
setInterval(checkHash, 300);
}
}
}
function buildURL(path) {
return 'http://' + host + path + "?" + args + "&cid=" + cid + "&eh=" + encodeURIComponent(embed_url);
}
function resizeFrame(height) {
var el = document.getElementById('chatterframe'+cid);
el.style['height'] = height + "px";
if (window.gadgets) {
gadgets.window.adjustHeight();
}
}
function findPosScroll(id) {
var node = document.getElementById(id);
var curtop = 0;
var curtopscroll = 0;
if (node.offsetParent) {
do {
curtop += node.offsetTop;
curtopscroll += node.offsetParent ? node.offsetParent.scrollTop : 0;
} while (node = node.offsetParent);
return curtop - curtopscroll;
}
return -1;
}
function findPos(id) {
var node = document.getElementById(id);
var curtop = 0;
if (node.offsetParent) {
do {
curtop += node.offsetTop;
} while (node = node.offsetParent);
return curtop;
}
return -1;
}
//--Auto Theming:
try{
var theme_args = '';
if (window.chatter_options) {
if ('css_append' in window.chatter_options) {
theme_args = '&cssa='+encodeURIComponent(window.chatter_options['css_append']);
} else if ('css_replace' in window.chatter_options) {
theme_args = '&cssr='+encodeURIComponent(window.chatter_options['css_replace']);
}
}
if (theme_args === '') {
document.write("<span id='probe"+cid+"'></span>");
var op = document.getElementById('probe'+cid);
var p = op;
var i = 0;
var color = null;
var font = null;
while (i < 1000){
p = p.parentNode;
if (window.getComputedStyle) {
var style = window.getComputedStyle(p, null);
color = style.getPropertyValue('background-color');
} else {
color = p.currentStyle.backgroundColor;
}
if(color != 'transparent' && color != '' && color != 'rgba(0, 0, 0, 0)') {
break;
}
color = null;
i++;
}
if (window.getComputedStyle) {
var style = window.getComputedStyle(op, null);
font = style.getPropertyValue('font-family');
} else {
font = op.currentStyle.fontFamily;
}
//ie8 no like this
//delete op.parentNode.removeChild(op);
if (font)
font = font.replace(/['"]/g,'');
theme_args = '&f='+encodeURIComponent(font) +'&t='+encodeURIComponent(color)+'&nocss=1';
}
} catch(e) { }
var forum_code = "<iframe id='chatterframe"+cid+"' name='chatterframe"+cid+"' src='" + buildURL(current_path) + theme_args + "' style='width:100%; height:" + default_height + "px; border:0;' scrolling='no' frameborder='0' border='0' width='100%' height='" + default_height + "'></iframe>";
document.write(forum_code);
return this;
};
try {
if (window.location.hash.substr(0, 9) != "#msgframe")
window.chatter.embed('qcx1quj3rz.embed.tal.ki', '');
} catch(e) {
document.write("<div style='background-color:white; color:black';>Forum failed to load: " + e + "</div>");
}
I've been playing around on my off time from other work to learn javascript better so I made this little php javascript game that randomly puts 10 boxes in different locations in a 10x10 table. The object is to close the boxes by clicking them and get timed on how long it takes to close all 10 boxes. The problem is you can click the same box real fast and only have to click a couple boxes for the timer to stop. So what I'd like to know what is the best way to only accept one click for each box generated. Here is what I'm using so far for the click validation: Code: <script language="javascript">
var tovalidate = 10;
function validate()
{
tovalidate -= 1;
if(tovalidate === 9)
starttimer();
if(tovalidate === 0)
stoptimer();
}
</script>
And using Jquery to fade the boxes pretty after click and trigger the validator: Code: <script>
$("#<?=$c;?>").click(function () { /*where $c is id generated for each specific box */
$("#<?=$c;?>").fadeOut("slow");
validate();
});
</script>
How to mouse over the image then the words will appear below it?
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! 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.
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 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 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.
What is the correct code to make a sound play every time you click a certain image? All the codes I've found online aren't working, or I'm not inputting something correctly..
I'm sure this question has been asked, but I tried searching for this answer using many different keywords, but I don't know the correct terminology for my question, as the search results turn up other topics. I'm wondering if there's simple code for clicking on a thumbnail to have a larger version of the picture appear above, but still within, the same webpage, and the background darkens a little. The larger picture has a "close" button, which you click to get back to the underlying original page. An very simple example of the type I'm looking for is he http://www.salon.com/comics/tomo/200...omo/index.html I'm assuming this is a java script that does this. I'm using DreamWeaver. Does Adobe have this type of coding in their "Spry" coding? If not, is there a simple template of the code out there? Thank you for any help. Hi, I want to load an image when a user clicks a link on my page. The image is a tracking pixel for an affiliate network, so it doesn't need to be visible to the user (as it's not an image anyway but a php file). I assume this would use the onclick event. Can anyone help? I have about 40 images on an educational website. When the user clicks each image, a different one second long mp3 should play without opening a new window. Is it possible to do this with javascript? Thanks in advance. I am working on implementing a gallery into my website with categories that collapse/expand the set of images within those categories. i figured out mostly everything i need except i can't get the BUTTONS to behave the way that I want. I'm working with the following images: arrow1: arrow2: arrow3: in general, I want "arrow1" to change to "arrow2" whenever you hover a mouse over it, and back to "arrow1" when the mouse is moves away. (which is simple by itself) the complicated part that I can't figure out, is what happens when you CLICK the button. I want the image to change to "arrow3" when it is clicked (because the content expands), and to STAY at that image until it's clicked again, at which point it should behave as what I started with. The problem is, I can get the arrow to change on click no problem, but once the mouse is moved away, the "onMouseOut" effect changes it back to "arrow1". this is the code I'm working with, hope someone can help Code: <SCRIPT LANGUAGE = "JavaScript">
<!--
first=new Image
first.src="http://www.clearnonsense.com/images/arrow1.png"
second=new Image
second.src="http://www.clearnonsense.com/images/arrow2.png"
// --></SCRIPT>
</HEAD>
<table border="0">
<tr>
<td>
<a href="javascript:void(0)" OnMouseOut="monitor.src=first.src" OnMouseOver="monitor.src=second.src" onMouseUp="clickdown('pic1')"><img src="http://www.clearnonsense.com/images/arrow1.png" border="0" name="monitor" onclick="showhide('div1',this,'http://www.clearnonsense.com/images/arrow1.png','http://www.clearnonsense.com/images/arrow3.png');"/></a>
</td>
</tr>
<tr>
<td valign="top" width="15">
<div id="div1" style="display: none;">imgset1</div>
</td>
</tr>
</table>
Hey guys! How can i simulate a click event? Like a real mouse click. and a keyboard click event? |
|||||||