SitePoint Sponsor

User Tag List

Results 1 to 4 of 4

Thread: Image Preview

  1. #1
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Preview

    Hi Guys,

    How do I display an image, that when the mouse is over a section of it, displays the same section on another almost identical image, inside a separate div?

  2. #2
    Keep Moving Forward gold trophysilver trophybronze trophy
    Shaun(OfTheDead)'s Avatar
    Join Date
    Nov 2005
    Location
    Trinidad
    Posts
    3,746
    Mentioned
    45 Post(s)
    Tagged
    0 Thread(s)
    What do you mean??...

    You're trying to achieve something like a magnifying glass effect ??




    Trying to fill the unforgiving minute
    with sixty seconds' worth of distance run.

    Update on Sitepoint's Migration to Discourse

  3. #3
    Non-Member
    Join Date
    Jun 2007
    Posts
    254
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image Preview

    Kind of. Where ever the mouse is over the big image, gets displayed as the smaller image, with a bigger radius than the mouse.

    See Diagram: http://www.freewebs.com/4sides/Diagram.JPG

    For example if the users mouse is in the centre of the Windows XP logo on the bigger image, then the whole Windows XP logo gets displayed as the smaller image.

  4. #4
    ♪♪ ♪ ♪ ♪ ♪♪ ♪ ♪♪ Markdidj's Avatar
    Join Date
    Sep 2002
    Location
    Bournemouth, South UK
    Posts
    1,551
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    If the images are at the same zoom level then you can set the image previews background position to the negative of the mouse position over the main image, minus the main images position from the left and top.

    Hope it helps
    LiveScript: Putting the "Live" Back into JavaScript
    if live output_as_javascript else output_as_html end if


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •