I'm trying to compose a "What do the remote buttons do" page for the FAQ at riocar.org.

Ideally, I'd like to have GIF pictures of the Rio and Kenwood remotes up on the screen, then when the mouse moves over a button, have a small window pop up describing the function of that button. This window could be either over the button, or it could be text below the image.

I would want the text to be easily modifiable. In other words, putting up a GIF of the text is not desired.

I assume Javascript would be the easiest way to do this. does anyone have any example code for this?

Note: Things I'd like to avoid: Slicing up the image (I'd rather enter X/Y numbers into code than slice the image), using the browser's status bar text (I know how to do that, it's cheesy), and putting up message boxes that require an OK confirmation (I could do that too, but it would be irritating to use).

Try to look at teh source of DVD World as they to a similar type of thing to display info about DVDs when you move your mouse over the thumbnail. I have briefly glanced at the code and it looks pretty hefty...

That is precisely the sort of thing I'm looking for. Now, to figure out how to implement it!

If anyone has anything more easily pre-packaged, let me know.

Hmm. Got bits of it working in my own code already. Kinda spiffy. Working on boiling it down to its simplest components and figuring out how to make it mine.

You could use the ALT attribute of the IMG tag. Originally it was supposed to contain a textual description of the image, to be shown by browsers that can't display images. These days it's (ab)used by Internet Explorer and Netscape to display a tooltip when the mouse hovers over the image.

/Pepijn

Aha, but you don't want to slice up the image. Never mind...

/Pepijn

I have got to start reading more than one sentence of each post...

/Pepijn

No, that's a valid comment. I actually thought about using the Alt text, but I had some other stuff I wanted to do with it. Main problem is that the Alt text isn't implemented as a tooltip for every browser.

I might end up slicing up the images anyway. The stuff I'm stealing from dvdworld wants it as separate images. I could hack the code to allow a single image, but I think I can get the job done more quickly if I just bite the bullet and slice the image.

Tony, take a look here. Is this what you're after?

Doesn't work well with Netscape 6 I'm afraid, replaces the whole page with the text instead of just showing the text on the side.

Oh the joys of cross-browser compatibilty! Thank goodness I now work in exclusively on Intranet apps where I can not only specifiy the "flavour" of browser but also the version and service pack number...

hmmm... yeah cross-browser (in)compatibility is a real PITA. It was just something I knocked up quickly. Maybe if I used a different type of tag for defining the layer that would work better.

Yes, I am afraid even for all my personal stuff I tend to assume that people have access to IE5+ nowadays. I really don't have the time or energy to make it work 100% with Netscape or earlier versions of IE. I get such a small percentage of non-IE5 users visiting anyway...

Yes, that is what I was after, thanks!. Of course, now it's too late, I've already implemented something based on ripping off the DVDWorld code.

Hang on to that, though, if there ends up being a problem with the DVDWorld version, I will need to fall back on it.

I don't have NS6 to test against, we'll see how it does with the DVDWorld code once I've put it up.

Okay, I'm working on the implementation of the page and I'm filling out the data. I have some questions. Can anyone help me out?

What does the button 9 do on the Kenwood/Rio. It is labeled as "title" on the Rio. What does "title" mean in relation to what the button does?

I'm testing this out at my desk and I don't have the tuner hooked up here. Also, my Mk1 sled is no longer in a car so I can't check the Mk1 tuner functions at this time:

How do you switch AM/FM on the Mk2 tuner with the Rio remote? Is it just a hit of the Tuner button? And with the Kenwood remote, is it the same thing (hit tuner), or do the AM/FM buttons on the Kenwood remote actually do that? If not, what do the FF/REW buttons on the Kenwood do in tuner mode?

I'm sure I'll come up with some more as I work on this... And anything I don't get answered here I'm sure I can figure out for myself if I play with it...

One suggestion: make the image an image-map, with links to the descriptions of each button. Have the button name be the ALT of the AREA (may be useful for graphical as well as non-graphical browsers), and the full labelling as TITLE.

No Javascript anywhere (even on the one browser I use that supports it, I generally never enable it) and makes sense on text and graphical browsers.

In reply to:

---

What does the button 9 do on the Kenwood/Rio. It is labeled as "title" on the Rio. What does "title" mean in relation to what the button does?

---

Isn't it just another tweak-order function? Find another song with the same title (or if held, "Hate title")?

