Forum Moderators: open
I want the most stripped down simplified script. I am trying to learn JavaScript and when I search on mouseover scripts I see such a wide array and I don't understand the mechanics of scripting enough to interpret which is best for my use.
I have 6 buttons that simply need to swap on mouseover.
Thanks
Notice the calls to newImg(), they pass a name. The image files are assumed to be that name concated with "_over.gif" and "_out.gif". The images are assumed to be in the folder "images". The calls to newImg() also pass an identifying number.
In the onmouseover and onmouseout events in the A tags, call "rollImg()". You must pass it two arguments - first, a 1 to indicate a "mouseover", or a 0 to indicate a "mouseout"; the second argument is the identifying number passed to newImg().
One more assumption... the "name" of each IMG tag must be "btnImg0", "btnImg1", etc. where the number corresponds to the identifying number passed to newImg().
Simple, but it works for me ;-)
<html>
<head>
<script type='text/javascript'>
var overImg = new Array(), outImg = new Array();
newImg('home', 0);
newImg('about', 1);
function newImg(name, idx) {
overImg[idx] = new Image();
overImg[idx].src = 'images/' + name + '_over.gif';
outImg[idx] = new Image();
outImg[idx].src = 'images/' + name + '_out.gif';
}
function rollImg(over, n) {
var i = document.images['btnImg' + n];
i.src = over ? overImg[n].src : outImg[n].src;
}
</script></head>
<body>
<a href='#' onmouseover="rollImg(1,0)" onmouseout="rollImg(0,0)">
<img name='btnImg0' border='0' src='images/home_out.gif'>
</a>
<a href='#' onmouseover="rollImg(1,1)" onmouseout="rollImg(0,1)">
<img name='btnImg1' border='0' src='images/about_out.gif'>
</a>
</body>
</html>
function over(img) {
img.src=img + "o.gif";
}
function out(img) {
img.src=img + ".gif";
}
You name your images as follows: reg.gif, rego.gif
one for regular, one for over.
Then, in the HTML:
<a href="page.htm" ><img src="smile.gif" onMouseover="over(this)" on Mouseout = "out(this)" name="smile"></a>
That's all there is to it. You name your image files with the "o" for over, then you name the image tag the name of the file as well.
<html>
<head>
<script type='text/javascript'>rollInit('home', 'links', 'about');
function rollInit() {
var i, n, dir = 'images/', ext = '.gif';
if (!window.rollArray) window.rollArray = new Array();
for (i=0; i<arguments.length; ++i) {
n = arguments[i];
rollArray[n+'r'] = new Image();
rollArray[n+'r'].src = dir + n + '_over' + ext;
rollArray[n+'t'] = new Image();
rollArray[n+'t'].src = dir + n + '_out' + ext;
}
}
function rollImg(over, name) {
document.images[name].src = rollArray[name + (over ? 'r':'t')].src;
}
</script>
</head>
<body>
<a href='#' onmouseover="rollImg(1,'home')" onmouseout="rollImg(0,'home')">
<img name='home' border='0' src='images/home_out.gif'>
</a>
<a href='#' onmouseover="rollImg(1,'links')" onmouseout="rollImg(0,'links')">
<img name='links' border='0' src='images/links_out.gif'>
</a>
<a href='#' onmouseover="rollImg(1,'about')" onmouseout="rollImg(0,'about')">
<img name='about' border='0' src='images/about_out.gif'>
</a>
</body>
</html>
1. The "onmouseover" inside the anchor tag IS a script. Turn off javascript and you will not get a new image on rollover.
2. You are not pre-loading the mouseover-state image into the cache - that takes a script in the HEAD. So that image only gets called from the server when the user mouses over the area. Perhaps not noticeable on a local network or broadband connection, but a definite time lag on a dial-up.
In fact, one of my pet peeves is rollovers that don't preload the images. The page feels really broken when you first use it.
However, I'm on your side - I also hate inflated mouseover scripts, which are usually generated by WYSIWYG editors.
<one of my pet peeves is rollovers that don't preload the images>
I usually preload the rollover image with an invisible <img src="dot2.gif" height=2 width=2 border=0> tag at the foot of the page. I thought this trick was beyond the scope of the original question, so didn't include it.
<Turn off javascript and you will not get a new image on rollover>
Does anybody?? The page still displays well without the script working.
Cheers - Rhys
Right on. If you can tolerate those little dots, or accommodate them into your look some how, that's one way to go. In fact, I'll bet you could create a special class for images in css that hides them in their pre-load spot.
Tedster: Turn off javascript and you will not get a new image on rollover.
Rhys: Does anybody?? The page still displays well without the script working.
That's true - an important fact about rollovers is that they can degrade very nicely. I was only making the point that this method DOES use some javascript, so that this was clear for all readers.
And sure, people do disable javascript for several reasons. Depends on the site's demographic, but it can be 10% or more.
I was able to develop my own OnMouseOver scripts to preload images and swap images. I used ideas from a variety of sources (including scripts from this thread). I dunno if it is the most stripped down version, but I understood the logic to make it work.
Below is the script I used in the Head:
<script type='text/javascript'>
if (document.images) {
img1on = new Image();
img1on.src = "images/Home_Button.gif";
img2on = new Image();
img2on.src = "images/Newsletter_Button.gif";
img3on = new Image();
img3on.src = "images/Mission_Button.gif";
img4on = new Image();
img4on.src = "images/Hunting_Button.gif";
img5on = new Image();
img5on.src = "images/Fishing_Button.gif";
img6on = new Image();
img6on.src = "images/Homestay_Button.gif";
img1off = new Image();
img1off.src = "images/Home_Button_onMouseOver.gif";
img2off = new Image();
img2off.src = "images/Newsletter_Button_onMouseOver.gif";
img3off = new Image();
img3off.src = "images/Mission_Button_onMouseOver.gif";
img4off = new Image();
img4off.src = "images/Hunting_Button_onMouseOver.gif";
img5off = new Image();
img5off.src = "images/Fishing_Button_onMouseOver.gif";
img6off = new Image();
img6off.src = "images/Homestay_Button_onMouseOver.gif";
}
function roll (x, y) {
if (document.images) {
img = new Image;
img.src = y;
document.images[x].src = img.src;
}
}
</script>
and in the body I used this for each link/imageswap:
ex:
<a href=
"index.html" onmouseover="roll (4, 'images/Home_Button_onMouseOver.gif')"
onmouseout="roll (4, 'images/Home_Button.gif')"><img src=
"images/Home_Button.gif" width="140" height="45" alt=
"Home_Button.gif (1K)" border="0" /></a>
