Need help with a script

Howdy Experts!

I am offering a lot of points because this is going to need to be explained in full detail.  Here is what I need:

I have set up a table with items all around the outside, and I want the user to be able to run their mouse around these items and have a description of the item show up in a table cell in the middle.

I will try to draw what I need -

Item 1      Item 2     Item 3

Item 4    Desciption   Item 6
            Area
Item 7                 Item 8

Make sense? Also, so you understand more - the items are small images, and the description can be either text (preferred) or images of text.

Thanks in advance for your help.

-Thorin
LVL 2
ThorinAsked:
Who is Participating?
 
psogaaConnect With a Mentor Commented:
Something like this? Feel free to ask any further questions if my comments aren't enough :)

<html>
<head>
<script language="javascript">
/*
Set variables to hold desscription for each image.
Be sure the variables names( row1col1,row1col2 etc. ) have same name as corresponding <img>-tag below
*/
var row1col1 = 'Description for image 1';
var row1col2 = 'Description for image 2';
var row1col3 = 'Description for image 3';
var row2col1 = 'Description for image 4';
var row2col3 = 'Description for image 6';
var row3col1 = 'Description for image 7';
var row3col2 = 'Description for image 8';
var row3col3 = 'Description for image 9';

/*
Function showDescription to set the image description in the center field
This function is called when mouse moves over an image, the image passes itself to the function ( using the "this" keyword ).
So to get the name of the image name, use "image.name".
Now, when you use eval( image.name ), it gives you the content of the variable corresponding to the actual image name.
So far we got the correct description. Now we just need to put that description in the middle field.
This is done by setting the "innerHTML" property of the div tag ( document.all.description.innerHTMl ).
*/
function showDescription( image ){  
  document.all.description.innerHTML = eval( image.name );
}
</script>
</head>
<body>

<form name=myForm>
<table name=myTable>
  <tr>
    <td><img src=test.jpg name="row1col1" onmouseover="showDescription(this)"></td>
    <td><img src=test.jpg name="row1col2" onmouseover="showDescription(this)"></td>
    <td><img src=test.jpg name="row1col3" onmouseover="showDescription(this)"></td>
  </tr>
  <tr>
    <td><img src=test.jpg name="row2col1" onmouseover="showDescription(this)"></td>
    <td>
      <div id=description name=description></div>
    </td>
    <td><img src=test.jpg name="row2col3" onmouseover="showDescription(this)"></td>
  </tr>
  <tr>
    <td><img src=test.jpg name="row3col1" onmouseover="showDescription(this)"></td>
    <td><img src=test.jpg name="row3col2" onmouseover="showDescription(this)"></td>
    <td><img src=test.jpg name="row3col3" onmouseover="showDescription(this)"></td>
  </tr>
</table>
</form>
</body>
</html>
0
 
ThorinAuthor Commented:
Awesome!  That works...

Two questions though to enhance it.

1.  How do I make the center box go blank once they move the mouse off of the item?
2.  Can I put formatting into the descriptions of the items?  Or, if I wanted could I just put an image name in for the description?
i.e. var row1col1='images/description1.gif'

Thanks!

-Thorin
0
 
ThorinAuthor Commented:
Awesome!  That works...

Two questions though to enhance it.

1.  How do I make the center box go blank once they move the mouse off of the item?
2.  Can I put formatting into the descriptions of the items?  Or, if I wanted could I just put an image name in for the description?
i.e. var row1col1='images/description1.gif'

Thanks!

-Thorin
0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
psogaaCommented:
1: you need to add "onmouseout"-events on each img-tag, like this:

<img src=test.jpg name="row1col1" onmouseover="showDescription(this)" onmouseout="document.all.description.innerHTML='';">

2: Yes, the input can be any valid html. So if you wanted to make an image, you should use;
var row1col1="<img src='images/description1.gif'>"

0
 
psogaaCommented:
Note, as it is now, it only works in IE...you need some adjustments to make it work in Netscape...
0
 
ThorinAuthor Commented:
Okay...soooooo, if I may venture down that path - what do I need to make it work in Netscrape?

-Thorin
0
 
psogaaCommented:
Well, you need to put a <layer> inside the div tag to make NN see the layer.
Also, you need to change this:

document.all.description.innerHTML

Since NN doesn't have the "all" property of document.
You should instead use something like:

document.layers["layername"]...

Also, Netscape doesn't understand "innerHTML", so you should use some layer-properties to set the right description into the layer instead.

I know this is kinda vague, but i don't have Netscape installed atm, so i don't want to start to try to make a working NN solotion without the ability to test-run it :)
0
 
ThorinAuthor Commented:
Great Work!  Thanks very much for your help.  Don't sweat netscape....only morons use that browser anyway! :-) (just kiddin')

If you want to see the finished product - go to:
http://www.mpulsecmms.com/announcing51.html
it is at the bottom of the page.

Thanks again.

-Thorin
0
 
psogaaCommented:
Looks great :)

You might want to preload the images so the browser doesn't have to load the image on the first mouseover.
0
 
ThorinAuthor Commented:
Good idea...didn't know I could do that.  How?
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.