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. Link to comment https://forums.phpfreaks.com/topic/254917-displaying-image-in-one-cell-of-a-table-or-in-a-based-on-hover-activity/ 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> Link to comment https://forums.phpfreaks.com/topic/254917-displaying-image-in-one-cell-of-a-table-or-in-a-based-on-hover-activity/#findComment-1307082 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! Link to comment https://forums.phpfreaks.com/topic/254917-displaying-image-in-one-cell-of-a-table-or-in-a-based-on-hover-activity/#findComment-1307092 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> Link to comment https://forums.phpfreaks.com/topic/254917-displaying-image-in-one-cell-of-a-table-or-in-a-based-on-hover-activity/#findComment-1307213 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. Link to comment https://forums.phpfreaks.com/topic/254917-displaying-image-in-one-cell-of-a-table-or-in-a-based-on-hover-activity/#findComment-1307233 Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.