Sliced and Non Sliced Mouseovers ~ Easy Way

When I’m really tired and want to just generate rollovers really quick without worrying about css layouts, this is what I use. Now days, I use mostly css rollovers unless they are complex rollovers that require very different positioning and so forth, in which I trap this in a table.

NOTE THAT THIS METHOD works only if the off image is the same SIZE and position as the rollover on image. It uses javascript and this javascript basically replaces the old image with another image in the same position. I don’t exactly remember where I got the original code, so if you know where it came from, I would love to credit. Anyways…

First, open notepad (or whatever program you use) and paste the following code in:

function initRollovers() { if (!document.getElementById) return

var aPreLoad = new Array(); var sTempSrc; var aImages = document.getElementsByTagName(‘img’);

for (var i = 0; i < aImages.length; i++) { if (aImages[i].className == ‘lap’) { var src = aImages[i].getAttribute(‘src’); var ftype = src.substring(src.lastIndexOf(’.’), src.length); var hsrc = src.replace(ftype, ‘_on’+ftype);

aImages[i].setAttribute(‘hsrc’, hsrc);

aPreLoad[i] = new Image(); aPreLoad[i].src = hsrc;

aImages[i].onmouseover = function() { sTempSrc = this.getAttribute(‘src’); this.setAttribute(‘src’, this.getAttribute(‘hsrc’)); }

aImages[i].onmouseout = function() { if (!sTempSrc) sTempSrc = this.getAttribute(‘src’).replace(’_on’+ftype, ftype); this.setAttribute(‘src’, sTempSrc); } } }
}

window.onload = initRollovers;

Paste it in, and save this file as “rollover.js”. Basically, you save your off image as whatever you want it, and then the hover you want as the same image name plus _on. So, if you have your off image as “home.jpg” you save the overlap image as “home_on.jpg”. To make this go into effect, you then take the img value of “home.jpg” and apply a class to it by the name of “lap”. So it would be

<img src="home.jpg" class="lap" />

Between the <head></head> in your web page, you call for the javascript, as shown:

<script language="javascript" src="rollover.js" type="text/javascript" /></script>

Yap. That’s it. Lol. I told you it was easy. Now I can just go over examples.

Example of using sliced Mouseovers with this
In terms of sliced mouseovers, I had already gone over this tutorial in the hard way, but this might be less confusing. Basically, you slice the image in phtoshop or by yourself. (for details on this refer to the other article)

For an example I will use the slice tool in photoshop, because I’m too lazy to slice this myself.

First select the slice tool:

Now slice your image around the links you want it to be. Click “File >> Save for Web & Devices >> Save (with images and html files)”. I’ll save my file with the extension “gon”

Now, keeping the slices EXACTLY how they are, do whatever you want for the hovers to be on that layout. Save for web again, and this time put the extension as “gon2”. Here is my layout with the hovers:

After this, go through the files and delete all the “gon2” files that aren’t links themselves. Then, rename all the link ones from things like “gon2_17.jpg” to “gon_17_on.jpg”. Do that for all the links. Then apply to the links the class as so:

<img src="images/gon_17.jpg" class="lap" />

And voila. The image hovers will work.

The Div Way
Sadly with divs, this is not a way to do it with css only. However, you can just trap the images in a div, and then put the images with the class. Put a float, and then have the images together with the classes within it, and it will work. Like so:

<div id="links"><img src="gon_17.jpg" class="lap" /><img src="gon_18.jpg" class="lap" /></div>

with the css as so:
#links {width: 200px; float: left; height: 50px;}

You can also use this code in accordance with image scrollbars since it has a class on it. I use it with the old and hard javascript method when I want hover to be in a different place as the old one.

eXTReMe Tracker