Javascript Rollovers (GQ). And CSS (IMHO).

Factual Questions
1

I’m working on an index page of photos and would like to add a Javascript rollover to highlight each image as the mouse passes over it. I’ve figured out (well, copied and modified) how to run a loop to generate the onMouseOver image(s), but is there a way to do this without having to make the array bigger and bigger? Since I’m only using one highlight image (a one-pixel orange-colored block, sized up to fit), there should be no performance issues, but I’d just like to make a code a little cleaner, especially as more photos are added.


<script language="JavaScript">
<!--
var imgNames,numImgs,imgsOff,imgsOn;
if(document.images)
{
  imgNames=new Array("1A","1B","1C","1D","1E"); 
  numImgs=imgNames.length;
  imgsOff=new Array(numImgs);
  imgsOn=new Array(numImgs);
  for(var k=0;i<numImgs;k++)
  {
    imgsOff[k]=new Image(90,5);
    imgsOff[k].src="../../icons/blank.gif";
    imgsOn[k]=new Image(90,5);
    imgsOn[k].src="../../icons/orange.gif";
  }
}
function rollOn(index)
{
  if(document.images)
    document.images[imgNames[index]].src=imgsOn[index].src;
}
function rollOff(index)
{
  if(document.images)
    document.images[imgNames[index]].src=imgsOff[index].src;
}
// -->
</script>

[SNIP]

<!-- The highlight is a 90x5 orange-colored bar under the 90x90
     thumbnail image. -->
<td align=center>
  <a href="pages/IMG_1.html" onmouseover="rollOn(0);"
     onmouseout="rollOff(0);"><img width=90 height=90 border=0
     src="thumbs/IMG_1.jpg"></a><br clear=all><img width=90 height=5
     name="1A" src="../../icons/blank.gif"><br clear=all><img
     width=90 height=14 src="../../icons/blank.gif"></td>
<td align=center>
  <a href="pages/IMG_2.html" onmouseover="rollOn(1);"
     onmouseout="rollOff(1);"><img width=90 height=90 border=0
     src="thumbs/IMG_2.jpg"></a><br clear=all><img width=90 height=5
     name="1B" src="../../icons/blank.gif"><br clear=all><img
     width=90 height=14 src="../../icons/blank.gif"></td>

[etc., etc...]

Now, the CSS question: I’m coding these pages with CSS now. I have no idea what the browser capabilities of my audience is, however (they’re not techies, that, I do know). In testing the page without CSS, it sure looks uglier, though everything still works and are placed genereally where they’re supposed to be. So, should I continue with my ways, or go back and start pounding in <font> tags everywhere? Oh, as for the Javascript, the page looks fine without it, just without the extra feedback from the highlighting, so I’m OK with it.

Thanks!

2

You’re mixing apples and oranges at the moment.

First things first.

  1. Get your Javascript rollovers code correct and HTML code. You don’t have all of the tag attributes in quotes. You need to do this.

  2. What do you want to do with CSS? You have no written content in the example so using CSS or FONT tags is irrelevant.

  3. You can use CSS and get rid use of the TABLE to position the rollover images. However, this is pretty much an advanced thingie and your post indicates you are not there yet.

  4. As for your array, as written, you do need to reference every image. Did you write the JS code or did you find it on the web? I suggest you seaqrch round at other sites because you might find some tighter code.

  5. View the page with Javascript turned off. Can a user still figure out what’s going on? If not, you need to fix that. Oh, yeah don’t forget ALT attributes for all of your images.

3

You can also achieve your rollon/rolloff code by naming your images appropriately.

For example, if you have an image called ‘Car’, create an ‘on’ image called ‘Car_on’. Now you don’t need any arrays. In your mouseover event, simply read the src attribute of the image you clicked on, append “_on” to the end, and set it. In the mousout event, strip the ‘_on’ off the src property and set it again.

Not only does this simplify the code, but it makes your directory of images more understandable.

A variation of that theme would be to create a separate directory called “images_on” and one called “images_off”. Then just prepend the appropriate directory to the src attribute, and away you go.

As for CSS, you need to first make a decision exactly who you are writing your pages for. Don’t just make a nebulous choice to support ‘all’ browsers. Set up a hard specification, like “My page will work with IE 4.0 and above, Netscape 4 and above, and any other browser that supports the W3C DOM standard and CSS level 1”. Then build and TEST for that spec. By setting hard standards, you can make sure that your code works. By trying to satisfy everything, you’ll never know if you got it right.

4

You can get TopStyle Lite for free (not sure what the difference is between this and the pay version) and it will give you hints an tips for cross-browser compatibility for a lot of different browsers. You can build a style using drop-down options, and the program will tell you which browsers each part of your style will handle. You can also preview the outcome using different browsers.

Here’s a link to TopStyleLite

Here’s a link to TopStyle Pro 3.0 trial version

You can also make 3 seperate CSS pages (one for IE4, NS4 and NS6) and use JavaScript to test the browser and load the correct CSS file.

5

