[yugyug]

hi does anybody know where I can find a javascript that will change the mouse cursor or add text next to it (in a little box or something) on a rollover? I've seen it before but can't seem to find it anywhere. I'm planning to use it within an Imageready constructed site, so if that sounds crazy please let me know

thanks

[Oisín]

You can do that via CSS, via the cursor property. You can see a list of available methods of doing this here.

As for the text (I assume you mean a tooltip?), just specify a title attribute for the link or image. [I’m assuming you want to use this for links—it’s generally a bad idea to change the cursor for anything but links, and in most cases also for links]

Example:

CSS:

Code:
a.linkage:hover {
cursor: crosshair;
}

HTML:
[html]<a href="blablabla" target="_blank" class="linkage" title="Fancy text that pops up">
<img src="hubbadubba.png" alt="Hubbadubba" /></a>[/html]

That will make the cursor a crosshair-style cursor when hovering over the link, and the text specified in title will show up in a small box after a second or so. You’ll still have to do the rollovers separately, of course, either via CSS or via JavaScript.

[yugyug]

thanks oisin - I never knew that <title> tag existed. sooo easy but can I ask -
1. whats the simplest way to format the text box (like make the background white)
2. and is it possible to remove the delay before it pops up?

in case you hadn't guessed I know jack about CSS.... I'm more of a print designer sorry!

[yugyug]

I should add that I found this javascript that does allow you to change the format of the boxes but my head is spinning trying to figure out how to implement it on an image based webpage.

And perhaps CSS is a more elegant way to do it?

Ideally I want to apply it within Imageready so that I can make graphical changes and re-export without needing to replace the script in dreamweaver/go live.

I guess I could do this with a external CSS file?

[Oisín]

Originally Posted by yugyug

1. whats the simplest way to format the text box (like make the background white)

Good question, really. I don’t actually know. I suppose tooltips are somehow accessible, but I have no idea how, or where in the document hierarchy they are.

2. and is it possible to remove the delay before it pops up?

Again, I suppose it is, I just don’t know how. There are probably some more vintage CSS/JavaScript gurus here who will know, though.


As for that JavaScript that adds those little pop-ups... my personal opinion is that it’s a hell of a lot of code mumbo-jumboing for such a small effect. It also doesn’t seen particularly elegant to me, though I must admit I didn’t bother reading through it all—it was simply too long and cluttered for my brain at this time.

If possible, it is definitely far more elegant to do it in CSS, and usually requires much less work.

Finally: yes, you should have all your CSS in an external CSS file; that will also make changes easier to implement.

[Chuckit]

Originally Posted by Oisín

Good question, really. I don’t actually know. I suppose tooltips are somehow accessible, but I have no idea how, or where in the document hierarchy they are.

I don't believe they are. They're just an implementation detail of how the title attribute is rendered, not a DOM element unto themselves. You can simulate it with a floating layer like the page yugyug linked, but that's pretty much it.

By the way, while the code on that page isn't the clearest, I actually like it. You'd be amazed how many broken implementations of that effect there are out there (I have to deal with one every day!). That one at least does the effect the right way.

[Oisín]

Originally Posted by Chuckit

I don't believe they are. They're just an implementation detail of how the title attribute is rendered, not a DOM element unto themselves.

Duh! If I’d put a bit more than .4 seconds of thought behind what I said, I would have realised that. *smacks forehead*

By the way, while the code on that page isn't the clearest, I actually like it. You'd be amazed how many broken implementations of that effect there are out there (I have to deal with one every day!). That one at least does the effect the right way.

Like I said: it was just too long and cluttered (meaning the way the text was presented looked cluttered and hard to read to me) for my somewhat limited—as demonstrated a few lines above—cerebral abilities today.

[yugyug]

If possible, it is definitely far more elegant to do it in CSS, and usually requires much less work.

this one uses a .css file and also .js file and seems to be little clearer. I'm gonna give it a go, thanks for all the help.

[yugyug]

YAY! managed to implement that last one on my website

yugyug.com

Its pretty neat. but a bit buggy - i noticed a few things:

> The mouseout command to turn it off is the same as the mouseover command to turn it on, so if you activate it with a mouseover, but then mouseover the actual tooltip, it turns off. Its action is then reversed permanently !
I fixed that by changing is Y position in the .js file to make it impossible to happen, (but can't figure out how to change the X position).

> Its mouse tracking ability doesn't work over images like it does over text. Does anyone know why? Perhaps I should use the earlier javascript I found, but it looks like a lot of work to implement.

thanks for everyones help.

[- - e r i k - -]

Holy crap. Talk about mystery meat navigation!