KingOfHeart Posted May 25, 2010 Share Posted May 25, 2010 I need a simple script to have an image be displayed on the page. When I hover my mouse on image1, I need it to display it again on the screen. My image will only be 25% in size, so that's why I want a second image to show up. Javascript or Css, it doesn't matter to me. Quote Link to comment Share on other sites More sharing options...
ohdang888 Posted May 26, 2010 Share Posted May 26, 2010 you realize it'd be a lot faster and more efficent for you to just go to google and search for this yourself. theres TONS of jquery plugins for this Quote Link to comment Share on other sites More sharing options...
Adam Posted May 26, 2010 Share Posted May 26, 2010 Displaying the image is no problem, it's positioning it. As ohdang888 said there'll be plenty of jQuery (or other framework) plug-ins available, but I shouldn't think something so simple would really need a bloated plug-in. Can you give more information on how you want the pop-up positioned? Plus, are you using a framework or just standard JavaScript? Quote Link to comment Share on other sites More sharing options...
KingOfHeart Posted May 26, 2010 Author Share Posted May 26, 2010 Well, I found one script but it made it too fancy. I just want the image to show up at x/y position. No frames, no borders, no designs. I might just skip it and have the image 100% size or open in a new tab. So far I just need it for three images. Quote Link to comment Share on other sites More sharing options...
trq Posted May 27, 2010 Share Posted May 27, 2010 Using jQuery this would be a simple task. A VERY simple example, not tested. <html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script> $('#thumbs ul li').hover( function() { img = $(this).find('img').attr('src').replace('-thumb', '-full'); $('#stage').html('<img src="' + img + '" />'); }, function() { $('#stage').html(''); } ); </script> </head> <body> <div id="thumbs"> <ul> <li><img src="image1-thumb.jpg" /></li> <li><img src="image2-thumb.jpg" /></li> <li><img src="image3-thumb.jpg" /></li> </ul> </div> <div id="stage"></div> </body> </html> You'll need the images image1-thumb.jpg , image1-full.jpg etc etc Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.