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:
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:
<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>
<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
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.
Hi Devon! Thanks for replying. The website's URL is www.hotbed.com The page with all of the thumbs can be found here: http://www.hotbed.com/production-company/work.html
Let me know if this helps!
Are you using Chrome to view the website? If so - that's my problem. All of the thumbs work if you open the site in Safari but are broken in Chrome. That's what I'm trying to fix All of the thumbs work if I preview the site in Dreamweaver as well...so I don't know if there's something weird with Chrome or if it's my code. I listed the code for two of the thumbs (the Eveo one the one above it) in my first post...they aren't any different (unless I'm missing a small detail somewhere). I've tried resyncing my local and remote sites (but especially the folder I'm keeping all of the thumb images in) with no success.
As I mentioned, the thumbnails are the only things acting funny between browsers...everything else seems to be working as it should between Safari and Chrome (I have not tested the site on Firefox). Not sure what's up.
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.
I went ahead and changed the "rollover thumbs" folder to "rollover_thumbs" and synced but that didn't fix it (darn it). I noticed what you said about the extensions though. I'm making all of these thumbnails in Photoshop CS6. I set it to JPEG and they save with the extension .jpg I find it interesting that you find the "Aldo_roll" as a .jpeg when I have it saved as a .jpg (however, if I right-click and save the image to my desktop, it comes with the .jpeg extension as well - this works even with the broken images in Chrome, I can right click and save the red rollover images to my desktop).
If I'm making all of these in photoshop, and it automatically wants to make the extension as .jpg, should I manually change it to .jpeg for each "roll" image? I find it odd that the .jpg extension would work for the images (when not rolled over) and not for the "roll" images. Could you explain to me why that might be? If I do have to change all of the rollover images from .jpg to .jpeg, would I have to re-save them all from photoshop like that or would it be okay to just edit the extension in the finder?
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.
I actually have NOT been using the "save for web" option! Perhaps that is my problem?? I will try doing that for these images, acrchiving and resaving like you suggest. I'll let you know if it works (it may be a while before I can test out the theory because of other work I'm currently doing). I appreciate your suggestions! Let me know if you have any others!