Users of MSN TV do not have the use of a mouse, like computer users do. But when we use our keyboards or remotes to place our cursors on a link on a webpage, we're doing what computers users do with a mouse. Computer users see an arrow or a hand on the link. MSN TV users see the whole link surrounded by a yellow box that turns green when we click on the link. I've never liked this yellow box surrounding an image, as I think it detracts from an image. To my eyes, when the yellow box is around an image, it looks like it's part of the image border. So if you're like me, here's a "fix" and also a way to get a neat effect on your page.
If you like to collect images, your own or those you find copyright-free on the internet, and display them, you usually put thumbnail sizes of them into a table. The yellow MSN TV cursor goes around each image as the user works the arrow keys. Avoid this by sticking in a row of title cells right above the row of image cells. You can do this with text. But for the neat mouseover effect, here's what you do.
Some mouseover codes do not work with MSN TV. But here's a simple one that does.
The above codes fit right in a table cell. If we use this mouseover effect, we can keep the cursor on the titles instead of surrounding the images, like we usually do when displaying a table of various images. But the titles must be images for this particuar code. You can make your own easily at any Image Magick. By the way, this particular column is not a TINY tidbit!
Before reading any further, check out Flo's page. If you like this, keep reading. If not, check out the other columns in this issue of the Tribune. If you already know how to make images at Image Magick, go do that now, making one blank and as any title images as you need. Make them all 130 pixels wide. Height is your choice. Learn how to make your own title images.
Now on to making the display page. Gather all images you want to display and put them into a new directory. Then resize each image so its dimensions are 130x122. These new, smaller images will be the thumbnails that show on your display page. Four will fit across the page. So start a table with one row of 4 cells, then another row of four cells:
<table border="0" cellspacing="0" cellpadding="5">
<tr>
<td></td> <td></td> <td></td> <td></td>
<tr><td></td> <td></td> <td></td> <td></td>
</table>
Now stick the thumbnail images in the SECOND row of cells, using the image tag:
<img src="URLthumb1.jpg" width="130" height="122" border="0">
Into each cell of the FIRST row goes the mouseover codes. Remember, the same blank image is used for all four cells. But you'll have a different title image for each thumbnail. So check carefully after you've put all the codes in the table to make sure they are accurate. Finally, here are all the codes you'll need for this project.
|
