pogester Posted June 23, 2007 Share Posted June 23, 2007 Hi I am looking for some help, I have set up a new website for my son and want to include a gallery however the gallery I want to have it so that there are a collection of thumbnails and when you hover over a thumbnail a large version of the image appears on the left of the screen. To explain the thumbnails would appear where the blue box is at the right and the large image would appear where the picture is at present. Can anyone recommend the best way to do this as I know I can do it in Flash but dont really want to use Flash if I can do it in PHP The site at present is www.mitchellpatterson.co.uk/new Thanks in advance Darren Quote Link to comment Share on other sites More sharing options...
pocobueno1388 Posted June 23, 2007 Share Posted June 23, 2007 You would have to use JavaScript for this. Quote Link to comment Share on other sites More sharing options...
Zane Posted June 23, 2007 Share Posted June 23, 2007 create a DIV for the large image to appear in..near the blue box give it an ID like preview then create a function in javascript to do the image changing function swapImage(imageURL) { document.getElementByID("preview").style.backgroundImage = "url(\"" + imageURL + "\")"; } then for each of your thumbnail.....whatever tag you have them in give them an onMouseOver action Quote Link to comment Share on other sites More sharing options...
pogester Posted June 23, 2007 Author Share Posted June 23, 2007 Hi thanks for your help but am having a little trouble. I have declared a javascript function in <head> as follows <script language="text/javascript"> function swapImage(imageURL) { document.getElementByID("mitch_pic").style.backgroundImage = "url(\"" + imageURL + "\")"; } </script> Then in my <body> where I want the content I have <p><img src="gallery/rhtriker_thumb.gif" onmouseover="swapImage('rhtriker.gif')" /></p> set for the thumbnail image, however when I hover the mouse over the image nothing happens and the cursor doesnt change, any help appreciated, sorry I know this isnt PHP but didnt want to start a whole new topic. Quote Link to comment Share on other sites More sharing options...
mkoga Posted June 24, 2007 Share Posted June 24, 2007 It's tough to say without seeing the page in it's entirety. I would suggest placing an alert('here') in the swapImages function just to see if the code is even reaching the function. Quote Link to comment Share on other sites More sharing options...
Zane Posted June 24, 2007 Share Posted June 24, 2007 mkoga has a good idea but also you might want to try putting your thumbnail in a DIV instead 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.