SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    GRAPHIC DESIGNER visualkreations's Avatar
    Join Date
    Sep 2005
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How can i do this?

    I have text links , i want it so when i rollover it displays a pictures , , an example would be www.istockphoto.com , see how when you rollover their images a bigger version appears?

    thast what i want to do.


    Thanks!

  2. #2
    American't awestmoreland's Avatar
    Join Date
    Sep 2002
    Location
    Grand Rapids, MI
    Posts
    1,168
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I recreated the effect at iStockPhoto a while back by tweaking their code. The results are here: DEMO

    I just changed the image to a text link, and it still works: DEMO


    Andy
    From the English nation to a US location.

  3. #3
    GRAPHIC DESIGNER visualkreations's Avatar
    Join Date
    Sep 2005
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks Andy! thats awesom.


    I am also curious if there is a way to do this in pure css. even if it doesnt look like istock's but as long as its text and when you rollover it , an iname pops up.

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    You can do that with CSS, but you can't have it following the mouse cursor. You would have to do it in this sort of way:
    Code:
    HTML:
    <a href="#"><img id="smallimg" src="" alt="" /><img id="largeimg" src="" alt="" /></a>
    
    CSS:
    a {
      position:relative;
    }
    a:hover {
      visibility:visible; /* needed so IE responds when you hover over the link */
    }
    a img#largeimg {
      display:none;
    }
    a:hover img#largeimg {
      display:block;
      position:absolute;
      top:50px;
      left:50px;
    }

  5. #5
    GRAPHIC DESIGNER visualkreations's Avatar
    Join Date
    Sep 2005
    Posts
    171
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks raffles. is there away so when it appears , it appears in the middle of the screen all the time? now the way it works is it appears beside the text link that i am rolling over , i want it to appear in the middle of the screen.


    thanks

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    To make it appear in the exact middle of the screen can be a bit tricky, especially when using position:absolute;

    When you position something absolutely, it is relative to the parent element that is positioned absolutely or relatively. Read this if that wasn't clear: http://www.autisticcuckoo.net/archiv...ively-absolute

    In this case, the link is set to position:relative, so the image will show up relative to it. If you want it to be in the middle of the screen, get rid of the link's position:relative and make sure none of the parent elements are positioned relative or absolute.

    Putting it in the middle of the page is then not possible, so you'll have to make do with something like top:20% left:20% or something like that.

    Alternatively, use Lightbox JS, which I think is pretty slick: http://www.huddletogether.com/projects/lightbox2/


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
  •