Working With Image Coordinates And Dynamic Linking.
Jul 23, 2005
I have a page with a large centre-aligned image on it. I want a
functionality whereby users can click their mouse on any point in this
image and it would then show a virtual mouse pointer at the place where
they clicked it. If they were to click somewhere else, the position of
the virtual cursor would change.
The position of the cursor needs to dynamically generate a link and
display it in a form field text edit box.
If that link is then viewed separately, it would launch the same page
with the virtual mouse pointer at the location where the original
person placed it.
Basically I want to be able to have one guy point to a location on the
image for the benefit of another guy, but graphically as opposed to
relying on written explanation.
View 1 Replies
ADVERTISEMENT
Nov 23, 2005
I have a simple problem: mark a list of defects
on an image.
I think the best way to do it is to select a single
deffect, then take two coordinates of coursor
form an image on a web page (first when user press
the button, and the second when he releases it).
Those two points are going to be send to the web
application (i.e. with AJAX) and saved in a database.
Later, I will use those points to render
the image with RMagic (drawing the lines and defects
list numbers on top of the image).
Any suggestions how to do it?
View 4 Replies
View Related
May 7, 2005
Is there a way either in PHP or Javascript where the cooridinates of a requested image can be worked out? Let me explain - our members must have an image that is requested from our web server placed above the fold on their web site.
Instead of manually checking that the image is above the fold we would like our application that sends the image (written in PHP) or the Javascript on the members web page that calls the image each time th eweb page loads to tell us where the image will be placed on a web page. Is this possible?
View 24 Replies
View Related
Oct 6, 2010
set coordinates for an image I want to add to my page? I have the center coords where I want it to be places x is 400 and y is 90. I've searched all over the internet trying to find a solution.
View 9 Replies
View Related
Apr 2, 2010
i have to draw a line between to different coordinates which are going on google maps so for example :
[Code]...
the above coordinates are in xml format which, i later call in Java script functions and display them on the map as a simple pointers what i need is from one point of coordinates to another point of coordinates Java script would draw a line which would represent the direction from one coordinate to other .
View 2 Replies
View Related
Jul 23, 2005
When I click on the image form element
<INPUT type=image name=point src="map.png">
point.x and point.y values get submitted to the server
specifying where on the image I have clicked.
Is there any (simple) way to get ahold of that point.x and
point.y BEFORE they are sent to the server (and prevent
that from happening)? Ie. I just want the points where
someone clicks on an image and not interested in a submission
to the server.
View 3 Replies
View Related
Mar 17, 2011
Is there a way to write a function that would be....
If the coordinates of an image are _____ then do this ______ ?
View 3 Replies
View Related
Jul 28, 2009
i have a circular image... with pie shaped areas. i would like to use some form of jQuery and either a popup or tool tip that is CSS customizable... i looked at maphilight in the jquery plugins, but i dont see how you can make a pop up with that. unless there is another method i should go about doing this..
View 1 Replies
View Related
Sep 13, 2009
I need to restrict an area on the image but also get the coordinates from the image. I am using a form element "input type=image" so I can get the X Y coordinates from an image. I don't want the user clicking on a whole image, in this case a map of a country. I don't want the users clicking off the country's borders in to another country and I want to be able to get the coordinates from inside the country. I have tried to mix the element from the form with the area shape so when someone will click on the image it will first verify if it's over the hotspot and if it's over the poly coords then it will allow the user to click, the form will submit and the coordinates will be stored into the database.
I just don't know how I could integrate javascript into this. This is my code, not really something functional, the coordinates will pass on to the next page as a variable but limiting the area where the users may click is something that I have not figured out. I can create an area shape but without getting the coordinates from the image. Anything will do, even without <input type=image , if there is some way around this so I can make this work.
<script type="text/javascript">
function myEye() {
document.coordform.submit();
}
</script>
<form action='store.php' method=post name="coordform"> .....
View 4 Replies
View Related
Feb 2, 2007
I have the following code taht will allow me to move an image around a page when the mouse is clicked on the image. Code:
View 3 Replies
View Related
Sep 26, 2005
I am trying to capture the image coordinates when a user clicks on an
image. My code is working in Firefox, Mozilla, Netscape, IE, and
Opera, but fails under Konqueror (and I suspect Safari). The code below
fails in Konqueror when the page is scrolled down; the coordinates are
off by the scroll amount.
My code in the html img tag: onClick="MLDot(event)"
and the related statements in the MLDot function:
xPosition =
event.offsetX?(event.offsetX):event.pageX-document.getElementById("clickImage").offsetLeft;
yPosition =
event.offsetY?(event.offsetY):event.pageY-document.getElementById("clickImage").offsetTop;
Anyone know how to pick up image coordinates in Konqueror/Safari?
View 1 Replies
View Related
Apr 2, 2008
I am currently in Web Design I class. I do not yet know javascript. However, I am currently making a music page and I am using the Phatfusion Image Menu as my navigation. What the Image Menu does is it cascades and expands when moused over, revealing an image, which can be a link. When clicked, the image stays in it's expanded form so that the user can see which page he/she is currently on. The problem is that I can get the menu to work correctly and open a new window, but that is not what I want it to do. What I want is for the menu to stay expanded (without refreshing) when an image (link) is clicked, but I want the rest of the page to change.
I believe that the problem is in the javascript: I don't know how to code in javascript well.
Here is the section I am currently looking at.
Code:
Right now, alert makes a javascript alert telling the user the link. If I change alert to open, it opens the link in a new window. How do I get a new page to load without reloading the menu? I want the page to load behind the menu.
The links I am using are here:
Code:
This is the main javascript code if it is needed.
Code:
Licence: Open Source MIT Licence
View 2 Replies
View Related
Aug 13, 2011
Below is a very simple jquery slideshow script which functions exactly as it should. But, if I link an image in the DIV set (See proposed change section) the slideshow breaks, instead of cycling through each image in turn it keeps trying to cycle the first image over and over. Script linking in header of HTML page:
<script type="text/javascript" src="script/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="script/slideshowsc.js"></script>
CSS on HTML controlling DIV position/opacity
#slideshow {
position:relative;
height:186px;
}
#slideshow IMG {
position:absolute;
top:0;
left:20px;
z-index:8;
opacity:0.0;
}
#slideshow IMG.active {
z-index:10;
opacity:1.0;
}
#slideshow IMG.last-active {
z-index:9;
}
DIV setup in HTML page
<div id="slideshow" style="padding-top:15px; text-align:center; width:540px; padding-bottom:43px;">
<img src="images/did-u-know1.png" width="499" height="186" border="0" class="active" />
<img src="images/did-u-know2.png" width="499" height="186" />
<img src="images/did-u-know3.png" width="499" height="186" />
</div>
Proposed Changi in DIV Code here
<div id="slideshow" style="padding-top:15px; text-align:center; width:540px; padding-bottom:43px;">
<a href="whatever.html><img src="images/did-u-know1.png" width="499" height="186" border="0" class="active" border="0" /></a>
<img src="images/did-u-know2.png" width="499" height="186" />
<img src="images/did-u-know3.png" width="499" height="186" />
</div>
Finally, Javascript / Jquery fired through body tag onload
function slideSwitch() {
var $active = $('#slideshow IMG.active');
if ( $active.length == 0 ) $active = $('#slideshow IMG:last');
// use this to pull the images in the order they appear in the markup
var $next = $active.next().length ? $active.next()
: $('#slideshow IMG:first');
// uncomment the 3 lines below to pull the images in random order
// var $sibs = $active.siblings();
// var rndNum = Math.floor(Math.random() * $sibs.length );
// var $next = $( $sibs[ rndNum ] );
$active.addClass('last-active');
$next.css({opacity: 0.0})
.addClass('active')
.animate({opacity: 1.0}, 1000, function() {
$active.removeClass('active last-active');
});
}
$(function() {
setInterval( "slideSwitch()", 8000 );
});
View 1 Replies
View Related
Sep 5, 2011
I have put together an image gallery that contains links to each individual image, however, I would like to link to individual images on a separate html document and cannot for the life of me determine how to go about doing this.
rnmix
Code:
<html>
<head>
<script type="text/javascript">
[Code]....
View 1 Replies
View Related
Sep 30, 2011
I'm working on a gallery site using galleriffic. It is composed of 13 seperate galleries (couldn't figure out a way to integrate them into one) and what I would like is an index page which users can jump to any specific image in a gallery. [URL]. There is a current example, and what I'm trying to do is make a drop down menu form where someone could select a piece of granite, (eg. Giallo Latina) and it would jump them straight to that page. However if I link to "butterscotch.html#5" it doesn't work. Is there any way of creating a drop down menu that could handle this?
View 2 Replies
View Related
May 31, 2010
This is what I am seeking: On the main page we have 3 different images (img1, img2, img3), that must link to another page (photo page) with a photo in the middle enlarged: for example if I click img1 i will go to the photo page with img1 enlarged in the middle, and if I click img2 will go to the photo page with img2 in the middle. the photo page has photo thumbnail sliding at the bottom of the page that links to the same middle enlarged photo based on the clicked photo. is it doable with JS? or should I look somewhere else?
View 1 Replies
View Related
Apr 7, 2010
Actually the below code only creates dynamic DIV in IE, but for Firefox it does not create any DIV. Also it does not create the event onclick to be triggered when clicking on any area inside the DIV.
I want to create dynamic DIV in firefox and IE + I want onclick event when clicking on the DIV as I want to that click to delete the content of the DIV or you can say collapse it.
[Code]...
View 6 Replies
View Related
Mar 28, 2006
I've got some javascript that adds in form elements after a page has loaded. The checkboxes need an onchange event added to them which will call a function. However, if I enter the function call against the onchange event it doesn't work, if i enter the full function against the onchange then it does. Hard to explain but here's the working and non-working Code:
View 4 Replies
View Related
Jul 2, 2011
I'm frustrated :(. I've been trying to get this single piece of code to work. I've looked at quite a few sources out there, but everything I try fails. My site uses AJAX to upload a file, and once complete I dynamically add the file name, size, description, etc to a table.
I have a javascript method that will allow me to download the file once uploaded - and I put an onclick event into some of the TDs in the row I added. (Note: I didn't want to put it in the TR because I also have a delete button in the row).
[Code]...
View 1 Replies
View Related
Jan 30, 2009
I have a script that displays a (countdown) progress bar in the new window when a user clicks on a link to a site. this works perfectly in IE but not in Firefox.
<script type="text/javascript">
View 2 Replies
View Related
Mar 7, 2008
I'm trying to create a dynamic drop down box where the first drop down box populates the second drop down, but it isn't working. I have two tables; pricelist with fields,
-id
-groupname
-item
-price
groups with fields,
-id
-groupname
I've got the code and to me it looks as though it completely works, but i think its the fact that two of the fields have the same name, and it's causing problems.
[Code]...
View 6 Replies
View Related
Apr 27, 2010
If the user types "a" then the select box is populated with "Choose An Animal...", then the three three animals beginning with A. So far so good. But if the user selects say Albatross and then types the letter b then the option "Bear" is selected rather than "Choose An Animal". Although the code is sel.selectedIndex = 0; (not 1). How can I force the selected index to 0 when a choice has been made previously? Is this a bug - if so it is the same in IE and FF.
<html>
<head>
</head>
<body>
[code]...
View 4 Replies
View Related
Jul 23, 2010
Just working on this page - [URL]
In Opera, the dynamic resize of the iframe isn't working correctly. As you can see in the code, I have set a minimum height of 200px so the iFrame should always be a minimum height but if the content requires it will increase. It works fine in IE8, Safari, FF, Chrome but not in Opera. In Opera it just sets the height at 200px.
View 9 Replies
View Related
Mar 26, 2011
I'm trying to create a dynamic table with onclick event like this but onclick event seems to do nothing:
var srcTable = this.iContext.getElementById("tbody");
var tmpRow = null;
var tmpCell = null;[code]...
I found a few examples like this: tmpRow.onclick = function() { alert(this.rowIndex);};
but I need use selected data, maybe call a defined function. I already tried lines bellow but nothing works, because doSomething is not function of tmpRow object.
tmpRow.onclick = function() { doSomething(this);}; or tmpRow.onclick = doSomething(this); or
tmpRow.onclick = "doSomething(this)";
View 1 Replies
View Related
Mar 3, 2007
When i try to dynamically change the height of an iframe in ie through a java-script to match its content (a html page containing a flash movie, it doesn't resize the iframe at first, but when i reload the same page into the iFrame it resizes as planned, how come?This script works well in firefox, safari and netscape, but i cant get it to work in ie(8, 7). And i get the same problems with every resizing script i've tried. This is the script i use:
<script type="text/javascript">
function adjustIFrameSize(iframe)
{ [code].....
I have a flash menu in the first iframe, the buttons on the menu uses getURL(siteToLoad, "contents") to load another html-page into the iframe "contents". Is it possible to make the iFrame refresh automatically though javascript so that i just refreshes the iframe once? Everytime ive tried that it just ends up in a never ending refresh-loop... How can i make this work? Is there any better script for resizing (and refreshing after resize) the iframe height so that it matches to its content?
View 7 Replies
View Related
Apr 28, 2010
I've built in an iFrame that pulls in various other pages of variable height. Can you make this iFrame render its size based on it's src content ? I've been trying to use the scrollHeight of the frame but it isn't working. My current code:
Code:
<script type="text/javascript">
function resizeIframe (frame) {[code]....
Basically my code always renders the scrollHeight at 150 but the test.html I'm pulling into the frame I've made a height of 500px ?
View 1 Replies
View Related