SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Dec 2008
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Mouse over pop up image effect

    Hi,

    This is my first post, hope it's in the right place.
    I have been trying to create a mouse-over image pop-up effect on the homepage of my website, Lanna Charm. Have not had any luck so far, either can't get the code to work, or not able to place the image where I want it. I have to learn how to do things like this myself, as I live in the far north of Thailand an website mechanics are thin on the ground around here.
    Would anyone know of a relatively straight forward way of achieving this effect ?
    Thanks in advance, Mickmac

  2. #2
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey.

    You can accomplish that with CSS or JavaScript. You can do a lot more cool effects with JavaScripts, as with CSS it's more for styling your page and your limited what you can do dynamically. Look up JavaScript or CSS rollovers on google to get yourself started.

    Hope that helps.

  3. #3
    SitePoint Member
    Join Date
    Dec 2008
    Location
    USA
    Posts
    24
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Use JavaScript and create a mouseover and mouseout with show/hide layer.

  4. #4
    SitePoint Evangelist bals28mjk's Avatar
    Join Date
    Aug 2007
    Posts
    405
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Why are you ignoring CSS techniques?

  5. #5
    In memoriam gold trophysilver trophybronze trophy Dan Schulz's Avatar
    Join Date
    May 2006
    Location
    Aurora, Illinois
    Posts
    15,476
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Mickmac, and welcome to SitePoint!

    Are you looking for a rollover or an actual pop-up?

  6. #6
    SitePoint Wizard Blake Tallos's Avatar
    Join Date
    Jun 2008
    Location
    Cuyahoga Falls, Ohio.
    Posts
    1,510
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Popup window :
    Code HTML4Strict:
    <a href="javascript:void(0);"
    onMouseover="ShowPop('pop');"
    onMouseout="HidePop('pop');">Popup term</a>

    No you can style the new window. With CSS.
    Creating the rollover effect CSS Apply these styles according to your HTML.
    Code CSS:
     
    #list-menu ul {
        margin: 0; 
        padding: 0;
        list-style-type: none;
    font-family: verdana;
    font-size: 12px; 
    } 
     
    #list-menu a {
        display: block;
        width:120px;
        padding: 2px 2px 2px 10px;
        border: 1px solid #000000;
        background: #dcdcdc;
      text-decoration: none; /* Turns of underlined text.    */
    } 
     
    #list-menu a:link, #list-menu a:active, #list-menu a:visited {
        color: #111111;
     }
     
    #list-menu a:hover {
        border: 1px dotted #111111;
        background: #444444;
        color: #ffffff;
     }


    Code HTML4Strict:
    <ul id="list-Menu">
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    <li><a href="#">Test</a></li>
    </ul>


    Blake Tallos - Software Engineer for Sanctuary
    Software Studio, Inc. C# - Fanatic!
    http://www.sancsoft.com/



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
  •