I’m a bit of an HTML newbie, and i’m trying to do something that i haven’t done before, but i can’t find out how to do it in the books that i have.
I am setting up a website with a bunch of images on it, and i want to be able to set it up so that, when you put your mouse over the image (without clicking) a little textbox comes up on the screen with a caption. Then, when you take your mouse away, the text box goes away.
Anyone know how this is done?
Use the ALT tag to describe each image. For example, <IMG SRC=“foo.jpg” ALT=“Description of foo”> would display the image foo.jpg and would show the text description when a user moved his mouse over it.
The ALT tag was originally designed, I believe, to be something used by a visually handicapped or blind person’s screen reader. Since the person cannot see the image, and browser software isn’t yet sophisticated to figure out what the image looks like in human terms, the ALT tag is read aloud as the image’s description.
The mouseover action you describe is a function of the particular browser upon seeing an ALT tag. IE6 does exactly as you describe, but I’m not sure all others do. Older Netscapes do not.
An alternative would be Javascript code, which gives more flexibility as well, but of course that won’t be rendered by 100% of all browsers, either.
Number, your own link says not to use the ALT attribute for tooltips. Instead, use TITLE.
Whoops, my mistake. Use TITLE.
Thanks for you help, folks.
Actually, about two minutes after i posted the OP, i found the directions for using “ALT” in my book. The book also talks about the “TITLE” command, but i didn’t know about it until you guys told me.
It looks like i may have to go with another option, anyway, because when you use either ALT or TITLE the text box only stays on screen for about 6 seconds or so. I need something that will stay there as long as the cursor is held steady over the object.
I notice that this happens with the smiley faces on the right hand side of the SDMB “compose message” page, but for some reason this page won’t let me view the source code to find out how it’s done.
If anyone knows, i’d be most appreciative.
If this route proves unproductive, i might just try a small pop-up window.
<html>
<head>
<title>Your Page</title>
<script language='javaScript'>
<!--
function imglabelon(){
document.getElementById('divLabel').innerHTML = "This is the Image Label";
};
function imglabeloff(){
document.getElementById('divLabel').innerHTML = " ";
};
//-->
</script>
</head>
<body>
<img src='something.gif' onMouseOver='javascript:imglabelon();'
onMouseOut='javascript:imglabeloff();' />
<br />
<div name='divLabel' id='divLabel'> </div>
</body>
</html>
That will print out text beneath the image when the mouse goes over it, and the text will disappear when the mouse is no longer over the image.
Many thanks, Starbury. That’s a really useful function which i’ll certainly use sometime. Unfortunately, it’s not really the solution i need for this particular purpose. The images in question already have captions; i was hoping to use a textbox on mouse over to give additional information.
Also, if i understand the javascript code correctly (and i may not, as i’m pretty new to all this), this code would only allow a single label. What if i had multiple images on a page, and wanted different text to appear for each one?
At the moment, it looks like allowing users to click on the image and get a small pop-up window is going to be the best way to go.
Thanks again for the help.
In case you ever do need to use that code for multiple images, I would change it to this:
<html>
<head>
<title>Your Page</title>
<script language='javaScript'>
<!--
function imglabelon(imgnumber,yourmessage){
var htmltag = 'divLabel' + imgnumber;
document.getElementById(htmltag).innerHTML = yourmessage;
};
function imglabeloff(imgnumber){
var htmltag = 'divLabel' + imgnumber;
document.getElementById(htmltag).innerHTML = " ";
};
//-->
</script>
</head>
<body>
<img src='something.gif' onMouseOver="imglabelon('1','message1');"
onMouseOut='imglabeloff("1");' />
<br />
<div name='divLabel1' id='divLabel1'> </div>
<img src='something.gif' onMouseOver="imglabelon('2','message2');"
onMouseOut="imglabeloff('2');" />
<br />
<div name='divLabel2' id='divLabel2'> </div>
</body>
</html>
Basically, what’s happening here is that you create new div tags (or you can use P tags for paragraphs, or really any inclusive tag) and just increment the number for the “id” and “name” properties of the tag.
Then, the javascript function loads the text into the appropriate div tag. I assume you wanted a different div tag for each image. If not, you would just pass in “1” for each function. I hope that makes sense – its probably a little confusing if you don’t have experience with javascript.
You could use the following code if you want a little message box to pop up when an image is clicked:
<html>
<head>
<title>Your Page</title>
<script language='javaScript'>
<!--
function openmsgbox(yourmessage){
alert(yourmessage);
}
//-->
</script>
</head>
<body>
<img src='something.gif'
onMouseDown="openmsgbox('insert message here');" />
<br />
<img src='something.gif'
onMouseDown="openmsgbox('insert another message here');" />
</body>
</html>
Try this: info boxes
This library allows you to insert mouseover tips. There are a bunch of neat features and it’s totally free. I’ve used it and can vouch it’s a neat little utility.
Wow!
This is an awesome tool, especially for a dummy like me who hasn’t fully grasped javascript yet. It does exactly what i need.
Thanks for the tip!
The JavaScript fragment doesn’t seem to work with any non-IE browsers.
You’re right. I forgot that getElementById was only for IE.
I made a few changes to the code and tested it out in IE and Netscape 6.2. I am guessing it should also work in Mozilla:
<html>
<head>
<title>Your Page</title>
<script language='javaScript'>
<!--
function imglabelon(imgnumber,yourmessage){
var htmltag = 'divLabel' + imgnumber;
document.getElementsByName(htmltag).item(0).innerHTML = yourmessage;
};
function imglabeloff(imgnumber){
var htmltag = 'divLabel' + imgnumber;
document.getElementsByName(htmltag).item(0).innerHTML = " ";
};
//-->
</script>
</head>
<body>
<img src='something.gif' onMouseOver="imglabelon('1','message1');"
onMouseOut='imglabeloff("1");' />
<br />
<div name='divLabel1' id='divLabel1'> </div>
<img src='something.gif' onMouseOver="imglabelon('2','message2');"
onMouseOut="imglabeloff('2');" />
<br />
<div name='divLabel2' id='divLabel2'> </div>
</body>
</html>