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.