jQuery for Absolute Beginners: Day 11

Have you ever hovered over an image and seen a larger version pop up that moves parallel to your mouse movement? I’ll show you how to mimic that functionality today!


Day 11: Fun Image Hovering

Download the Source Code



75

Comments
  • qq says:

    downloaded a IETester. very useful. :)

  • craigcosmo says:

    hi JEFF,

    I do exactly like you, but one of the image not shown when hover, and the other image seems unstable.

    can you have a look ?

    http://www.badede.com/j10.html

  • Chard says:

    i found a problem, when this code is pasted into a propper document, it doesnt work, it just gets pushed to the bottom of the page, i think this might be because of body, do i need a z index for it to float over the page?

  • Adrian says:

    If I understand the code correctly, mousing over a thumbnail creates a new large image element that is then appended to the body element, and mousing off the thumbnail removes the large image from the body element.

    So does this mean that every time I mouse over and off a thumbnail,l a new image will be created that then gets orphaned so eventually I will end up with lots of orphaned images in the dom ?

    Or am I missing something (and I am very much a jQuery beginner so I probably am) ?

  • Dan says:

    Hi Jeffery, I’m finding these tuts invaluable, i’ve gone from “what the hell is JQuery” to “hey check tha skillz!!”

    I was very much wonderring (someone back me up with this) if you’d be able to do a similar course in ActionScript in Flash. It seems quite complicated, but with your tuts so far i’m sure we’ll all be experts within a week!

    Yours hopefully

    Dan – England

  • Mr. Haynes says:

    Hi Jeff:

    Could you show us how to pull in the alt from the db? I was trying to us the next() atr for the image and pull alt but I don’t know what I am doing.

  • acmom says:

    Thank you so much for the video series! I am new to jquery and It helped me a whole lot.

    I want to create sliders which trigger by clicking on a specific text of lists within a accordion.

    For example, like in the iphone how contact app slides horizontally and click top left button to go back to the previous menu, except within an accordion menu.

    Could you please, please help me?

  • Alex says:

    Great Stuff Jeffery! This is without a doubt the best JQuery stuff out there. I like how you use real examples and don’t waste to much time with the theory of it all. Thanks again.

  • john says:

    Hi Jeffery,

    I have camtasia, how do you zoom and zoom out while recording? thanks for all the work.

  • Justin says:

    Wish there was more! I want to subscribe but I don’t have the rss reader program or whatever lol. GREAT tutorial tho! Hope you make more JQuery vids after the initial 15

  • rhinonabox says:

    I’ve been toiling over this. I can’t seem to get this to work in Firefox 3 and in IE7 the image shows up and then disappears. Something is broken in either this script, or in my re-writing of the script. I have compared all of my code to the tutorial, and it just refuses to work for me. Some one please tell me if this is a bug, or am I just doing something wrong?

  • rhinonabox says:

    Scratch that…… I just realilzed I still had javascript disabled from testing the last tut. My bad.

  • kaysl says:

    Hi !!

    Firstly thanks so much for these 15 tutorials !

    I had a question about this one:
    I’m using this code on a page that has thumbnails all over it, left to right. And the issue I’m having, is that once I hover over the images that are on the far right the big image that appears gets cut and scrollbars appear.
    (To make it easier to comprehend you can see what I mean at: http://www.kaysl.ch/SKL/skl.html )

    How could I add a code that would change the side the bigImage appears on depending on the X and Y ?

    Any answers or advice would help !
    Thanks

  • charlie says:

    Thanks for all the hard work that has gone into these casts. They are violently rad.
    Can’t get enough.

  • peyman says:

    hi , Great job ,as always … and thank u so much <3

  • msjulz says:

    Hahahaha this was funny!

  • Euklides says:

    Thank you very, very much.
    Best jQuery series in the planet

  • sarmen says:

    this site has become like facebook for me lol, im on it 24/7

  • sarmen says:

    someone should create a facebook for developers only. or a social network for developers only where we developers meet and talk about our ideas.

  • aioon says:

    really nice tutorial and the rest of jquery tutorials, please more tutorials like this, but more complicated :)

  • John says:

    Hi. I enjoy the tutorials. I was hoping to implement something like this demo but on a large image with an imagemap. When you hover over the different areas of the image, content in say a floating changes depending on what section of the image you are on defined by the imagemap.

    No luck yet, tried manipulating the code in this demo to no avail. Any suggestions?

    thanks again for your hard work and lessons.

    John

  • Muhammad Abubakr Haider says:

    Nice work jeffery.
    I realy aperciate your work

  • Daniel says:

    Jason this has been an excellent series. Thanks for all the work putting it together.