SitePoint Sponsor

User Tag List

Results 1 to 17 of 17

Hybrid View

  1. #1
    Non-Member spdrcr's Avatar
    Join Date
    Sep 2000
    Location
    Oklahoma City, OK
    Posts
    214
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Alright,
    I asked this question bout a month and a half ago, and I got the answer to my question. Well, I have since lost all the stuff that I had saved on this subject even the site where it explained how to do it. If anyone can help me out with this I would appreciate it.

    It basically deals with having links or what not, where when you mouseover them they will change the image on the screen. Guess I chose the wrong title for my thread. Anyways, that's what it's about. Again, if anyone can help, THANK YOU

    speedracer

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


    try this script for rollovers

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

    if (document.images) {
    image1on = new Image();
    image1on.src = "images/about_us_on.gif";
    image1off = new Image();
    image1off.src = "images/about_us_off.gif";
    }

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

    // -->
    </script>

    and you call it like this:

    <a href="about_us.shtml" onmouseover="changeImages('image1', 'image1on')" onmouseout="changeImages('image1', 'image1off')">
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  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)
    I am having a little problem with the document[...] part. Also, I am a little unclear on the image1on = new Image() part. Could you explain?

    speedracer

  4. #4
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    spdrcr...the document.images part is basically a test to see if the browser understands enough Javascript to allow the rollovers. Only 3.0 (or maybe 2.0) browsers and above can understand the .images node for Javascript.

    as for the image1on = new Image() , that portion of the script "preloads" the images for you, that way when you rollover them, they appear instantly.

    Does that help?
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  5. #5
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Where exactly do you place the script in your page or does it not matter and the call part does it use the name of the page being linked to. If you had say 4 links in a navigation bar would you repeat the
    image1on = new Image();
    image1on.src = "images/about_us_on.gif";
    image1off = new Image();
    image1off.src = "images/about_us_off.gif";

    changing 1 to 2,3 &4 and naming new images?

  6. #6
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Sorry...I should have given you guys two sets of preloaded images so you could see what the differences are...

    here is the full script with two sets of images.

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

    if (document.images) {
    image1on = new Image();
    image1on.src = "images/about_us_on.gif";
    image1off = new Image();
    image1off.src = "images/about_us_off.gif";

    station_staff_on = new Image();
    station_staff_on.src = "images/station_staff_on.gif";
    station_staff_off = new Image();
    station_staff_off.src = "images/station_staff_off.gif";

    }

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

    // -->
    </script>

    and you call it like this:

    <a href="about_us.shtml" onmouseover="changeImages('image1', 'image1on')" onmouseout="changeImages('image1', 'image1off')">
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  7. #7
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Creole is that script from one of your portfolio design web sites. Is there a place where it could be seen in action?

  8. #8
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    yes...it is from http://www.kbxl-kspd.com. It's a site I did for my friends company. It is really low budget, but I am extremely proud of it.

    you can snag the code if you like.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  9. #9
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Creole

    Don't need the code just trying to see how it works and how the best way to set up the images.

    I have Dreamweaver and it does the code for rollovers for you. I was doing basically what you did creating a gif with the same background colour as the table but turning it into a button on mouseover.

    You do great work looked at some of the web sites in your portfolio quite impressive.

  10. #10
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Just looked at your script vs Dreamweavers and yours looks so much neater.

    <script language="JavaScript">
    <!--
    function MM_swapImgRestore() { //v3.0
    var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;
    }

    function MM_preloadImages() { //v3.0
    var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
    var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
    if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
    }

    function MM_findObj(n, d) { //v3.0
    var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
    d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
    if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
    for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
    }

    function MM_swapImage() { //v3.0
    var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
    if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}
    }
    //-->
    </script>

    onLoad="MM_preloadImages('florals2.gif')">

    Does dreamweaver script do anything different? Why is it so bloated? It does seem to work and I guess for someone like me that couldn't write it, it gets the job done. I might just take you up on using yours.

  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)
    hehe...the funny thing is I was just going to tell you not to use the DW code BECAUSE mine is so much neater.

    You are more than welcome to use that cluttered cryptic DW code if you like...or you can use my code that is nice and clean and can almost be read like a book.

    BTW, I can't take credit for that code, I found it on a free site.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  12. #12
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Originally posted by creole
    hehe...the funny thing is I was just going to tell you not to use the DW code BECAUSE mine is so much neater.

    You are more than welcome to use that cluttered cryptic DW code if you like...or you can use my code that is nice and clean and can almost be read like a book.

    BTW, I can't take credit for that code, I found it on a free site.
    I have a question about the navigation bar area on http://www.kbxl-kspd.com./index.shtml. If my nav area was on the left side and in a table how do I make sure the left edge colour of the table starts at the very left edge of the screen as at the kbxl site?

    You can see what I mean at my test page http://www.artbyjudy.com/test/
    <Edited by gthorley on 12-07-2000 at 12:43 AM>

  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)
    you would need to make sure your margins were set properly. I will post it here, but view the BODY tag for the page and you will see what I am talking about.

    THis is what you need.

    <body bgcolor="#f2eede" rightmargin="0" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" alink="cc0000" vlink="000000" link="000000">

    that will ensure that anything on your page butts up against the very edge of the browser.

    One thing to point out. Since EVERYTHING will butt up against the edge, you need to take that into account when you design your tables making sure that your text DOES NOT ride the edge.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  14. #14
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Creole fo speedy reply

    I put in that code and it still leaves an edge I suspect it has something to do with my nested tables.

    I put it in a test folder at our site
    http://www.artbyjudy.com/test/
    I still have to clean up the rollover code but will do that later when I get all of the graphics made.

    This is still much a work in progress and am not real satisfied. I am trying to keep graphics to a minimum so pages load quicker as when the art is on they take time to
    load.

  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)
    gthorley...

    I think I found out why your page still has space around the edges.

    in your first table tag you start with this:

    <table BORDER=0 WIDTH="100%" HEIGHT="100%" >

    when it should be this:

    <table BORDER=0 WIDTH="100%" HEIGHT="100%" cellspacing="0" cellpadding="0">

    The reason why is that if you do not specifically tell the table to have 0 cellpadding and cellspacing then the default it 1. That one pixel (two actually 1+1) will push your table away from the edge of the page. Try that and let me know if it works.
    Adobe Certified Coldfusion MX 7 Developer
    Adobe Certified Advanced Coldfusion MX Developer
    My Blog (new) | My Family | My Freelance | My Recipes

  16. #16
    SitePoint Addict gthorley's Avatar
    Join Date
    Oct 2000
    Location
    Canada
    Posts
    392
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It didn't work with just the top one so I changed the others that followed and then it was fine had to go through after and change my other nested tables to 90% nad center them as the text was lined up on the edger like you cautioned.

    Was that the best way to fix the text problem ie:adjusting the table so it wasn't at the edge of the parent table?

  17. #17
    SitePoint Wizard creole's Avatar
    Join Date
    Oct 2000
    Location
    Nashvegas Baby!
    Posts
    7,845
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would set the table to what I told you above and then nest a table inside that one. That is how I did the kbxl site
    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
  •