www.webdeveloper.com
Results 1 to 5 of 5

Thread: Help with Image Rollover

  1. #1
    Join Date
    Jul 2012
    Posts
    14

    Question Help with Image Rollover

    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:

    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:

    Code:
    <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!!!

  2. #2
    Join Date
    Jun 2012
    Location
    Dark Side of the Moon
    Posts
    70
    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:

    Code:
    <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.
    I love how people get an attitude when THEY asked for help.

  3. #3
    Join Date
    Jul 2012
    Posts
    14
    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

  4. #4
    Join Date
    Jun 2008
    Location
    Europe
    Posts
    1,096
    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!)
    Last edited by donatello; 07-31-2012 at 01:58 AM. Reason: Updated Fiddle...

  5. #5
    Join Date
    Jul 2012
    Posts
    14

    Talking Thanks!

    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

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles