Floating text overlay on image hover - javascript

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

Related

How to find the start and end position of a page when using column css style?

In our mobile website, we use column style to show the article, user can swipe left or right to read the content.
For some reason, we have to identify the start point and end point of given page and insert a span to that particular position for late use.
As the following image shows, the red arrows point at where we want to insert the span.
The position is different on each devices, so we have to calculate it when user load the page.
We have done some researches but found nothing.
We totally have no clues about how to do it.
Please help us, Thank you very much.

Image with a link in a specific point

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.

mouse position in Jquery click on image (wrong element is scrolled)

I'm a bit of a NOOB to Jquery.
I've used the Jquery click handler on an image and am finding that when the page is scrolled, that position is out by however much the page is been scrolled. is this correct? how do I get the relative position of the mouseclick?
my code is at http://www.mars-tourist-guide.co.uk/curiosity/imgtag.html in which when you click on an image a red box should appear where the mouse was clicked.
I'm using poEvent.clientX, poEvent.clientY but I suspect thats not right
Thanks
I've also had this problem (a long time ago) and these questions helped me:
https://stackoverflow.com/a/9335517/3132718
https://stackoverflow.com/a/17705548/3132718

How to scroll an element inside parent when a fixed element passes?

This is a bit too tricky for my jQuery / javascript knowledge so i'm sorry to say i haven't really tried anything yet. I need some hints to get pointed in the right direction!
The problem is that i have a fixed element on my page, and when scrolling down this element will enter different wrappers, and while in that wrapper i need a smaller child element to "snap" to my fixed element and while it's in the element.
Kind of hard to explain, i made a static mockup here:
http://jsfiddle.net/ycmYc/
When "fixed cart button" reaches a price, i need it to attach and scroll with the cart button as long as it's inside the prices "product-div". When it leaves and enters the next the price should stay in the bottom of it's product and then snap to the cart-button again when the users is reaching it by scrolling up.
Well, again, sorry for not having tried anything but i am lost. If i had to do this without any help i think i'd go with waypoints.js but it feels far from optimal.
Any help MUCH APPRECIATED!
The fixed element will always have the same position, so i guess offset from the browser top could be used instead of keeping track of it's position. Always something ;)
Update:
Been working on it myself, and got it working downwards but not upwards:
Should clarify what i mean:
http://retype.se/temp/scrolltest/test.html
When scrolling by the price, it joins the button downwards and snaps loose when leaving the container. My problem now is making it snap to it and scroll back to its original position when scrolling upwards :)
Do you want it like this?
http://jsfiddle.net/ycmYc/39/
only result: http://fiddle.jshell.net/ycmYc/39/show/light/
updated:
How about this?
http://jsfiddle.net/ycmYc/93/
only result: http://fiddle.jshell.net/ycmYc/93/show/light/
this is just a brainfart, but maybe it gets things going (sry, dont have time for a fiddle). But I got the idea, of maybe trying to cheat optically.
What I mean is, to calculate the absolute positions of all price divs, hide them, and when the cart div reaches that position by scrolling, show the price div for x amount of pixel scrolling (or via z-indexes by making backgrounds, not sure what suits you better).
Hope this helps a bit, maybe I get time today to script it out.
It kinda depends on the constraints. You can detect the scroll position of a window with:
window.pageYOffset or document.documentElement.scrollTop.
If the divs are all the same size you could easily calculate which div the button is over and the position: fixed the price next to it.

Change z-index of div with fade effect on mouse over

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

Categories