Solved

Need help with a script

Posted on 2001-09-11
10
151 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
  • 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
 
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
Enabling OSINT in Activity Based Intelligence

Activity based intelligence (ABI) requires access to all available sources of data. Recorded Future allows analysts to observe structured data on the open, deep, and dark web.

 
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

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Having worked on larger scale sites, we found out that you are bound to look at more scalable solutions to integrating widgets, code snippets or complete applications and mesh them into functional sites, in any given composition. To share some of…
JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
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…

758 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

Need Help in Real-Time?

Connect with top rated Experts

19 Experts available now in Live!

Get 1:1 Help Now