homepage Welcome to WebmasterWorld Guest from 54.166.228.100
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member

Visit PubCon.com
Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
Forum Library, Charter, Moderator: open

JavaScript and AJAX Forum

    
Bare-bones rollover
keeping javascript fit and trim
tedster




msg:1486643
 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

<a href="url.html" onMouseOver="spot.src=over.src" onMouseOut="spot.src='image1.gif'"><img src="image1.gif" name="spot" width="ww" height="hh"></a>

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




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

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

<body onload="dynAnimation()" language="Javascript1.2">
<a onmouseover="document['fpAnimswapImgFP1'].imgRolln=document['fpAnimswapImgFP1'].src;document ['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].lowsrc;" onmouseout="document ['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="javascript:void(0)"><img border="0" src="x.gif" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="x1.gif"></a>

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




msg:1486645
 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"
}

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

tedster




msg:1486646
 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




msg:1486647
 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




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

I did this rollover functions
to work with multiple images.

<script language="JavaScript">
<!---
function MouseOver(name1,name2,img1,img2) {
eval("document." + name1 + ".src = '" + img1 + "'");
eval("document." + name2 + ".src = '" + img2 + "'");
}
function MouseOut(name1,name2,img1,img2) {
eval("document." + name1 + ".src = '" + img1 + "'");
eval("document." + name2 + ".src = '" + img2 + "'");
}
//--->
</script>

And this is what you do with the anchor element

<table width="400" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<a href="#" onMouseover="MouseOver('imgname1','imgname2','images/new_img1.jpg','images/new_img2.jpg'); return false;" onMouseout="MouseOut('imgname1','imgname2','images/original_img1.jpg','images/original_img2.jpg'); return false;">
<img name="imgname1" src="images/original_img1.jpg" border="0" width="225" height="295">
</a>
</td>
<td>
<a href="#" onMouseover="MouseOver('imgname2','imgname1','images/new_img3.jpg','images/new_img4.jpg'); return false;" onMouseout="MouseOut('imgname2','imgname1','images/original_img2.jpg','images/original_img1.jpg'); return false;">
<img name="imgname2" src="images/original_img2.jpg" border="0" width="225" height="295">
</a>
</td>
</tr>
</table>

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




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

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

<A HREF="url.htm" ONMouseOver="document.ITEM.src='image_on.gif'" onMouseOut="document.ITEM.src='image_off.gif'"><IMG SRC="image_off.gif" WIDTH=WW HEIGHT=HH BORDER=0 NAME="ITEM"></A>

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




msg:1486650
 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)

<map name="FPMap1">
<area href="" onMouseOver="document.ITEM.src='images/imageNr1.jpg'" onMouseOut="document.ITEM.src='images/imageNr0.gif'"
shape="rect" coords="0, 0, 91, 69" alt="link alt-text 1">
<area href="" onMouseOver="document.ITEM.src='images/imageNr2.jpg'" onMouseOut="document.ITEM.src='images/imageNr0.gif'"
shape="rect" coords="135, 0, 209, 71" alt="link alt-text 2">
</map>

<IMG SRC="images/imageNr0.gif" WIDTH="210" HEIGHT="222" BORDER=0 NAME="ITEM" usemap="#FPMap1">

gph




msg:1486651
 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




msg:1486652
 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




msg:1486653
 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">
<!--
#eddie {
position: absolute; top: 200px; left: 200px;
}
-->
</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




msg:1486654
 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




msg:1486655
 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




msg:1486656
 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




msg:1486657
 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




msg:1486658
 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




msg:1486659
 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.

Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / JavaScript and AJAX
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved