Bare-bones rollover

Forum Moderators: open

Message Too Old, No Replies

Bare-bones rollover

keeping javascript fit and trim

tedster

10:23 pm on Feb 13, 2002 (gmt 0)

A lot of people use WYSIWYG editors like Dreamweaver to create the code for rollover images. Because these programs offer a one-size-fits-all utility, they often create bloated code for what is really a simple purpose.

There's no need build an array when you're only using one rollover image. And no need to use code that can handle three image states when you only use two. And no need for a complex "swap" function.

With the importance SEs place on the content to code ratio, it can be helpful to trim away all excess. With that in mind, this is what I use for basic rollover code. image1.gif is the main image and image2.gif is the rollover state.

HEAD

over=new Image(ww,hh)
over.src="image2.gif"

BODY

If this can be simplified any further, I'm very interested.

(edited by: tedster at 4:47 pm (utc) on Feb. 14, 2002)

brotherhood of LAN

10:33 pm on Feb 13, 2002 (gmt 0)

Just for comparison, I made one from MSFrontpage, and the difference in size is apparent

Also noted, I believe you mentioned this Tedster, it uses "javascript" instead of the more acceptable "text/javascript"

When using WYSIWYG I just use it to spare me writing HTML, and indentation to save more space

Just a comparison, note the difference!

txbakers

3:04 am on Feb 14, 2002 (gmt 0)

when I'm not using DW, I code it very simply also by incorporating the name of the img into the routine. I also create the images with the a character such as "O" for over in the name.

function over(name) {
name.src=name + "O.gif"
}

tedster

4:50 pm on Feb 14, 2002 (gmt 0)

I just made an edit to the script above -- joshie76 pointed out that I forgot single quotes around 'image1.gif' in the onMouseOut event handler. Without them IE starts looking for an object.

Thanks, Josh.

tedster

10:20 pm on Feb 15, 2002 (gmt 0)

<img name="bob" src="bob.gif" onMouseover="over(this)">

I like the idea of wrapping the .src change into a function. When there's lots of rollovers, that eliminates some decent file size.

Note: your code above works fine for Explorer, but other browsers don't all support an onMouseOver event handler unless it's inside an anchor tag.

circuitjump

8:08 pm on Mar 16, 2002 (gmt 0)

I did this rollover functions
to work with multiple images.

And this is what you do with the anchor element

I was originally trying to write the function like so

function MouseOver(name1,name2,img1,img2) {
document.name1.src = img1;
document.name2.src = img2;
}

But it kept giving me errors. So I found a site that said that I had to use the eval() function so that it could render the code correctly for the borwser to read. It worked. :)

jade3of7

6:18 pm on Apr 29, 2002 (gmt 0)

I normally use the following script (shortest so far):

This code doesn't require anything in the Head of the document.

