Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Need help with a script

Posted on 2001-09-11
10
Medium Priority
?
159 Views
Last Modified: 2012-06-27
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
0
Comment
Question by:Thorin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 2

Accepted Solution

by:
psogaa earned 1200 total points
ID: 6475265
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
 
LVL 2

Author Comment

by:Thorin
ID: 6475363
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
 
LVL 2

Author Comment

by:Thorin
ID: 6475394
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
LVL 2

Expert Comment

by:psogaa
ID: 6475837
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
 
LVL 2

Expert Comment

by:psogaa
ID: 6475839
Note, as it is now, it only works in IE...you need some adjustments to make it work in Netscape...
0
 
LVL 2

Author Comment

by:Thorin
ID: 6476884
Okay...soooooo, if I may venture down that path - what do I need to make it work in Netscrape?

-Thorin
0
 
LVL 2

Expert Comment

by:psogaa
ID: 6477155
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
 
LVL 2

Author Comment

by:Thorin
ID: 6477512
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
 
LVL 2

Expert Comment

by:psogaa
ID: 6477523
Looks great :)

You might want to preload the images so the browser doesn't have to load the image on the first mouseover.
0
 
LVL 2

Author Comment

by:Thorin
ID: 6477546
Good idea...didn't know I could do that.  How?
0

Featured Post

Build and deliver software with DevOps

A digital transformation requires faster time to market, shorter software development lifecycles, and the ability to adapt rapidly to changing customer demands. DevOps provides the solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

722 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question