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. Link to comment https://forums.phpfreaks.com/topic/202895-image-popup-on-hover/ 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 Link to comment https://forums.phpfreaks.com/topic/202895-image-popup-on-hover/#findComment-1063389 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? Link to comment https://forums.phpfreaks.com/topic/202895-image-popup-on-hover/#findComment-1063540 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. Link to comment https://forums.phpfreaks.com/topic/202895-image-popup-on-hover/#findComment-1063851 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 Link to comment https://forums.phpfreaks.com/topic/202895-image-popup-on-hover/#findComment-1063967 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.