Rollover images
christopherorne (10 points) | Fri, 2007-11-23 09:15I have a basic site which i wanted to include rollover images, six squares of orange and blue that add a font to the square when the mouse is over the image. I made the site in Dreamweaver and the site works in Safari but not in any other browser! I have searched high and low to figure out why this is, but i can't find any one that has had this problem before...can anyone tell me what the problem is? I am 100% new to web design (when you see the site, you'll understand what i mean...it's really crap right now) but i thought the rollover images would be a snap! Can someone check my code and point out any blaring mistakes? the site is www.seymourproductions.com
And...is there a way for the font i wanted to use on the site (opticon) to be visibal on a computer that doesn't have the font already installed? Like force the font to be visible even if they don't have it in their computer's font list...can that be done?
Thanks in advance!
View Source on any web page and look at the top of the code. You need a DOCTYPE reference that your page doesn't have. That's why your code isn't showing up (or your buttons).
You can only force a font to show if you make it a rasterized image graphic (jpg, gif or png).
----
Powerpoint is not a design application
----
The Salon Design Tech
and i think i did have a DOCTYPE...at least when i opened the source on my home page...i see this at the top:
!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd"
Did you not see that? If you don't i think i have a whole new set of problems! I am going to look on my roommates computer to see if the problem is that i am viewing the source on the same computer that i created the website on.
Thanks for helping me out...i am very confused about this issue...your suggestions are greatly valued to me!
Yes, you can have fonts display on a website that a visitor doesn't have any their computer. Ivan originally posted about this a few years ago.
http://creativebits.org/Web_sites_with_custom_fonts
Here is a link exampling sIFR.
http://www.mikeindustries.com/sifr
so much...i am spending the rest of the weekend fixing my sad little website!
Do you have any insight to my rollover image debacle? Natobasso offered a suggestion, but I think i already have that in my code (the DOCTYPE that is)
Thanks for any future help you provide me!
How does sIFR affect page load times?
I'm concerned that it requires flash and javascript to run. Seems like you're giving up some usability/accessibility just to run custom fonts. Though I did read the text is still searchable by google, et al.
----
Powerpoint is not a design application
----
The Salon Design Tech
Fix these page errors.
I apologize for not seeing all your source code. I didn't view it correctly the first time.
You need to create a css file for your styles. Then you can use the validator to review those as well:
http://www.w3schools.com/site/site_validate.asp
----
Powerpoint is not a design application
----
The Salon Design Tech
but I still don't see my images in anything other than Safari.
I checked the code on the link you sent and that helped me at least put font where the images should be, so people can actually navigate beyond the home page, but what is wrong with my images on the home page? I know it might be a rollover issue, but is it really that difficult to get a rollover created in dreamweaver to be seen by browsers outside of Safari?
And again, thanks for your assistance in this matter...when i become independently wealthy, i will finally have time to learn all the ins and outs of HTML...until then, i have to rely on the kindness of strangers! Thanks!
Have you loaded all your images to the web or are they all still on your local machine? Make sure the directory is specific. Sometimes html and browsers like to see .../images/imagename.jpg rather than images/imagename.jpg.
Make 'roll over images' one word. Try not to make any of your url directories with spaces. It isn't standard practice.
Make your image links specific to ensure they are loaded. Either use the exact url or use .../images/image.jpg and .../rolloverimages/image.jpg with the ellipsis (three dots) so the browser knows where to find your images.
Make sure you SIZE your images in your HTML code for the rollovers. When you call them out they should have height and width determiners so the rollovers can be effectively rendered.
Usually sizes aren't completely necessary in newer browsers but in this case it's good to eliminate it as an issue.
You're getting closer -- I can see the text links on your page now, and when I go over them an image box appears (Firefox).
----
Powerpoint is not a design application
----
The Salon Design Tech
Thanks so much. That was basically it...i uploaded the images to the FTP separately from the html code (if that makes sense) the web site was looking for files on my hard drive and not in the root file on the FTP.
So it's official...I'm a dumb*ss! Thanks for trouble shooting with me. I hope one day I can return the favor.
i will be tackling the sIFR component this week...I'll let you know how it goes!
Again...thanks!
No worries, glad to help. Happens to me too, so it's not a hard mistake to make. :)
As for the sIFR, I'm not sure it's worth your time unless you absolutely have to have a certain font. It's going to slow your page load times, I feel.
----
Powerpoint is not a design application
----
The Salon Design Tech
sIRF will have little affect on load times. The following is straight from my original link.
Bandwidth
The sIFR javascript file is less than 10k and only loads once. Thereafter, it is pulled from the browser cache. The same applies to the sIFR Flash movies which contain your fonts. If you have five headlines on a page which all use the same custom font, the .swf is pulled once from the server and from the browser cache thereafter. sIFR Flash movies are generally between 8k and 20k depending on the complexity of the font.
Ok. If you have 5 of those sIRFs at 10k each, that's 50k per page. In order to get really fast load times, why not just use gifs or jpgs which could be saved smaller than that? Optimally you want a web page to be 300K or less. Why bloat it needlessly?
C_NRG, do you have a link to share where this is in use? I'm very curious about it.
----
Powerpoint is not a design application
----
The Salon Design Tech
I understand the concern over file size but I believe much of sIFR loads once and as long as the font stays the same it's cached.
A sample page was referenced in Ivan's post.
Here she is:
http://www.mikeindustries.com/blog/files/sifr/2.0/
Click the 'remove sIRF headlines' in the left sidebar to see the difference.
And an added benefit is that the text stays searchable by Google, opposed to using '.gif and .jpg images'.
Pick your poison.
Thanks for the link, I'll check it out. Adblockers can potentially block the sIFR text since it's flash, but it doesn't seem like the average user has caught on to AdBlocking yet (I'm using my parents as a reference here!).
Actually, graphics are searchable as long as you use the alt tag.
----
Powerpoint is not a design application
----
The Salon Design Tech
They claim the following...
Flash/ad blockers
We’ve worked with the developers of the Firefox FlashBlock extension to make sure sIFR text is automatically degraded to (X)HTML for users of recent versions of FlashBlock. When users install FlashBlock, they are demonstrating a bias against Flash (most likely because of the incredible amount of obnoxious and invasive advertising on the web these days) and we want to respect this bias. If users don’t want to see Flash, we don’t want to show it to them. sIFR runs fine under other extensions like AdBlock, but users can always disable the loading of sifr.js if they’d like.
Wow, it even has Drupal support/integration. Pretty cool:
http://drupal.org/project/sifr
----
Powerpoint is not a design application
----
The Salon Design Tech
Good to know i'm not the only one making that error.
As for the sIFR, I will try it out and see how much it affects the load time. I only have a few lines of font on the whole site....so hopefully that helps. it there is a bunch of text that i add, i will probably just use it for the titles of pages and use a normal font for the body.
but I'll let you know.
Thanks again...and again...and again...etc!