JavaScript "link overmouse"

That's cool, now where's your image?

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

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

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

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

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

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>

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

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

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

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

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

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

Clinton

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

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

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

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

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

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

Quickie:

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

Give that a shot.

Tom

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

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

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

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

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

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

Clinton:

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

Is a brief article/tutorial on preloading images.

Tom

Thanks Tom for the time.

Clinton

Most welcome!

Tom