onMouseOver question

rblampain · 01-06-2011, 12:33 AM

I have hundreds of thumbnail images and I need to display on the client side one name only for each when the visitor passes the mouse over them. The only way I know (using frames in this case) is to use a script similar to the following:

<a href="" target="" onMouseOver='top.nav3.location="not/notecome.htm"' onMouseOut='top.nav3.location="nav.htm"'>

But this involves creating a full and w3c correct HTML document which looks like an over-kill of the problem.

Is there a simpler way to solve the problem? If not, is it acceptable to use a truncated HTML document comprising only the necessary tags to make it work on the test machine (<html><body><.....onMouseOver.....></body><?html>

Or a way to display the content of the "alt" tag (I can put that name there)?

In the worst case, I could use the javascript "Alert" but it does not fit esthetically and it needs one mouse click from the visitor. Is it possible to make one's own "Alert" picture and how?

Any help or hint most appreciated.

Thank you for your help.

paulsm4 · 01-06-2011, 01:36 AM

Depending on whether or not you have access to the server - and you're comfortable with PHP - you might be interested in "phpThumb":

http://phpthumb.sourceforge.net/

Guttorm · 01-06-2011, 02:11 AM

Hi

If you want to code it yourself, you can also change the page on the fly with innerHTML. First you need to make a div somewhere:

Code:

<div id="nameDiv"></div>

Then you set the content of the div with some Javascript:

Code:

function displayName(name) {
  document.getElementById("nameDiv").innerHTML = name;
}

You can pass text or html to this function and it will be displayed inside the <div> tag.

If you only want names of pictures, you can also use the title attribute with the <img> tag. The alt text will show if the picture cannot load, whereas title is for tooltip text.

rblampain · 01-06-2011, 07:11 AM

Thank you Guttorm, I had never heard of innerHTML and it is a real revelation since I can do other things with it. Using the <title> tag solves the problem very well and efficiently.

Thank you also paulsm4 but I already have the thumb pictures.