Jump to content

displaying image in one cell of a table or in a <div> based on hover activity

rghollenbeck

By rghollenbeck
in Javascript Help

Recommended Posts

rghollenbeck Member

rghollenbeck

Posted
Posted

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.

Psycho Prolific Member

Psycho

Posted
Posted

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>

rghollenbeck Member

rghollenbeck

Posted
  • Author
Posted

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!

Psycho Prolific Member

Psycho

Posted
Posted

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>

rghollenbeck Member

rghollenbeck

Posted
  • Author
Posted

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.

Archived

This topic is now archived and is closed to further replies.

Go to topic listing
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.