One suggestion: make the image an image-map, with links to the descriptions of each button. Have the button name be the ALT of the AREA (may be useful for graphical as well as non-graphical browsers), and the full labelling as TITLE.

I had thought about doing an image-map, but I didn't have any good tools for creating the map and defining the regions. Also, I didn't know what to do with the links other than do message-boxes with OK buttons (yuck).

It wasn't until just now that I realized I could have created a separate frame and made the TARGET of the HREFs be the frame. That would have been dead simple. Now it's too late and I've got a much more snazzy implementation based on the DVDWorld code.

Isn't it just another tweak-order function? Find another song with the same title (or if held, "Hate title")?

Didn't do anything when I tried. Anyone else?

I'm still working on it, but if you want to look at the page in progress, you should be able to see it here.

I did end up slicing the images, once I found a free downloadable image slicer that worked well.

I'd be very interested in knowing how it performs on other browsers. I have only tested it on IE5.5 and Netscape 4.7 at this time. What about Netscape 6 and IE 4? Anyone?

In reply to:

---

Isn't it just another tweak-order function? Find another song with the same title (or if held, "Hate title")?

Didn't do anything when I tried. Anyone else?

---

You're right

And yes, I tried it with a song called Money (4 different, by Pink Floyd, Space, and the Flying Lizards), so it should have found another match later in the playlist.

Ah, just chatted with Roger. This button actually doesn't do anything yet. It might in a future release.

Doesn't seem to work in Opera 5 and not in Netscape 6.1 either. Opera 5 reports parsing errors in script (no details though), Netscape 6.1 doesn't seem to do anything at all.
I double checked that I have javascript enabled in both browsers.

As you already ended up slicing the images, please set the ALT- and TITLE-texts as proposed in this thread. You could still use the javascript approach for the IE5 users (though I don´t like the fact that the info immediately pops up).

Also, I generally disable JScript (which includes JavaScript or vice versa) in IE.

cu,
sven

The problem with setting the ALT tag is that it gets in the way of the cool Javascript window.

I wonder how to make it work in Opera and Netscape 6. If anyone knows anything about Javascript, take a look at the stolen code (contained in http://www.riocar.org/upload/faqpics/remote_mouseover_library.htm ) and see if it can be fixed? Maybe it's something simple.

One request... it's looking great so far... but could you scan them at a higher res? It'd be nice to be able to actually read what's on the remotes. As it stands it's very difficult/impossible to make out some of the text on the graphics. =]

Not going to happen.

My goal was to make the images take up very little screen-real-estate, not to make the buttons readable. People with small screens or who run their browsers in a small window might want to look at it.

Besides, now that I've created the tables and sliced the graphics, it would be a royal pain in the arse to do it over again. You can still see the button names when you hover over them.

If I ever change the layout of the page, it's going to be to add front-panel pictures.

I know you already have something working, but you may also want to look at overlib which does basically the same thing and appears to be a little more tolerant of non-mainstream browsers.

-Mike

Holy crap. That's the exact library that DVDWorld is using. That's the library I just stole.

I didn't realize it was a licensed piece of software. I'm going to have to look at their licensing agreement and see what it involves. I might have to take it down.

Thanks for bringing it to my attention.

Ah, OK, looks like it's freely available from the license agreement. I should just fix up some comments in the code and see if his latest version is any more browser-tolerant. Cool!

Holy crap. That's the exact library that DVDWorld is using. That's the library I just stole.


Looking at the licence, it's the artistic, so you should be ok... I'd put a link just to be nice, but you shouldn't have to worry about taking it down...

Yeah, it looks like he's got better support in the newer version. He still doesn't support Opera, but he's supposedly fixed the Netscape support, so we can try that out. I'll be uploading the fixed version shortly, complete with an ad-link back to his site. Good stuff.

THANK YOU for pointing that out to me, I'm glad I can link the original author.

Hi.

I checked the overlib website using Netscape 6.1 and Opera 5. While Netscape looks good now, the side is completely unusable with Opera 5, it only displays some random characters (many question marks, some >128 ASCII characters,...).

Not the kind of improvement I would expect.

cu,
sven

That's to be expected, the author of overlib says he knows it doesn't support Opera.

Thanks for checking for me.

the side is completely unusable with Opera 5, it only displays some random characters (many question marks, some >128 ASCII characters,...).

