SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Newcastle Upon Tyne
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Fonts I can use?

    I've used the Antique Olive font on my new website, but when I had a look at it on my mates computer, the font was different. Do most computers have this font? Is there anyway of me loading the font before the page loads if they don't?

    Graeme
    Reebox.co.uk

  2. #2
    SitePoint Wizard Aes's Avatar
    Join Date
    Jun 2001
    Location
    Oklahoma
    Posts
    3,392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    "Antique Olive" is not widely distributed on most computers, unfortunately for you. Really, you can do nothing short of asking the viewers to optionally download the font and install it on their system. I would recommend finding a couple of fonts that are widely distributed that look decent on your web site, and use those as your back up fonts. Arial and Georgia are both wonderful "screen fonts," that is to say fonts that are easy to read on computer screens; I would recommend listing those after your "Antique Olive" font declaration so if a user who doesn't have the said font on his/her system visits your site, the browser will double back to the back ups. Just an idea.

    -Colin
    Colin Anderson
    Ambition is a poor excuse for those without
    sense enough to be lazy.

  3. #3
    Non-Member spdrcr's Avatar
    Join Date
    Sep 2000
    Location
    Oklahoma City, OK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When making a site always stick with fonts like Verdana, Tahoma, Helvetica, Arial, Times New Roman, etc.

    If you want to use a font that you think looks good for your site, use it in an image. That's the best way to go.

  4. #4
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Newcastle Upon Tyne
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for that, I didn't realise that you could set backup fonts. Thats really useful.

    One other little point while I'm here! When you click on my buttons on the left, a little line of a square showing where the target area is shows up. Is there anyway to stop this?

    Thanks again

    Graeme
    Reebox.co.uk

  5. #5
    Non-Member spdrcr's Avatar
    Join Date
    Sep 2000
    Location
    Oklahoma City, OK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hmmm...

    Sounds like an image isn't showing up if you're seeing a little box. You might double check and make sure all your images are loaded.

  6. #6
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Newcastle Upon Tyne
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    No, everything is loading up okay. Visit the site and try clicking one of the buttons and you'll see what I mean. I probably haven't explained myself very well!

    Graeme
    Reebox.co.uk

  7. #7
    SitePoint Wizard Bill Posters's Avatar
    Join Date
    Dec 2001
    Location
    UK
    Posts
    1,523
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That is called the 'focus border' and it's Microsoft's unilateral little helper.

    I hate it too coz it makes a mess of most designs.

    I will gladly point you in the right direction to get rid of it.

    Check this thread.

    Read all of it, not only because some of the posts are amusingly angry, but also because there are several versions of scripts to get rid of it mentioned.

    Last edited by Bill Posters; Feb 18, 2002 at 18:18.
    New Plastic Arts: Visual Communication | DesignateOnline

    Mate went to NY and all he got me was this lousy signature

  8. #8
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Newcastle Upon Tyne
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Whoah, people really get a bee in their bonnet about this, don't they?

    Well....

    I'm having trouble putting the body section in. Because it already has an onLoad command to load the images, wherever I try to place it, Dreamweaver doesn't like it.

    Chuffed I can get rid of it though! (somehow!)

  9. #9
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Boxwell...

    It sounds like you're using Dreamweavers default "load images" script. I would recommend against using that one, or one that depends on the onLoad event in the BODY tag. I've found that it's not quite as reliable as other methods, plus it really makes your code messy. It's best to keep all of the bits together if you can. Take a look at this preload images script that I use on all my sites:

    <script language="javascript">
    <!--

    if (document.images) {
    &nbsp;&nbsp;&nbsp;downloads = new Image();
    &nbsp;&nbsp;&nbsp;downloads.src = "images/downloads.gif";

    &nbsp;&nbsp;&nbsp;chewedup = new Image();
    &nbsp;&nbsp;&nbsp;chewedup.src = "images/chewedup.gif";
    }
    // -->
    </script>

    It goes in the HEAD tag. You simply add a new section for each image. The DW script never seems to preload the images properly. If you're combining this with a mouseover script let me know as the mouseover script I have is only 6 lines whereas the DW mouseover script is around 30 lines. Smaller scripts mean less processing time, which means faster rollovers.

    I'll say one thing about the focus border (Bill, are you shaking your head at me? ). I dislike sites that remove this. It's a visual aid to the user. When you start removing visual aids, your site starts becoming harder to use. I personally tab between links LOTS of the time and without that focus border, I would have no indication what my current selection was.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  10. #10
    SitePoint Enthusiast
    Join Date
    Jun 2001
    Location
    nc, for now.
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    hey creole, I'd love it if you could post your rollover script--I'm using the default dreamweaver one, and I hate that it looks so messy, but whenever I try one from a free javascript site, it never works. Or it doesn't work in Netscape for some reason. And javascript stuff just confruzzles me.

    Regarding the dotted lines, I find them helpful. If I'm using a laptop or something, I often tab between links just because I'm not completely comfortable with the touchpad thingie. Also, if you go to a page and hit the back button, it's nice to see which link you were on, so you don't lose your place.

    Still, I think it's an individual's choice, and I don't think it makes that big of a deal. I wouldn't stop going to a site that used it or anything.

  11. #11
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    <script language="javascript">
    <!--

    if (document.images) {
    &nbsp;&nbsp;&nbsp;pictures_on = new Image();
    &nbsp;&nbsp;&nbsp;pictures_on.src = "images/pictures_on.gif";
    &nbsp;&nbsp;&nbsp;pictures_off = new Image();
    &nbsp;&nbsp;&nbsp;pictures_off.src = "images/pictures_off.gif";

    }

    function changeImages() {
    &nbsp;&nbsp;&nbsp;if (document.images) {
    &nbsp;&nbsp;&nbsp;for (var i=0; i<changeImages.arguments.length; i+=2) {
    &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;document[changeImages.arguments[i]].src = eval(changeImages.arguments[i+1] + ".src");
    &nbsp;&nbsp;&nbsp;}
    &nbsp;&nbsp;&nbsp;}
    }

    // -->
    </script>

    Call it like so:
    <a href="page.html" onmouseover="changeImages('pictures', 'pictures_on')" onmouseout="changeImages('pictures', 'pictures_off')"><img src="images/pictures_off.gif" width="93" height="19" border="0" name="pictures" alt="all about ME!"></a>

    I'm also adding the full preload scripting. I removed part of it in case Boxwell didn't want the rollovers.

    You can see all of it in action here:
    www.nachodog.com (my dog)
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  12. #12
    SitePoint Enthusiast
    Join Date
    Jun 2001
    Location
    nc, for now.
    Posts
    76
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    wow, thanks!

    and nice site for your doggie.

  13. #13
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's my pleasure. Most rollover scripts really suck. I was lucky to find one so stripped down and simple. So I use it all the time and I "share the love".

    Thanks for the comments on the site. I like your ite too. The "third person references" are pretty funny. Congratulations on your anniversary.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  14. #14
    SitePoint Enthusiast
    Join Date
    Feb 2002
    Location
    Newcastle Upon Tyne
    Posts
    53
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I like the idea of a shorter script Creole, but I am new to this and you'll need to help me clarify a couple of things.



    "images/pictures_on.gif";
    In that section is the images a subdirectory and pictures_on.gif the name of my button in the on state?

    and in this section:
    <a href="page.html" onmouseover="changeImages('pictures', 'pictures_on')" onmouseout="changeImages('pictures', 'pictures_off')"><img src="images/pictures_off.gif" width="93" height="19" border="0" name="pictures" alt="all about ME!"></a>
    Let's say one of my buttons is called 'home.jpg' and the down state is 'homedown.jpg' where do I substite these names?

  15. #15
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by Boxwell
    I like the idea of a shorter script Creole, but I am new to this and you'll need to help me clarify a couple of things. In that section is the images a subdirectory and pictures_on.gif the name of my button in the on state?
    Images is a directory, yes.
    Pictures_on is the name of a particular image, yes.

    It's good to choose a naming convention and stick with it. I personally use _off and _on in all of my sites to indicate which rollover state a particular image is.
    <a href="page.html" onmouseover="changeImages('pictures', 'pictures_on')" onmouseout="changeImages('pictures', 'pictures_off')"><img src="images/pictures_off.gif" width="93" height="19" border="0" name="pictures" alt="all about ME!"></a>
    Let's say one of my buttons is called 'home.jpg' and the down state is 'homedown.jpg' where do I substite these names? [/B][/QUOTE]

    If the default image (the "down" or "off" state) is home.jpg, that goes in the IMG tag's SRC attribute like so:
    <img src="images/home.jpg" width="93" height="19" border="0" name="home" alt="all about ME!">

    To specify the "on" or "over" state, you simply refer to the javascript name for the img and it's SRC (referencing the preload script above makes it easier) like so:
    <a href="page.html" onmouseover="changeImages('home','home_on')" onmouseout="changeImages('home','home_off')">

    Let me give you a really quick lesson in javascript. There are several different ways to refer to an object using javascript. The simplest is to call it by name. If you notice, the IMG tag above has the name "home". So, we can refer to it's by it's name from then on. We can change it SRC attribute by referencing the SRC of home like so:
    home.src

    That tells javascript that whatever action you want to perform will be done to, or using, home.src. Do you follow? If you look at this line above, then the entire script, you'll see references to "picture.src" and "picture_on.src". Once you see how everything fits together, it should be easy for you.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes


Bookmarks

Posting Permissions

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