JavaScript "link overmouse"

Hello,
I'm trying to write a little piece of JavaScript for IE, Netscape and others, to add into my exicting Webpage. What I currently have is six links arranged along the top. When you pass over the link with the mouse it changes color. I now would like to include a picture that will show information about that page in a table that is setup. Also it would be nice to have an arrow point from the Link to the picture info. I have seen this done but can't figure it out. I have the links and tabel setup so if possible I would like to add this in. If you can see improvments for the Mouseover color affect Please do so.

Thanks for your help and suggestion.
Clinton

file://This is the table that I would like picture to go in: file://CURRENT
TABLE IN WEB PAGE

<td width="21%" height="210" valign="top" align="center">

</td>

file://This is whatI currently have:://THIS IS MY CURRENT LINK

<table border="1" cellpadding="0" cellspacing="0" width="100%" height="24">
  <tr>
    <td width="16%" BGColor="#E6E6E6" valign="middle" align="center"
height="24"><font
    color="#000000"><a
href="68HC11%20Microcontrollers.htm">Microcontrollers</a></font></td>

//THis is my MouseOver affect for the links:

<style type="text/css">
<!--
a:link {color: Blue;}<!--the cursor's a hand by default\>
a:hover {color: yellow;}
-->
</style>
Clinton112299Asked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

binkzzCommented:
That's cool, now where's your image?
0
Clinton112299Author Commented:
As you can see there is no JavaScript. That's what I'm asking for? The images can be anything for now until I have made them in PhotoShop so lets say name.gif, name1.gif, etc. The only thing that I have is the links and table.

Clinton
0
TTomCommented:
Sounds like what you need to do is:

<td><img name="myImage" src="somedefaultimage.gif"></td>

<a href... onmouseover="document.myImage.src = 'myGif.gif'" onmouseout="document.myImage.src='somedefaultimage.gif'">

You can probably use a 1px transparent image for somedefaultimage.gif to make sure you don't get the "I can't find it" placeholder.

Things to be aware of:

I think NS will not resize images, so you need to make sure that you set the size of your image in the table when you create it.

NS also does not currently support the "hover" CSS designation, so your links will not be changing when viewed in NS.

HTH,


Tom
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Clinton112299Author Commented:
Thanks I'll try this. I didn't know that NS didn't work with CSS. Can you suggestion something the will work?

Thanks
Clinton
0
bbsemailCommented:
If you want to display information about the link when a mouse passes over the link there are at least two ways to accomplish this.  Check out a site I am working on littlewillys.com

I pop up a dialog onMouseOver and close it onMouseOut.  The script works in both ie and communicator.  You can include the image swap in the function that I use for onMouseover.  As the previous advice mentioned; name your pic and then you just change its src attribute with your script.  

Be sure to preload your images so visitors don't have to wait for them!  

Another way to display information about the link or whatever is to set up a named textarea of a form on your page.  Then, use JavaScript to write to the textarea.  Beware, Netscape has trouble with this method.

Good luck

0
TTomCommented:
I did not mean to imply that NS does not work with CSS, only that it has an implementation which is different from IE.  In particular, NS does not support the "hover" property.  It also does not support changing styles for some elements, and it also does not support onmouseover/onmouseout (JavaScript) for some elements.

You just need to be very clear about what you want to accomplish, and determine that both NS and IE (and others?) support your specific needs.

Tom
0
Clinton112299Author Commented:
bbsemail, TTom thanks for the comments.
Can you clear up some issues I have. First is CSS a Microsoft thing? Bbsemail, I have seen the code from your example and will this work with both IE and NN.
<style type="text/css">
<!--
a {  
 color: blue;
 text-decoration: none;
}
a:hover {  
        color: lime;
text-decoration: none;
}
//-->
</style>
0
TTomCommented:
CSS is definitely NOT a Microsoft thing.  It is a W3C standard, supported and implemented differently by NS and IE.

The code above will NOT work, as NS does not support the "hover" capability.

Tom
0
Clinton112299Author Commented:
Thanks Tom,

SO with that what code for MouseOver Links will work with IE and NN? I've been looking for awhile and can't get a handle on this. Why is IE and NN so different??

Thanks
Clinton
0
TTomCommented:
The best answer I can give (for one of your questions) is, "why are Fords and Chevy's so different?"  NS and IE are "competing" products and, since there is no requirement that they function identically, Microsoft and Netscape have chosen to implement different features and to do things differently.  Certainly is a pain in the butt for web designers (but, then again, it may mean more available work).

On to your other question.  The best thing I could suggest for your table of cells is to look on www.webreference.com/js (or /dhtml?) for "Low Bandwidth Rollovers".  This tutorial explains in detail how to achieve similar effects to what you want.  I'm not totally sure it's cross-browser compatible, but a lot of their stuff is.

As far as the image changing thing goes, we can work some more on that, but I will need to know things like how many images you have (I assume one for each link).  Would help to see all the code for your page with an explanation of what needs to happen.  (I frequently get confused or lost as these threads get longer.  Sorry.)

