rghollenbeck Posted January 12, 2012 Share Posted January 12, 2012 I don't know which would be more practical, but I want to build a column of six small images on the left, and whichever one is hovered, the image will display in one large column to the right that spans six rows. I don't know if it would be better to use JavaScript or php, and I don't know if it would be better to use a table or divs. Maybe I can create a variable to plug in depending on which of the images on the left is being hovered. I'm trying to figure out how to start. <img src='<?php variable_name ?>'> or something like that? I will need to go back and refresh on some basics about variables in both PHP and JavaScript, and about the onhover behavior, etc. I'm a little rusty on both JavaScript and on PHP. Quote Link to comment Share on other sites More sharing options...
Psycho Posted January 12, 2012 Share Posted January 12, 2012 It has to be done with JavaScript. PHP only runs server-side. This is a really easy problem. You simply need to create an onmouseover event for the images in the left column that will change the image in the right column. Here is a rough working example. The URLs for the images are to actual images. <!DOCTYPE html> <html> <head> <script type="text/javascript"> function showFull(imageName) { var imageURL = 'http://school.discoveryeducation.com/clipart/images/' + imageName; document.getElementById('full').src = imageURL; } </script> </head> <body> <table border="1" width="600"> <tr> <td width="100"><image src="http://school.discoveryeducation.com/clipart/small/funny1.gif" onmouseover="showFull('funny1.gif');"></td> <td rowspan="6"><img src="" id="full"></td> </tr> <tr> <td><image src="http://school.discoveryeducation.com/clipart/small/funny2.gif" onmouseover="showFull('funny2.gif');"></td> </tr> <tr> <td><image src="http://school.discoveryeducation.com/clipart/small/funny3.gif" onmouseover="showFull('funny3.gif');"></td> </tr> <tr> <td><image src="http://school.discoveryeducation.com/clipart/small/funny4.gif" onmouseover="showFull('funny4.gif');"></td> </tr> <tr> <td><image src="http://school.discoveryeducation.com/clipart/small/funny5.gif" onmouseover="showFull('funny5.gif');"></td> </tr> <tr> <td><image src="http://school.discoveryeducation.com/clipart/small/funny6.gif" onmouseover="showFull('funny6.gif');"></td> </tr> </html> Quote Link to comment Share on other sites More sharing options...
rghollenbeck Posted January 13, 2012 Author Share Posted January 13, 2012 I simply copied your entire code. Now it is merely a matter of changing the URLs to the images. Your solution was MUCH more than I expected. Thank you very much! Quote Link to comment Share on other sites More sharing options...
Psycho Posted January 13, 2012 Share Posted January 13, 2012 One thing I didn't put in the code was a process to "remove" the image when the user moves the mouse cursor off the image. If you want that, then just set an initial image such as a blank image or a default image. Then add an onmouseout event to call a function that will replace the default image //Function to replace image with default //Call upon mouse out of the images function clearFull() { showFull('default.gif'); } <image src="http://school.discoveryeducation.com/clipart/small/funny4.gif" onmouseover="showFull('funny4.gif');" onmouseout="cearFull();"> </tr> Quote Link to comment Share on other sites More sharing options...
rghollenbeck Posted January 13, 2012 Author Share Posted January 13, 2012 I learned much about JavaScript while editing this code. One thing I learned is that the images should all be the same width to avoid the jumping around when switching cells. 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.