Solved

Need help with a script

Posted on 2001-09-11
10
157 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 300 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
Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

 
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

Optimize your web performance

What's in the eBook?
- Full list of reasons for poor performance
- Ultimate measures to speed things up
- Primary web monitoring types
- KPIs you should be monitoring in order to increase your ROI

Question has a verified solution.

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

This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…
Suggested Courses

635 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