Tom
0
Clinton112299Author Commented:
Tom thanks for the information. The best exanple I can show you is from this site http://www.ndsu.nodak.edu/index.js.shtml

When you put the mouse over the link it show a table of contents or what is in that link. I don't care about the picture in the middle changing. This is what I've been trying to get to work with out luck.

Thanks again
Clinton
0
TTomCommented:
AHA!  I see.

What they have done is to use a LOT of images, one for the link, one for the arrow, and one for the "text".  Once all those images have been created, it is a simple matter to use onmouseover and onmouseout to change each "set" of images according to which link has been moused over.

If you look at the code, each link is named, and there is an image named "arrow" and one named "goc".  The source for each of them is changed using mouseover/mouseout.

The only caveat I would point out here is that you need to be VERY careful in how your images are created, i.e., that they are all the same dimensions, and that they have been optimized for size, since you will have to load them all prior to using them (or the client will have to wait while they load).

It's a pretty neat solution.  Looks like they have some pretty good people working on the site.

If you want to do this, I am sure I can help you get there.  It's really pretty simple once the images are done.

Tom
0
Clinton112299Author Commented:
Yes Please Tom I would really like the Help on this. Just let me know what next we should do.

Clinton
0
TTomCommented:
As I indicated, in order to make this work like the site you showed, you will need to create a set of gifs for each link.

Probably, the first task would be to lay out the page the way you want, i.e., create your table code for the links.

I would create one table with three rows; the first will contain the links, the second will contain the arrow, and the third will contain the text.  For purposes of construction, you can include "dummy" text in each of the cells to indicate what should be there.

Once you have that, you will need two images for each of the links, one for an "unhighlighted" link, and one for the mouseover.  They should all be as similar as is reasonable.

For the arrows, you will need one for each link.  Since they must all point from the link cell to the text cell, you will need to experiment with sizes.

A sidebar here.  Using the arrows in this way means that your table will need to be a fixed width.  Otherwise, you will not be able to guarantee that the arrows will line up where you want them to.  If that is a concern, I would skip the arrows or, perhaps, just add an arrow pointing downward to the mouseover gif.  Your call.

Finally, you will need one gif for each of your text blocks.

Once you have all those, we can proceed to the actual coding.  It should be pretty simple.

Tom
0
Clinton112299Author Commented:
Tom'
Okay this is what I have so far.

//My Text Links in a Table:

<table cellpadding="0" cellspacing="0" width="100%" height="33">
  <tr>
    <td width="16%" BGColor="#409CAC" valign="middle" align="center" height="33"><a
    href="68HC11%20Microcontrollers.htm">MicroControllers </a></td>
    <td width="16%" BGColor="#FF00FF" valign="middle" align="center" height="33"><font
    color="#000000"><a href="Software.htm">Software</a></font></td>
    <td width="17%" BGColor="#FF80FF" valign="middle" align="center" height="33"><font
    color="#000000"><a href="Hardware.htm">Hardware</a></font></td>
    <td width="17%" BGColor="#13BCCA" valign="middle" align="center" height="33"><font
    color="#000000"><a href="Lisa's%20Page.htm">Lisa's Page</a></font></td>
    <td width="17%" BGColor="#F11FB8" valign="middle" align="center" height="33"><font
    color="#000000"><a href="Sports%20Page.htm">Sport's Page</a></font></td>
    <td width="17%" BGColor="#E6E6E6" valign="middle" align="center" height="33"><font
    color="#000000"><a href="About%20Us.htm">About Us</a></font></td>
  </tr>
</table>

//My default Picture which will be replaced by picture 1-6 when Link 1-6 is passed over, this is in a Table:

<td width="21%" height="210" valign="top" align="center"><img src="Home_copy.JPG"
    width="96" height="144" alt="Link1 copy.JPG (5200 bytes)"></td>

//For the setup of the picture of contents, I would like to have a default picture called home_copy.jpg that would always been showed except when the Link is passed over. Then the correct picture will repalce this and show the Links contents. One problem I orginally had was how do I have 7 pictures in one spot?

Thanks again Tom let me know what else you need.
Clinton
0
TTomCommented:
In each of your table cells, you will need to replace the default text with an image (containing the text for the link?)

<td width="16%" BGColor="#409CAC" valign="middle" align="center" height="33"><a href="68HC11%20Microcontrollers.htm">
//This is the new stuff//
<img src="microcontrollers.gif" name="link1">
//End of new stuff
</a></td>

You also need to provide a name for the gif which will be replaced, e.g.,

<img src="Home_copy.JPG" width="96" height="144" alt="Link1 copy.JPG (5200 bytes)" NAME="LinkCopy">

All the gifs for the links should be the same size, and you will need variations on them for the mouseover effect for the links.

You will also need to create the 6 gifs for the "copy" area.

This can be simplified if you want, by simply using the table links as you have created them.  If that's the way you want to go, I can whip up the code for the mouseover/copylink gif change right now.

I was just trying to do this in sequence to keep track of the steps.

