Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 8 of 8
  1. #1
    Junior Member
    Join Date
    Oct 2008
    Posts
    24
    Member #
    17560
    Hi...I have two questions that would really help...

    First off let me explain to you what I am trying to do. I currently have a site: www.pokertablesplus.net and it needs some serious updating. I cannot afford to pay a professional to re-do it for me so I am doing my best to make it look as professional as possible.

    I just made a layout in paint shop pro and sliced it. I made every different part of the layout distinct colors that I can easily change just to make it easier to get started. My new layout is at: www.test.pokertablesplus.net

    My first question regards the navigation panel on the left. I made images and put them on the baby blue area and I want these to be my links. I put them in with no text just to test how they would fit and they look great but I cannot seem to get them to the top. I tried using the img src=".jpg" align=TOP and this didnt do anything for me. I was wondering if someone could look at the source of my page and tell me how I can get these images (which are "link_template.jpg" on the source) to the top of the baby blue area.

    Now for my second question....As you can see I want some nice looking links. I am shooting to have links similar to www.bigslikpokertables.com - I love the colors and I love how on mouseover it does not change the link color entirely it just adds a transparent red over the link. This is very professional and I was quoted for $12,000-$15,000 to have a web site done by the company that did that site (CRAZY)!!!! Basically I just wanted to know how to get the same type of transparent cover over the link on mouseover without changing the entire image background color.

    If you could e-mail me with any responses to david@pokertablesplus.net it would be appreciated but you can just reply to this and I will check it later.

    NOTE: the colors of the site are not going to remain how they are I just made them distinct colors to get started...if I can get the links working how I want, which is what I want to work on ifrst, the site should look great and very professional with a nice banner and nice links and nice images.

    Thank you for any help it is greatly appreciated.

  2.  

  3. #2
    WDF Staff mlseim's Avatar
    Join Date
    Apr 2004
    Location
    Cottage Grove, Minnesota
    Posts
    7,717
    Member #
    5580
    Liked
    718 times
    But they did use two images for each button ... see below.

    If you look at their HTML and view the images all by themselves, you can
    see how they did it. Using Javascripting, they pre-load them, then do
    mouseovers.
    Attached Images Attached Images


  4. #3
    Junior Member
    Join Date
    Oct 2008
    Posts
    24
    Member #
    17560
    All right I figured out how to do it. It's called 'screening' on paint shop pro...

    Now if someone can help me figure out how to get the links to the top of the navigation panel on the left....I tried doing the <align=top> and it did not work and right now they are in the middle.

    Thanks

  5. #4
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    I think what you want is-
    vertical-align: top;
    in your css. Use that for the td tag or make an id or class in your stylesheet. I don't see any style sheet in your code, do you know how to do css? You can do inline style if you have to. Like so-
    <td style="vertical-align: top;"> data </td>
    Actually I'm not sure if you can do inline styles for td tags but try it if you don't have any css.

  6. #5
    Junior Member
    Join Date
    Oct 2008
    Posts
    24
    Member #
    17560
    Thanks that worked...I dont have a .css file yet but I plan on putting that together when I start using tables I am just trying to get my links working...

    Now I just have to figure out how to get my links to switch to another image on rollover...any ideas on that?

  7. #6
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Well the best way is through css and using the ul tag. I'm in the midst of learning how to do that fluently as it is a little tricky. Basically you would put background images in your link and hover states and you can still put text on top, which is ideal. I don't have a solid example for you but you can google it.

    The other alternative is using some javascript, preloading of images, and some swap image coding. This is ridiculously more code than you want for such a thing but this is what I have used in the past. It works well in most browsers. This is out of DW and I'm sure I'll catch some crap for posting this! Again, I really don't recommend this technique, but here you go.

    <head> section-
    <script type="text/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) { //v4.01
    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);
    if(!x && d.getElementById) x=d.getElementById(n); 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>


    Then the body tag- preloads images

    <body
    onload="MM_preloadImages
    ('images/buttons/home_but_b.jpg',
    'images/buttons/biz_but_b.jpg',
    'images/buttons/news_but_b.jpg',
    'images/buttons/about_but_b.jpg',
    'images/buttons/contact_but_b.jpg',
    'images/buttons/events_but_b.jpg')">

    Then the markup-

    <a href="index.html" onmouseout="MM_swapImgRestore()"
    onmouseover="MM_swapImage('Image4','','images/buttons/home_but_b.jpg',1)">
    <img src="images/buttons/home_but_a.jpg" alt="Blue Water Hot Deals Home Page" width="80" height="25" id="Image4" /></a>&nbsp;&nbsp;

    <a href="biz_directory.html" onmouseout="MM_swapImgRestore()"
    onmouseover="MM_swapImage('Image5','','images/buttons/biz_but_b.jpg',1)">
    <img src="images/buttons/biz_but_a.jpg" alt="Our advertisers business index" width="120" height="25" id="Image5" /></a> &nbsp;

    <a href="news.html" onmouseout="MM_swapImgRestore()"
    onmouseover="MM_swapImage('Image6','','images/buttons/news_but_b.jpg',1)">
    <img src="images/buttons/news_but_a.jpg" alt="Sign up for our monthly newsletter!" width="120" height="25" id="Image6" /></a>&nbsp;

    <a href="about.html" onmouseout="MM_swapImgRestore()"
    onmouseover="MM_swapImage('Image7','','images/buttons/about_but_b.jpg',1)">
    <img src="images/buttons/about_but_a.jpg" alt="Why shop locally? Find out why" width="120" height="25" id="Image7" /></a>

    <a href="contact.html" onmouseout="MM_swapImgRestore()"
    onmouseover="MM_swapImage('Image8','','images/buttons/contact_but_b.jpg',1)">
    <img src="images/buttons/contact_but_a.jpg" alt="Contact Blue Water Hot Deals" width="120" height="25" id="Image8" /></a>

    <a href="events.html" onmouseout="MM_swapImgRestore()"
    onmouseover="MM_swapImage('Image9','','images/buttons/events_but_b.jpg',1)">
    <img src="images/buttons/events_but_a.jpg" alt="Blue Water Area Events" name="Image9" width="100" height="25" border="0" id="Image9" /></a>

    That's it.


    Now the css way is waaaay less code and maybe someone can show a good example. Positioning the links and getting them to fit the images is the tricky part.

  8. #7
    Junior Member
    Join Date
    Oct 2008
    Posts
    24
    Member #
    17560
    on the " <body
    onload="MM_preloadImages
    ('images/buttons/home_but_b.jpg',
    'images/buttons/biz_but_b.jpg',
    'images/buttons/news_but_b.jpg',
    'images/buttons/about_but_b.jpg',
    'images/buttons/contact_but_b.jpg',
    'images/buttons/events_but_b.jpg')">"

    if i uploaded the images do i have to put "images/buttons/home_but_b.jpg" or is it the file that its stored in that i have to put??

  9. #8
    Senior Member aeroweb99's Avatar
    Join Date
    Feb 2008
    Location
    Port Huron, Michigan
    Posts
    1,037
    Member #
    16468
    Liked
    1 times
    Those are your rollover images. Make sure the file path is correct. Put the file just like normal. Did I answer that?


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
All times are GMT -6. The time now is 09:00 AM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com