Help with Image Rollover
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:
This is the code used to do all of the images in the left sidebar, and all of them work!
<a href="https://twitter.com/Archking57" target="_blank" onmouseover="turnOn('btnTwitter')" onmouseout="turnOff('btnTwitter')" ><img src="images/bt_twitter.png" name="btnTwitter" alt="Archways & Ceilings on Twitter" />
Alternatively, on the images in the right side, I used this:
This code works on those images, yet when I tried it on the social images, that won't work either.
<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>
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.
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:
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.
<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>
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
Here is a cool one I did.
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:
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:
(Get rid of rollovers, they are so 1999!)
Last edited by donatello; 07-31-2012 at 01:58 AM.
Reason: Updated Fiddle...
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
Users Browsing this Thread
There are currently 1 users browsing this thread. (0 members and 1 guests)