Duckster:

  1. I know about the HTML tag quotes, and that’s one of the things I’ll have to clean up. Interestingly enough, though, when I ran my code through W3C’s HTML validator, that’s not one of the things it complains about. But I’m confused about your comment regarding correct Javascript code (unless you’re talking about the “k” and “i” – apologies, in the original, it’s i’s all the way, but *$#@! vB italicized all my text when it saw the i in brackets, so I changed’em to k’s when I posted – but evidently didn’t catch them all – the code does work).

  2. The example given skips over the page/site’s menus, which is primarily what the CSS is for. And for the text that is also skipped over in the example.

  3. You’re right, I’m not there.

  4. The JS code comes from the book, Constructing Usable Web Menus (I have the book; I didn’t just download their code).

  5. Well, the images have no borders, but being a thumbnails page, I’m assuming (maybe it’s not a good one, but…) that even non-techie web users have learned to hover the mouse over an image, and if they see the cursor change to a hand, then it’s an object they can click on.

Sam Stone:
The problem is that I don’t want the images themselves to be highlighted, but rather just a separate underline that lights up. I suppose I could create both the img_off and img_on files, with the underlining incorporated into the image, but that means I’ll have to load all the thumbnails twice (on and off states), which slows down the page. Using (and re-using) a small underline was my solution for the speed issue.

ZipperJJ:
I’d rather not make 3 CSS files and use Javascript to detect browser version, if at all possible. Actually, I have TopStyle lite (it came with DreamWeaver, which I just installed), so I’ll have to go poke around it a little.

6

You can achieve this affect through styles alone (no java). I’m not sure how standard it is, but you can use the following:

a:hover {border-bottom: 2 px blue solid; }

Set the width and color to whatever you want, and set a different color to the a:link and a:visited. Works fine in IE 6.0, which is the only thing I’ve tested it in.

I use [url=“Style Master CSS Editor for Windows and Mac OS X”]Style Master to create style sheets, its the best tool I’ve found, especially if you just dabble and can’t be bothered to remember all the valid styles and their syntax.

7

Okay… You don’t want to change the image, you just want to indicate that it has been selected, like putting a bright line under it.

How about putting the images in a table, and then having a thin row under the image row? Then if you rollover the image, the onlick handler specifies the ID of the table column directly below the image. Change the background color. That gets you an underline that goes on and off as you roll over the image.

I’m just going to type some code here without testing it, so don’t accept that it will work as-is, but hopefully you’ll get the idea:

function lightUp(image,onOff)
{
var lineID=“imageline”+image;

var lightLine=document.getElementByID(lineID);
if (onOff == “on”) {
lightLine.bgcolor=“red”;
else {
lightLine.bgcolor=“white”;
}
}
<table border=0>
<tr>
<td><img src=yadayada1 onmouseover=lightUp(1,“on”) onmouseout=lightOut(1,“off”)></td>
<td><img src=yadayada2 onmouseover=lightUp(2,“on”) onmouseout=lightOut(2,“off”)></td>
</tr>
<tr height=“5px”> <!-- Spacer row →
<td></td>
<td></td>
</tr>
<tr height=“5px”>
<td id=imageline1></td>
<td id=imageline2></td>
</tr>
</table>

Something like that. You might have to use absolute positioning on the table to avoid some browser bugs.

Another way I might do it would be a 1-pixel GIF of the right line color, and use the width and height parameters to size it to a nice line, or even animate it if you wanted. You could even use the 1 pixel trick to draw a box around the image.

8

Okay… You don’t want to change the image, you just want to indicate that it has been selected, like putting a bright line under it.

How about putting the images in a table, and then having a thin row under the image row? Then if you rollover the image, the onlick handler specifies the ID of the table column directly below the image. Change the background color. That gets you an underline that goes on and off as you roll over the image.

I’m just going to type some code here without testing it, so don’t accept that it will work as-is, but hopefully you’ll get the idea:

function lightUp(image,onOff)
{
var lineID=“imageline”+image;

var lightLine=document.getElementByID(lineID);
if (onOff == “on”) {
lightLine.bgcolor=“red”;
else {
lightLine.bgcolor=“white”;
}
}
<table border=0>
<tr>
<td><img src=yadayada1 onmouseover=lightUp(1,“on”) onmouseout=lightOut(1,“off”)></td>
<td><img src=yadayada2 onmouseover=lightUp(2,“on”) onmouseout=lightOut(2,“off”)></td>
</tr>
<tr height=“5px”> <!-- Spacer row →
<td></td>
<td></td>
</tr>
<tr height=“5px”>
<td id=imageline1></td>
<td id=imageline2></td>
</tr>
</table>

Something like that. You might have to use absolute positioning on the table to avoid some browser bugs.

Another way I might do it would be a 1-pixel GIF of the right line color, and use the width and height parameters to size it to a nice line, or even animate it if you wanted. You could even use the 1 pixel trick to draw a box around the image.

9

Oops. Forgot the code tag. Sorry about the bad formatting.

10

Regarding CSS, you are definitely heading in the right direction. Your website should be usable with out CSS, which is used to make things look better. From what you said you are using some really basic CSS functions, which should be supported by all the modern graphical browsers.