I think that may be a different issue entirely. It does the same thing to me with omniweb. It looks like they have screwed up the content encoding or charset. Anyway, I am guessing that is a problem with the site's webserver setup and not overlib itself.

-Mike

Hi,

i've updated a version ov overLIB some time ago to support Opera and Netscape 6. You can see it in action here: http://epaper.rhein-zeitung.de/01/10/20/
(so you can test if it really works in opera - i think it should but i've got no time to test right now)

the source is located here: http://epaper.rhein-zeitung.de/common/rzlib.js

i could extract the relevant parts of rzlib.js for riocar.org...

alex

Hi.

It only partly works in Opera 5:
It does update the title that is displayed in the upper left corner (the name of the local newspaper), but it does not show the info box. It works in Netscape 6.1 as expected (as in IE with JScript enabled).

I still dislike this approach: It is totally dependent on JavaScript, which anyone with a decent security has disabled in IE (as IEs JavaScript is only enabled when JScript is enabled, which in turn has a lot of security problems JavaScript in its own doesn't have). And I really don't see any real advantage over the ALT- and TITLE approach.

cu,
sven

Hi,

I think the JavaScript popups just look cooler .

Perhaps we could do both - ALT/TITLE _and_ POPUPS.

If JS is enabled it clears the ALT/TITLE on load so they wont show up.
If JS is disabled you can see the ALT/TITLE and no popup.

I don't know if this will work in older browsers (NS4.x) - DOM browsers should be fine.

Alex

I think the JavaScript popups just look cooler .

You are right, they look way cooler. However, I have a few propositions:
1. The <a href> tags should point to a meaningful target, not just to the
document itself. If they are intended to point back to the document itself
(to the start of it), add an "on click" JavaScript function that returns "False",
so that they are disabled when javascript is working.
2. Add a page that works with Javascript being completely disabled. If needed,
simply show the remotes, and list a description of the button functions below.

I just enabled Jscript in IE for the tests on this page only, I usually have it disabled. And I strongly recommend that everybody else does so, too, or at least have it set to ask for permission before executing the scripts.
JScript (not Javascript) is way too easily hackable.

cu,
sven

Nice page. I'm not going to implement that library, though, as I'm interested in using the latest version of the author's original code. It's got some recent bug fixes that I think are important.

Did you send the author your Opera fixes for him to integrate?

If JS is enabled it clears the ALT/TITLE on load so they wont show up.

Can you give me more pointers as to how to set this up?

The a href tags should point to a meaningful target, not just to the document itself. If they are intended to point back to the document itself (to the start of it), add an "on click" JavaScript function that returns "False", so that they are disabled when javascript is working.

I deliberately did it the current way on purpose because Netscape 4x has some bugs for which that is the work around:

1) The popups don't work unless it's a link. They don't work for just images.

2) If you click on something or resize while netscape is loading the page, the javascript fails, and then the page will not show popups. If you click on the image and have it redirect to itself, that forces a page reload which re-loads the javascript and makes it work again.

Add a page that works with Javascript being completely disabled. If needed,
simply show the remotes, and list a description of the button functions below.

I would like to avoid maintaining two pages. If I can get the Alt text working with that single htm file, I'll implement that.

what about doing something like:

A HREF="javascript:;" .....

Since it looks like you are going after a JavaScript 'do nothing'.

Hi,

> Did you send the author your Opera fixes for him to integrate?

Nope, cause it doesn't really work (anymore) :-(

Alex

Hi,

i've "hacked" a quick demo for you here http://ghostwheel.de/demo.html.

i'm think it currently only works in Mozilla and IE>6 ... but i've not tested it.

If Javascript is enabled you can clear the alt/title tags by pressing "clear tags" - this should be done onLoad - but it's only a demo ;-)
"show alt tag" and "show title tag" display the image's alt/title

the "NOSCRIPT" is for browsers without javascript.

Alex

I'll have to look at this more closely later. On my current system, it produces strange results. It still has the alt text come up over the overLIB window (the reason I didn't use alt text to begin with).

> I'll have to look at this more closely later.

Jup, I'll try to make the script work in all browsers (Opera, Netscape > 4, IE > 4 and Mozilla) - Currently it only works in DOM-compatible browsers.

Alex

BTW, is DOM part of ECMA JavaScript standard?