SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Image hover effect for wordpress help

    Hello
    I am customising a wordpres theme and need help on how to apply a mouse over/fading effect on images ( links) the site which I purchased the theme does not offer support on customisation.

    I would also like to add I am using a image plugin for inserting my images
    would appreciate all help and support
    tnx

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,049
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    It shouldn't be too hard to add a mouseover effect with a little bit of JavaScript and/or CSS.
    Could you provide a link to a page where I can understand a little better what you are trying to do.

  3. #3
    SitePoint Member
    Join Date
    Nov 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thank you for your reply. I'm looking at applying a similar effect to the example page below:

    http://www.4shared.com/

    pls see section under sync, developer, mobile etc

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,049
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi again,

    These are called dropline menus and aren't too hard to implement.
    Here are two good tutorials:
    http://net.tutsplus.com/tutorials/ht...rop-down-menu/
    http://www.webstuffshare.com/2010/01...-css-tab-menu/

    The second one is probably more like what you are looking for. Currently you need to click to have the text change, but it shouldn't be too hard to modify its behaviour so that it displays on hover instead.

    By way of a further example, have a look at this very simple demo I made:
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>jQuery hover</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
        <style>
          #container1{width:150px; height:150px;background:green; margin:5px; float:left;}
          #container2{width:150px; height:150px;background:yellow; margin:5px; float:left;}
          #container3{width:150px; height:150px;background:red; margin:5px; float:left;}
          #text{clear:both;width:460px; border:1px solid;black; margin-left:5px;padding:5px;}
        </style>
      </head>
      
      <body>
        <div id="container1"></div>
        <div id="container2"></div>
        <div id="container3"></div>
        <div id="text">Watch this space</div>
        <script>
          $(document).ready(function() {
            t = $("#text");
            $("#container1").hover(function(){ t.text("You last hovered over the green div").fadeIn("slow")});
            $("#container2").hover(function(){ t.text("You last hovered over the yellow div").fadeIn("slow")});
            $("#container3").hover(function(){ t.text("You last hovered over the red div").fadeIn("slow")});
          });
        </script>
      </body>
    </html>
    If this suits your needs, we could spice it up a little with some fade in / fade out effects


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
  •