I need to create a website with this kind of function:
I have an image (like a park area), so in different points of this image I must create a div which will do a hover effect and show a textbox with an image (or maybe a link to it).
My main doubt is that I have no idea how can I get certain points of this image to create a div with this hover effect.
Please check the below URL's. Hope this may helpful
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_areamap
http://www.howtocreate.co.uk/tutorials/html/imagemaps
http://www.outsharked.com/imagemapster/
you can do with jQuery. Please, firstly look at this link. You can take mouse x and y position on image. Then on x and y position, you can do, what you want.
Related
What I'm trying to do: When a user hovers over any image on a specific page, a floating box element appears, displaying the Image's title (the html title="" tag). As the user moves their cursor across the image, the box element moves along with it.
(Example: http://minecraft.gamepedia.com/Glass_Bottle - If you looking under the "crafting" section, hovering over certain images displays a box with it's title - Sorry, this was the only example that I could find).
Is it possible to achieve this result utilising raw HTML, or does this require css or an addition such as Javascript/Jquery?
Sorry if I haven't been clear enough - if you require certain information, please let me know!
Thanks in advance, and I hope everyone has a Happy New Year! :)
I think you need javascript. I don't think your going to get everything you want in HTML5. You want to use the mouseover event to show the image next to the cursor which means you'll have to float a div next to it. The moving part won't be a problem because you'll probably just reshow it for every mouse over which will get fired every time they move the cursor I think. Here are the problems you must solve. Figure out one at a time.
1) How to float a div at a higher z index with the title in it.
2) How to know the coordinates of your curser
3) Move the div to your cursor coordinates with an offset
4) How to hide the div
I have used this a few months ago and helped me a lot with the very same problem:
http://notlaura.com/show-title-hovering-image/
Hope it helps you as well,
Andrew
My app uses up to 6 svg images layered to create an interactive image. I have found that I cannot mouseclick on any images below the first.
** Edit. Excess code and text removed.
You can make an element insensitive for mouse events by setting the pointer-events attribute to none (see Tinkerbin):
svg > *{opacity:.5}
In essence I cannot do what I want this way. Stacking embedded images results in only the top layer being clickable by the mouse.
An image map works, with some mucking about.
I created a clear image calling it clearOverlay and gave is a usemap value tying it to my image map.
My imagemap I created using a free online app http://www.image-maps.com which took my image allowed me to create my clickable zones and generated the html for me. After cleaning it up and swapping the href values for onclick functions I added the map to my code.
Next problem was getting it to overlay my existing images. I eventually used style="position:relative; top:-300px" forcing it to sit squarely on my image. I'm sure there must be a better way, but at this point that worked for me.
For anyone else doing this don't forget to either place the clearOverlay last in your image list or set the css z-index to higher than everything else to make sure it is sitting on top.
So I now have a stacked svg image, where I can manipulate each svg according to where the user clicks. Its only taken me 5 days! I'm kinda over this coding by yourself lark.
** My image map above will not scale to different sized screens. The next time I try this, I will experiment using a transparent svg with fill zones where I wish to click.
What I'm trying to do is something like you see at http://www.nejm.org/doi/full/10.1056/NEJMimc1109704. (Click Play and go to page 5 - the interactive physical exam.) I think they are doing this with Flash, but I'd like to use javascript/jQuery.
Basically there's an image that has multiple captions. The captions have arrows that point to different parts of the image, but that's not essential for me. When you click on different links, different captions appear.
Would I tackle this as an image map? I.e. create a map, and use jQuery to toggle different parts of the map? Is there a plug-in that does that? Google searches aren't helping me - but maybe I don't know what to look for. Any help will be appreciated.
I'm having the same problem and I found imageMapster. Check out
http://www.outsharked.com/imagemapster/default.aspx?demos.html#beatles
I think this is what you want to do. Just this solution today, haven't figured it out yet. Looks promising though. Otherwise check out qTip2
http://craigsworks.com/projects/qtip2/demos/
Maybe some adaptions let you/us do what we wanna do
Good luck! Keep u updated if I figured it out
Why would you need jQuery?
Anyway, put your main image down, and set its position to be fixed where you want it. You could even put it in a nice container div, just make sure all your caption divs are relative to the same parent. Then put fixed position divs of your caption images over it with a higher z-index in your css. Then place your caption images at the appropriate top and left positions until they are correct. Of course, use transparent PNGs.
All you need to do to toggle them is set the element's style.display to "none" or "inherit"
I have searched a lot but i could not find any proper solution for my requirement.
I want a functionalty in my website where user can select any area on browser or anywhere in desktop and convert the selected area into image.
I know this can be done in windows form,there you do have options to track mouse movements and capture image from screen.
I know if i wan this functionality in web i have to get cordinates via javascript and hen maybe make an ajax request to webservice and get my image.
first of all i cannot find a proper way in javascript that will get me mousedown and mouseup coordinates.
I have seen jquery 's Dragable and resizable div.I want something lke that for user to select the area which has to be converted to image.
I can even get Origal mouse position,Current mouse position and the size of div using jquery dragable and reszable div.
and Second i want some advice as to how i should grab the selected area as image.
Kindly help me out.
Not possible with JavaScript. Web pages are (intentionally!) not capable of tracking mouse movements outside the browser window, nor of reading an image off the user's desktop.
You mean something similar to: http://www.screenr.com/record ?
You can use the clientX and clientY of an event to get the mouse coordinates. For example:
http://jsfiddle.net/yN3S5/1/
HTML:
<p id="x" ></p>
<p id="y" ></p>
Javascript:
document.onmousemove=function(e){
x=document.getElementById('x');
y=document.getElementById('y');
x.innerHTML=e.clientX;
y.innerHTML=e.clientY;
}
First, to convert your page to image, there is a very cool library that can do that. Its use the canvas, and render on it the full page by reading it
Get the code and see the examples from here.
http://html2canvas.hertzen.com/
Once you have the page in canvas you can thn conver it to png and get a part of it by selecte it.
See this example ! http://hertzen.com/experiments/jsfeedback/examples/dusky/index.html
Click on the send feedback, then select an area on the page, then click on preview ! Its very near for what you ask, but instead make a red rectangle you cut this part of the image.
more examples like the last one : http://hertzen.com/experiments/jsfeedback/
Forget to capture anything outside the browser.
I have 4 images stacked on top of each other, see below:
I'm trying to achieve two things:
When the mouse is over an image that is in the background, that
image should come to the foreground with a fading effect. There is
also different text below each image, that text should come to the
foreground. (no fading needed there)
The result should be like this:
Every 10-15 seconds (without user input), the next image on the right should fade in
automatically.
Technically, I thought about putting each image and text into a separate div, and playing with the z-order. The fading effect could maybe be achieved using jquery, but I've not used that before, unfortunately.
Any example code, specific help or pointers is greatly appreciated.
Thanks!
Although it's impossible to control the fade of an element through his z-index
we can always trick what our eyes see.
DEMO GALLERY
To achieve that we can do:
Insert into our gallery a DIV element that will grab the src attribute of the current image and set it as his background image
hide the current image, position the DIV on this image .position()
fade our DIV in/out
reset image visibility
Let me know if you have some issues, I can comment my code to make clearer the steps I used.
Happy coding
Take a look at this plugin. Just explore it, this has got 100s of different effects which you might like to use in your case.
http://jquery.malsup.com/cycle/browser.html