I use maphilight jquery plugin with hover and onclick features. Which works fine.
Is there a way to draw a rectangle by default on the areamap image at a predefined position and size? So without to hover or click on it, just draw a rectangle right after the page is loaded.
I would like to use this solution with PHP+mySQL search. So when someone searches and finds the desired objec on a page (as a part on an areamap, and I know the position of it), clicking on the result link, I would like to load the page that has this shape and would like to be highlighted or drawn around with a rectangle as long as the person click/hover on another area on the same page. Or if this is not possible, then just drawing the rectangle on the desired position.
Is there a way to accomplish this?
The searching and lauching mechanism is not an issue now... I'll do it somehow. I just need the solution to draw the rectangle on areamap.
I tried using CSS "z-index", canvas and even SVG but the rectangle was always drawn after the area map, so at the bottom of my page and not on the areamap :(
Can anyone help me? Thank you.
your rectangle also needs to have position:absolute css style, e.g.,
$('div.map').append('<div style="position:absolute;left:100px;top:100px;
height:10px;width:10px;background-color:#f00;z-index:1;"></div>');
Related
I am creating a user viewer for my friend's Minecraft Classic Server (in-dev version here) and below the skin is a slider. It is intended to be a zoom slider, and I need it to change the scale of the skin. The skin viewer and slider work perfectly fine; however, my trouble is in the element. It appears that I can only draw to my <img> once (code attached), and I'm not sure how to resolve that. My current plan is to delete the element and create it again, but I'm not sure how to even do that. Does anyone have any resources, tips, or information regarding this?
Page source: http://pastebin.com/R4qqTVz8
Modified mcSkinRenderer.js (courtesy of Joran de Raaff): http://ns2.nuclearstorm.net/nucsto/mcSkinRenderer.js
So here is what's happening with your code.
When you run renderMCSkins the first time, it looks through the page and finds all images with the class of 'skin'. It then REPLACES those images with canvas elements and renders the image into the new canvas. When you use the slider it runs that renderMCskins function again, only this time there are no longer images on the page with that class name because they have already been converted to canvas elements.
You have two options.
First, do as you initially thought and DELETE all instances of that canvas element, then replace it with the initial image, and run renderMCSkins with the new zoom value.
Second, you can update the mcSkinRenderer.js to include some kind of an update function to make changes to the canvas elements that have already been rendered.
I have this image:
I would like to automatically crop anything outside the blue rectangle.
Why?
I plan on using this image w/ some gps gear we have out in the field. I have instructions not to use google maps/earth. Using a div with dimensions equal to the pixels of the image, I will set the background image of the div to the picture. Then using gps data from our database, draw a point and label within the div.
The corner of the blue boxes indicate the exact coordinates labeled. So everything outside the blue box is not needed and would through off my points to draw.
Wondering if there is something I can add to me image upload script to auto crop the image.
Or if in reading this anyone decides that I'm being stupid and taking a difficult route, please call me out.
Thank you in advance.
Thanks for taking the time to read my post.
I am looking for some options/suggestions/general comments on how I might be able to query a database of images based on mouse location.
Essentially, I have a database (on a seperate companies server) that contains a few images, what I would like to do is return an image to my website depending on where my mouse is based in the browser.
so if I click top left, i'll get a zoomed in picture of the top left of the landscape (a seperate image), if I click bottom right, I will get a zoomed in picture of the bottom right (again, seperate image).
I am a newbie to HTML/PHP/CSS but not to C++/C/Delphi, I'm sure I can do this, but I can't see the wood from the trees as to what I actually have to do!
I am using my own server (hosted by 1&1) and a Drupal webpage.
If anyone could help that would be great!
Many thanks for your time,
Kay
HTML map and use javascript (probably jQuery) to bind to each <area> and do something (in your case, popup/zoom a separate image)
I am not sure if this is possible or not, but I am trying to create an effect where when you mouse over an image that is the creation of multiple images overlapped with each other (images would be set with some opacity), I display that section of the image clearer than the other.
Hard to explain, but here a few examples
This image:
is the creation of all those images overlapped (each image is on top of the previous)
When I mouse over the final image I want to be able to "highlight" the part of the image that corresponds to that section of the image in the image itself
Something I was thinking to do is to just show the main image with opaque set, when the user mouse over it, grab the coords, check against all of the images (that cannot be more than 25) see if those coordinates are matching with a non "transparent" pixel and display such image on top of the main to give an "highlighted" effect, but the final images are about 400x200 and create an array of all the pixels on the fly when displaying the page is not realistic for a server that have thousands of hits per hour/minutes. Save this array in a database is not realistic as well as the size of the image might change depending on the page and we currently have 1.3milions final images each one being on average circa 10 broken down images
A possible solution is to create custom SVG overlays for each sub-image. Upon an onmouseover event, you'd decrease the opacity of the SVG element, making the below image more visible.
Checkout this tool for creating SVGs.
$("img").css("opacity","0.8");
$("img").mouseover(function()
{
$(this).css("opacity","1.0");
});
$("img").mouseout(function()
{
$(this).css("opacity","0.8");
});
For the effect of segmenting the image, try using an image map:
http://www.javascriptkit.com/howto/imagemap.shtml
Opacity of image maps is supported:
http://www.thehelper.net/threads/can-i-use-opacity-on-imagemap.57999/
Edit:
To achieve the hovering effect, try loading them into a canvas using Fabric JS, here is a demo:
http://fabricjs.com/hovering/
Abandoned the project, the ony solution is SVG but it nos possible at this stage as some browsers/OS do not support fully them
I know that the question I have is quite complex, and I really hope someone can help me. I have created an image gallery qih jquery and php. Firstly I am grabbing all the image names from a MySql database, then taking them from the server folder and resizing them with php. It creates the thumbnails, then I created a pop up window with jquery which shows the image in large. After that I place a previous and next button and told jquery to grab the array of image results from php and echo them into the jquery using json. Then it goes through the array to create the next and previous effect. I then centered each individual image when the next and previous button were clicked. When you load the first and second picture it is not centered and it goes to the right. I CAN NOT figure out why this is happening. I really need some help here. There is too much code to post here so I am giving you the website and you can see pretty much everything in the source code. Remember that I am using php so if you are wondering how it is iterating through the pictures that why. Thanks if anyone can help me at all.
http://www.oceanphotostudio.com/test/collection/before-and-after.php
The reason it's getting offset is that the margins that center the popup div are being calculated before the image is loaded. Notice that on the first click, it will have margins of -37px and -30px. After one image is loaded, calling another one will use the width and height of the last image that was loaded in, which is why you can get unpredictable results.
Take a look at JQuery's load event handler for information on how to create a callback to resize after the image has been set to load, rather than before.
Your description totally overcomplicates the issue. Browser could care less how you generate the array or html on server, or what language it is
Your position problem is a simple css issue. You've set the top and left of your popup to 50%. This means top left corner of popup will start at dead center of page, and go right and down from there.
Use a browser console to inspect the html elements and the css rules that apply to them and adjust accordingly. WIthin the console you can make live edits to see impact of the adjustments in real time