27 Nov 2003
Title tips are back
p. I used to have ["transparent title tips(Funky tool tips)":http://www.rousette.org.uk/mt-static/blog/archives/000217.html] on this weblog--a tip I picked up at ["kryogenix.org(The original version, as far as I know)":http://www.kryogenix.org/code/browser/nicetitle/]. I removed it because it seemed to be causing some odd behaviour on IE6. However, there's a modified version at "1976design.com":http://www.1976design.com/blog/archive/2003/11/21/nice-titles/ which doesn't use a PNG background, and has a few more niceties. p. I don't know if this will work any better (comments from IE6 users would be very welcome), but I thought it might be worth a go. This version has rounded corners and transparency to the background if you're using Mozilla, and an opaque background if you are using any other browser. _Unless_ you are using Safari 1.1; in a moment of inspiration, I realised that I could use the new "element transparency feature(text-align)":http://www.mediaworkers.de/text-align/opacity.html of Safari 1.1 to make the title background semi-transparent, like so: p.background-color: rgba(51,51,51,0.8);
p. I've tried it in IE5x on the Mac and it doesn't seem to break anything, so we'll see how it works out. I'm living on the bleeding edge here, folks, so feel free to shout at me if (when, perhaps) it messes up anything horribly. I'm just in one of those, "ah, give it a go, why not?" kinds of moods, but in case it does all go a little bit "Pete Tong(Definition on h2g2)":http://www.bbc.co.uk/dna/h2g2/alabaster/A649 I've only applied the rule to the index page for now. Hover away!
2
I suppose this is a matter of taste but I find them a bit over fussy & irritating. I can see where your links go in the status bar, so... Why oh why oh why?
by ThoughtBadger @ 27/11/2003 11:12 pm • Permalink
3
I'm afraid that I'm with ThoughtBadger on this one, not least because it requires you to code a title for each link. Years ago, when I designed a site for our department I included loads of onmouseover's for links, and at the time I thought they were pretty cool. And perhaps this is just contemporary laziness on my part, but these days I just can't be bothered. The url appears in the status bar, people can follow the links ... or not if they'd prefer. So yes, maybe it's an aesthetic nicity, but I don't really think it adds much other than a certain 'ooh, that looks cool'. By the way - the hover-over's are rectangular on my machine. Are they supposed to have rounded corners?4
Strangely, I find myself agreeing with the previous two commenters - it's pretty, but well, kind of pointless from my perspective. Maybe it's just the way I have things set on Opera (my browser of choice) but if I hover over a link, the address comes up in a tool-tip anyway, as well as in the status bar. Looking at the tool-tips in Mozilla is nice, with the rounded corners etc. (and I do wish IE and Opera would do that one too) and while I'm not decrying 'things for their own sake' (lord, I'd be a hypocrite if I did), is there a use for this that has slipped past me?5
Well, I asked for that didn't I? I suppose that I've rather selfishly implemented it for myself as a Safari user. I know that the title and URL properties appear in the status bar at the bottom when you roll over them in Safari, but that means that you have to move your eyes all the way down to the bottom of the page. And that inferior rectus doesn't contract itself, you know ( http://www.yorku.ca/eye/muscle.htm ). Seriously, that means that you sometimes lose your place on the page. It isn't a big thing, but it is a slightly irritating thing. I used to like the little tool tips that appeared in IE5.x and this was just an attempt to replicate the same kind of function. As you point out, it's more or less redundant in other browsers. Ideally, I would provide it as a user-selectable option, and then you could have it switched on or off as you preferred. I might look in to that. djn1: The corners are only rounded in Mozilla, unfortunately.6
I think you forgot it on your individual pages. Doesn't work here - works on your main index.by Erik J. Barzeski @ 29/11/2003 3:11 am • Permalink
7
I think it looks nice.8
Erik: I know. I said at the end of the entry that I was only applying it to the index until I saw how it worked. richard: Yay! Someone likes it! -----
1
the background appears completely transparent in opera [7.23], firebird [0.7] and ie6 on my winxp box. as these browsers don't support rgba() colours, i think you need to specify a normal background-color just before the fancy safari one, e.g.: background-color: rgb(51,51,51); background-color: rgba(51,51,51,0.8); otherwise i think it inherits the background-color of the parent element. browsers that don't support it should just ignore the second rule; safari will replace the first with the second. i hope.by bsag @ 27/11/2003 11:11 pm • Permalink