I need some help, though, does anyone know of a way to link a rollover image that is an image map? I want to use two links for the rollover image (the original doesn't require any links). If you have any ideas, please help!

bigge

2:59 pm on May 12, 2002 (gmt 0)

->Jade3of7!
I use your code AND image map like this:
(map made in frontpage, the rest in notepad)

gph

9:07 pm on May 12, 2002 (gmt 0)

Maybe someone can help me here?

I've been trying to get two different image rollovers to work in an absolutely positioned div in NN4. I've been able to get it to work in every other browser I've tested or just NN4 but not both.

Ideally, I'd like the bulk of the code to be in the head because I'm using the rollovers on every page.

Thanks for your help.

tedster

12:23 am on May 13, 2002 (gmt 0)

It can be frustrating, I know, but cross browser image rollover really is possible. For NN4 support you must define onMouseover behavior in the anchor tag, even though later browsers also support it in the image tag.

If that's taken care of, check through the basics with an eye to typos, like missing some single or double quotes, or changing the spelling of the name attribute somewhere in the code.

The mouse event behavior is enclosed in double quotes, so the image names within must be enclosed in single quotes.

ROLLOVER BASICS

1. Rollover images downloaded into the cache

2. Each <img> tag is given both a name attribute and a src attribute. The src attribute defines the original image for that position: src="main_image.gif"

3. onMouseover (inside the anchor tag) brings in the rollover image: onMouseover= "name_1.src='rollover_image.src'"

4. onMouseout (again, inside the anchor tag) changes things back: onMouseout="name_1.src='main_image.gif'"

gph

5:09 am on May 13, 2002 (gmt 0)

Thanks Tedster, this appears to be a very specific problem that I've been unable to find an answer for.

I've gotten help on another forum where I was told that NN4 needs to pass the div id which works but then it won't work in any other browser.

Here is the original download sample from [dhtmlnirvana.com...] in which the only change I've made is to absolutely position the div. The positioning causes NN4 to not work and declare a javascript error. I've tried every other script I can find and the result is always the same when the rollovers are contained in an absolutely positioned div. Any idea what I can do to make it or another script work?

<html>
<head>
<title>Image Swap Test</title>
<script language="JavaScript">
img1 = new Image();img1.src = "img.jpg";
function swapIt(img, src) {
document.images[img].src = src;
}
</script>
<style type="text/css">

</style>

</head>
<body bgcolor="#408080">
<a href="#" onmouseover="swapIt('img1', 'img.jpg')" onmouseout="swapIt('img1', 'offimg.jpg')">
<img id="img1" name="img1" src="offimg.jpg" border="0">
</a>
<br>
<br>
<a href="#" onmouseover="swapIt('bad1', 'img.jpg')" onmouseout="swapIt('bad1', 'offimg.jpg')">
<img id="bad1" name="bad1" src="offimg.jpg" border="0">
</a>
<br>
<br>
<div id="eddie">
<a href="#" onmouseover="swapIt('blah1', 'img.jpg')" onmouseout="swapIt('blah1', 'offimg.jpg')">
<img id="blah1" name="blah1" src="offimg.jpg" border="0">
</a>
</div>
</body>
</html>

gph

10:05 pm on May 13, 2002 (gmt 0)

Does anyone know how I can get this to work? Here is an example of the above, I hope it's ok to post examples:

[members.rogers.com...]

I'm thinking something like:

if (document.layers)...

else if (document.all)...

But I don't know enough about JavaScript to put it together. Or if it is even possible.

Thanks for your help.

gph

12:09 am on May 14, 2002 (gmt 0)

Don't worry about this problem. It's one of a few elements on the site that needs to be on every page. I've decided not to bloat it for the sake of a (hopefully) dieing browser.

Thanks anyways.

tedster

3:26 am on May 14, 2002 (gmt 0)

I'd like to give you some hope, if you ever do decide to tackle this one again. I'm building a new site right now that uses rollover images in an absolutely positioned div - and Netscape 4 IS dealing with it just fine.

I'm using the style of rollover that I mentioned in the start of this thread - that is, my onMouseover and onMouseout do not call a JS function declared from the head. They just reassign the .src for each image from within the anchor tag.

gph

3:44 am on May 14, 2002 (gmt 0)

As usual it's right in front of my face :)

Thanks Tedster, I thought I'd tried everything but obviously not.

gph

5:58 am on Jul 22, 2002 (gmt 0)

Here's an unusual method. DOM only, but interesting just the same.

It�s near the bottom of the page under �DOM image rollover�.

[fo3nix.pwp.blueyonder.co.uk...]

I think I'm in compliance with the URL rule, if not, sorry in advance.

rewboss

9:28 am on Jul 22, 2002 (gmt 0)

FWIW, here's my usual solution, which doesn't use the DOM (except for the images[] array). It automates the process of creating all the objects necessary and downloading all the images.

In an external .js file, I put something like this:


var btnList='home about products order contact'.split(' '), btn=new Array();


function Button(name){
 this.on=new Image();
 this.off=new Image();
 this.on.src='buttons/'+name+'-on.gif';
 this.off.src='buttons/'+name+'-off.gif';
}


for(var i=0; i<btnList.length; i++) btn[btnList[i]]=new Button(btnList[i]);


function rollOn(id){
 document[id].src=btn[id].on.src;
}
function rollOff(id){
 document[id].src=btn[id].off.src;
}

Why create an array of objects? Well, it preloads the images, that's why.

The HTML looks like this:


<a href="sales.html" onmouseover="rollOn('sales');" onmouseout="rollOff('sales');"><img src="buttons/sales-off.gif" width="xx" height="xx" alt="Sales" border="0" name="sales" /></a>

The JavaScript is easy to edit if I want to add or remove a button; I just have to change the first line. The HTML is trickier... unless I use a PHP include or something. Using an external .js file means that it is cached, so the site as a whole is a bit faster.