Tom
0
Clinton112299Author Commented:
Tom,
Can we do One link at a time so I can see how this is done? How hard would it be to add in 5 more after this one? I have made the pictures for the first Link. MicroControllers.gif.
I also made a second Picture that is grayed to show a MouseOver affect? I have also made the table of Contents call MicroControllersContents.gif. The default picture is called Default.gif.

Thanks
Clinton
0
TTomCommented:
Sure thing.

The code for the link should look like:

<td><a href="yourmicrocontrollerslinkreftext" onmouseover="document.Link1.src='grayedoutimage.gif';document.copylink.src='MicroControllersContents.gif';return true;" onmouseout="document.Link1.src='MicroControllers.gif';document.copylink.src='Default.gif;'><img src='MicroControllers.gif' name='Link1'></a>

and be sure that the gif in the table is named "copylink" and the gif in the table is named "Link1".

That should do it.  Once we get the rhythm down, you should be able to do as many links as you want with no problem.

I'm out of here for the night.  Catch you in the morning.

Tom
0
Clinton112299Author Commented:
Morning Tom,

I worked on it last night and had a error. It said that document.Link1 is not an object. This is what I have so far:

//MicroController Link1

<td width="14%" BGColor="#FFFFFF" valign="top" align="center" height="40"><a
        href="68HC11%20Microcontrollers.htm"><img src="MicroControllers.gif" name="link1"
        onmouseover="document.Link1.src='MicroControllersGrayed.gif';document.copylink.src='MicroControllersContent.gif';return true;"
        onmouseout="document.Link1.src='MicroControllers.gif';document.copylink.src='Default.gif;'&gt;&lt;img src='MicroControllers.gif' name='Link1'&gt;&lt;/a&gt;
        width="
        86" WIDTH="96" HEIGHT="34"></a></td>


//Image in the left side of my page

<td width="21%" height="210" valign="top" align="center"><img src="Default.gif"
    alt="HomePage" NAME="LinkCopy" width="144" height="192"> WIDTH=&quot;144&quot;
    HEIGHT=&quot;192&quot;&gt;</td>

I have a picture for:
*MicroController Link
*MicroController Grayed out
*Default picture
*MicroController Table of Contents

Thanks
Clinton
0
TTomCommented:
Quickie:

JS is case sensitive "link1" != "Link1"

Give that a shot.

Tom
0
Clinton112299Author Commented:
Hi Tom,
I still have problems but with OnMouseOut. It doesn't change the picuters back? Also is there a way of removing the BLUE border that appears around the picture that is used as a link?

onmouseout="document.link1.src='MicroControllers.gif';document.copylink.src='Default.gif;'&gt;&lt;img src='MicroControllers.gif' name='link1'&gt;&lt;/a&gt;

Thanks
Clinton
0
TTomCommented:
Hmmm.  Not exactly sure why the mouseout would not work.  Will take a look at it in a bit.  You should be able to kill the border around the link with a "border=0", either in the code for the image or in the code for the link (DUH!  I should know which, but...)

< a href="" border=0> or <img src="" border=0>

Catch you a bit later.

Tom
0
Clinton112299Author Commented:
Tom,
Thanks for the info, I removed the boarder around the link with <img src="" border=0> . I have tried to figure out why the mouseoverout doesn't work. It doesn't got to the orgianl pictures? Also should  I be loading the picture in a array so the picture come up faster? I have seen this done before.
And last if I wanted to add in an arrow how do i call the second picture form mouseoveron?

Thanks
Clinton

0
TTomCommented:
Yes, you probably should be preloading the pictures into an array.

Still not sure why the onmouseout is not functioning properly, but I don't have a lot of time to look at it right now.  Sorry.

As far as an arrow, if you create the row in the table for the arrow, insert a default gif and name it, the code is similar to what you already have:

onmouseover="doc.link1.src=...;doc.copylink.src=...;doc.ARROW.src=...;"

Tom
0
Clinton112299Author Commented:
Tom,
Thanks, I found out that I was missing the </a>. Once I did that it work. As for the array can you send me an example of how this would work, When You Have The TIme. Also does what we did work with NN 4.7? I have tried it and it didn't work only works in IE? THe mouseover funtion didn't do anything

Thanks
Clinton
0
TTomCommented:
Hmmm.  Seems to me that mouseover and mouseout are only supported for certain elements by NS.  You might check out "developer.netscape.com" for the documentation.  I never remember which ones are supported and which are not.

I will also try to find some info on preloading arrays.  I think there is some on www.webreference.com.

Tom
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Clinton112299Author Commented:
Tom,
Thanks for all the help. I still can't get the MouseOver affect to work with NN 4.7. I'll figure this out later. Did you ever find any information on Perloading arrays.

Thanks
Clinton
0
TTomCommented:
Clinton:

http://www.webreference.com/js/tips/990927.html

Is a brief article/tutorial on preloading images.

Tom
0
Clinton112299Author Commented:
Thanks Tom for the time.

Clinton
0
TTomCommented:
Most welcome!

Tom
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.