Skip navigation
Currently Being Moderated

Trouble with different browsers

Jul 18, 2012 8:50 AM

Tags: #adobe #dreamweaver #images #code #browser_compatibility #rollover_thumbnails

Hello everyone! I'm working on a website that has rollover thumbnails (when clicked - they lead to a video page). The rollover thumbs work fine in Safari, but not in Chrome. Examples:

 

Safari:

Safari.jpg

 

Chrome:

Chrome.jpg

 

As you can see, one of the thumbnails is working fine in Chrome, but another isn't. In actuality, I think that Eveo thumbnail (and perhaps one or two others) are the ONLY ones working in Chrome. All of the rollovers work in Safari. I tried opening the website in Firefox on another computer and all of the thumbnails just start acting funny there. Not sure what that's about. Here is the code for the two thumbnails in my examples:

 

Eveo Thumb:

<br><p align="center"><a href="brand-films/Eveo_ITP.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Eveo_ITP','','rollover thumbs/Eveo_ITP_roll.jpg',1)"><img src="rollover thumbs/Eveo_ITP.jpg" name="Eveo_ITP" id="Eveo_ITP" border="0" height="60" width="137"></a>

 

Citrix Thumb:

<p align="center"><a href="brand-films/Citrix-Bigfoot.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Bigfoot','','rollover thumbs/Bigfoot_roll.jpg',1)"><img src="rollover thumbs/Bigfoot.jpg" name="Bigfoot" id="Bigfoot" border="0" height="60" width="137"></a>

 

Obviously, I'd like the thumbnails to work in any browser possible. This is the only problem between browsers, the rest of the site works fine, so I'm not sure what's up. I'm a beginner, so I don't know much about codiing (go easy on me! haha). Any help or suggestions would be greatly appreciated! I'm using Dreamweaver 10

 

Thanks!

Hugo

 
Replies
  • Currently Being Moderated
    Jul 18, 2012 10:36 AM   in reply to hugomacmania

    Hi there, and welcome!

     

      Do you have a link to the website online or a .zip folder with your source files available for us to check out? It'll make it a little easier for us to troubleshoot this for you.

     

    Thanks!

    -Devon

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 18, 2012 2:28 PM   in reply to hugomacmania

    The only thumbnail that is showing up for me is the Eveo thumb. Have the others been removed?

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 8:01 AM   in reply to hugomacmania

    The browsers don't seem to be the problem here - the images are. I am not sure how you are saving these, or what you are doing to them once saved, but you are changing something. The thumbnails that work have the extension "jpeg" and the ones that don't work have the extension "jpg". If you are manually changing these extensions, this is where the problem lies.

     

    Example, the Axona_roll.jpg works only on safari (firefox says the image has a problem, and chrome doesn't display). If I try to open the image in Photoshop / Fireworks, it doesn't open due to a jpeg filetype error. However the Aldo_roll.jpeg appears on all browsers and I can open in all softwares.

     

    I would resave the images from the software you use and leave the extensions as they are - then modify the code on your page to cater for the new extension.

     

    Also, the folder you have them in contains a space - "rollover thumbs". I would recommend you change the space to a - or _. This can also cause issues with some servers.

     
    |
    Mark as:
  • Currently Being Moderated
    Jul 19, 2012 8:52 AM   in reply to hugomacmania

    It is a head scratcher! The filesizes seem kind of large for the type, size and design of the image. The red rollovers should be no more than a few kb's. Are you using Photoshop's 'save for web' function? The icon next to each graphic is also interesting. The Aldo_roll has the saved for web jpeg icon whereas the Axona_roll has a PS icon.

     

    If PS saves them out as .jpg, I would leave them as that. You could try archiving your current rollover images into an "OLD" folder and then resave them all from your template PSD - using save for web and making sure the extensions are still .jpg. That might also tidy up the icon difference in your DW window.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points