Help with Image Rollover

[txfamilyof7]

Hi everyone!

I'm truly hoping y'all can help me. I have a site I'm developing, and the owner wants all the images to have rollovers. They all work EXCEPT the latest, which are small social icons. You can view the site at archwaysandceilings DOT com.

The images in the left sidebar all use a script that looks like this:

[CODE]btnTwitteron = new Image();

btnTwitteron.src = "images/bt_twitter_f2.gif";

btnTwitteroff = new Image();

btnTwitteroff.src = "images/bt_twitter.gif";[CODE]

The image then uses this code:

<a href="https://twitter.com/Archking57" target="_blank" onmouseover="turnOn('btnTwitter')" onmouseout="turnOff('btnTwitter')" ><img src="images/bt_twitter.png" name="btnTwitter" alt="Archways &amp; Ceilings on Twitter" />

This is the code used to do all of the images in the left sidebar, and all of them work!

Alternatively, on the images in the right side, I used this:

<a href="ceilings-made-easy.php" onmouseover='Ceilings.src="images/Ceilings-Product-Line-Mouse-Over.jpg"' onmouseout='Ceilings.src="images/Ceilings-Product-Line-Base.jpg"'><img src="images/Ceilings-Product-Line-Base.jpg" name="Ceilings" alt="ceiling systems" /></a>

This code works on those images, yet when I tried it on the social images, that won't work either.

I've tried both forms of code, I've changed the file type of the images (they started out as .png, I tried .jpg & .gif) and nothing is working.

SOMEONE PLEASE HELP ME!!!! I'm at the end of my rope! I've spent hours going over every letter, checking the syntax and I can't come up with anything that is stopping it from working.

TIA!!!

[burnme]

I took a look at the site address you gave and maybe I am just blind but I see social icons on the left, and then some on the bottom. Neither did anything on rollover, so can't tell exactly what is going on. I don't see anything really wrong with the code either, the only thing I would do is change the property info like this, and see if that does it, otherwise maybe you can pin point it for me so I can get a better idea of whats happening:

<a href="ceilings-made-easy.php" onmouseover="Ceilings.src='images/Ceilings-Product-Line-Mouse-Over.jpg'" onmouseout="Ceilings.src='images/Ceilings-Product-Line-Base.jpg'"><img src="images/Ceilings-Product-Line-Base.jpg" name="Ceilings" alt="ceiling systems" /></a>

All I did was swap the ' for " at the start, and use ' on the in. Not sure if that will help you, but hey, give it a shot right. I like to use double quote for the main property, and single on the in, that way I have a reference. Sorry if that doesn't do it, but I'm a little stumped like you are.

[txfamilyof7]

Thanks for your response. I'm completely stumped. It's supposed to do a rollover, and I've tried switching the ' and " but I copied the code that IS working (on the other images on the page) and I cannot for the life of me figure out why these images won't work...did you look at the page source code? You can see the other images work just fine, and have the exact same code! I'm pulling my hair out! LOL

[donatello]

Use CSS Sprites. Much easier and you don't need Javascript.

Here is a cool one I did.
http://jsfiddle.net/hxzRq/1/

The JavaScript on that one is for the 'tooltip area' that lights up with information below the buttons. The Buttons themselves are purely CSS and do not need an image preloaded.

You can also try using 'sliding-door' sprites.
I'm building a generator for them, but it is not done yet... there is a concept running here:
Sprites Generator
But it is not ready for showtime as you cannot download the full script... you can however, sneak a peek at how it works once you generate a sprite you like!

Here is a simpler one I did as well:
http://jsfiddle.net/2WbMB/3/
This one will show you the idea of how it works without adding the complication of a javascript tooltip as above!

Good luck!
(Get rid of rollovers, they are so 1999!)

[txfamilyof7]

Thanks, I am going to try the CSS route. I'll let you know how it goes.

I just don't understand why the original code that is working everywhere else on the page, isn't working here. The ONLY thing I can come up with is that the images are so small. But that just sounds ridiculous. LOL