Mouse Over Effect - Please Help

Discussion in 'Web Design' started by rka81, Nov 30, 2006.

to remove all ads.
  1. rka81

    rka81 New Member

    Messages:
    25
    Hi

    I ownder if someone might be able to tell me how to do a similar mouse over effect like the one on this site http://www.templatemonster.com/category.php?from=1&cat=All

    Move over one of the templates and you will see what i mean.....

    IS this done with flash or something else?

    Thanks in advance
     
  2. zkiller

    zkiller Super Moderator Staff Member

    Messages:
    1,639
    that is done via css (cascading style sheet). for instance try adding this bit of code between the head tags of one of your pages...

    Code:
    <style type="text/css">
    <!--
    
       A:link {text-decoration: none; color: #990000;}
       A:visited {text-decoration: none; color: #990000;}
       A:hover {text-decoration: underline; color: #990000;}
       
    -->
    </style>
    that's the css i use on nmpoc.com.
     
  3. rka81

    rka81 New Member

    Messages:
    25

    Mnay Thanks.......but you link to your site didnt work?!! (might be my internet - been dodgy lately!)
     
  4. rka81

    rka81 New Member

    Messages:
    25
    Ok but how do i get the "previews/images" to come up when i hover over another smaller image?!

    Thanks
     
  5. StephanieCordray

    StephanieCordray New Member

    Messages:
    1,017
    Here's a sample of the source code from the link you provided:


    <LINK rel="stylesheet" href="/css/search.css" type="text/css">
    <link rel="stylesheet" href="/seo.css" type="text/css">
    <link rel="stylesheet" href="/css/networkbar.css" type="text/css">
    <link rel="stylesheet" href="/style.css" type="text/css">
    <link rel="icon" href="/favicon.ico" type="image/x-icon">
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon">
    <SCRIPT src="/js/alt.js" language="JavaScript" type="text/javascript"></SCRIPT>
    <SCRIPT src="/js/common.js" language="JavaScript" type="text/javascript"></SCRIPT>
    <SCRIPT src="/js/dynwindow.js" language="JavaScript" type="text/javascript"></SCRIPT>

    <script src="/js/networkbar.js" language="JavaScript" type="text/javascript"></script>

    <script src="/js/preview_templates.js" language="JavaScript" type="text/javascript"></script>
    <script src="/js/loader.js" language="JavaScript" type="text/javascript"></script>
    <script src="/js/AC_RunActiveContent.js" language="JavaScript" type="text/javascript"></script>
    <SCRIPT language="javascript" type="text/javascript">

    The part I highlighted in red shows how they do it. They use a javascript called preview_templates.js

    You can probably find that script in a number of places. I usually recommend http://javascriptsource.com mostly because it's the only url I can remember off the top of my head.
     
  6. zkiller

    zkiller Super Moderator Staff Member

    Messages:
    1,639
    yeah, my server hasn't been accessible since early this morning. haven't heard back from my ISP yet and i kind of doubt there will be anyone in tomorrow to look into it. so hopefully everything will get worked out sometime on monday.
     

Share This Page