WordPress.org

Ready to get started?Download WordPress

Forums

Banner Header (Roll-over effect) and Sidebar HELP (18 posts)

  1. kaswistry
    Member
    Posted 4 years ago #

    Here is my problem:

    Roll Over
    See the header file? If you could notice, there are three icons right? facebook, twitter, and rss. What I want to do is to individually assign a link to each of them. Plus, I would also like to add a hover effect where each icon would be replaced with the same icon BUT with opacity 100% (to make it full colored). Any ideas?

    Thanks to all of you in advance.

    Here's the header code at any rate:

    <!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 profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />

    <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> » Blog Archive <?php } ?> <?php wp_title(); ?></title>

    <meta name="generator" content="WordPress <?php bloginfo('version'); ?>" /> <!-- leave this for stats -->

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
    <link rel="alternate" type="application/rss+xml" title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" />
    <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery-1.2.6.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/fx.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.easing.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.lavalamp.js"></script>

    <script type="text/javascript"><!--//--><![CDATA-[//><!--
    sfHover = function() {
    if (!document.getElementsByTagName) return false;
    var sfEls = document.getElementById("menu").getElementsByTagName("li");

    for (var i=0; i<sfEls.length; i++) {
    sfEls[i].onmouseover=function() {
    this.className+=" sfhover";
    }
    sfEls[i].onmouseout=function() {
    this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
    }
    }

    }
    if (window.attachEvent) window.attachEvent("onload", sfHover);
    //--><!]]></script>
    <?php wp_get_archives('type=monthly&format=link'); ?>
    <?php //comments_popup_script(); // off by default ?>

    <?php wp_head(); ?>
    </head>
    <body>
    <div id="main">
    <div id="header">
    <div id="menubar">
    <div style="float:left; ">
    <ul class="lavaLampNoImage" id="A">

  2. /">Home
  3. <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>

    </div>

    <div id="logo">
    <h1>/"></h1>
    <div class="description"><?php bloginfo('description'); ?></div>
    </div>

    <div id="headerad">
    <?php $ad3 = get_option('omg_ad3'); echo stripslashes($ad3); ?>
    </div>
    </div>
    <div id="cmenubar">
    <div id="cmenu">

      <?php wp_list_categories('sort_column=name&title_li=&depth=4'); ?>

    </div>
    </div>
    </div>
    <!--/header -->

  4. stvwlf
    Member
    Posted 4 years ago #

    you will get more responses if you post the site's URL

  5. kaswistry
    Member
    Posted 4 years ago #

    Sorry about that.

    The site URL is http://kurtsevillano.x10hosting.com

    Thanks!

  6. kaswistry
    Member
    Posted 4 years ago #

    P.S.
    My header is one whole background that occupies the same space. I was planning to create an image map or whatever that could make the job easier.

    All I want is that when a user rolls-over an icon on the header (facebook, rss,twitter), another banner with the same icon (but with opacity 100% to make em look livelier) would be loaded instead.

    Do you think that would work? Any suggestions as to how to easily achieve such effect?

    THANKS!

  7. stvwlf
    Member
    Posted 4 years ago #

    Hi

    Make your life simple and take the 3 icons out of the background image. You can do all you want to do using CSS. Use 3 separate icons.

    I would do it this way. (There is intentionally nothing as link text - we are going to use a background image and define the size of the A tag in the CSS, making the full image clickable.)
    put this code inside div id="header"

    <div id="social">
    <a id="facebook-link" href="...link to facebook ..."></a>
    <a id="rss-link" href="...rss link..."></a>
    <a id="twitter-link" href="...twitter link..."></a>
    </div>

    Then position div id="social" - add to CSS
    #social { position: absolute; left: 750px; top: 50px; }
    (the pixels are approximate - adjust)

    then set up the background images - use the actual image height and width:

    #social a#facebook-link {
    display: block;
    background: url(images/facebook_dimmed.jpg) no-repeat;
    height: 48px;
    width: 48px;
    }

    repeat for the other two.

    Now set up the hover state for links:

    #social a:hover #facebook-link {
     background-image: url(images/facebook_full.jpg);
    }

    repeat for the other two

    That should do it

  8. Mordacity
    Member
    Posted 4 years ago #

    I'm attempting to do this as well.. However, the images aren't actually rolling over for me. They are staying the same.

  9. kaswistry
    Member
    Posted 4 years ago #

    I was close but not that close yet. hehe.

    I followed your instructions but It didn't work out the way we expected. Please check my site to see what happened: kurtsevillano.x10hosting.com. It seems that the icons do not roll over and neither one of them have links either.

    Also, could we please have them horizontally? thanks

  10. stvwlf
    Member
    Posted 4 years ago #

    @Mordacity: I highly recommend you install the Firefox extension called Firebug, if you don't have it, to help with debugging.

    When you click Firebug "Click element in page to inspect" button, point at your image. The CSS being applied will display in the right pane.

    The typical errors are, entering the wrong image name or filepath, or having the styling superceded by some other styling in the stylesheet. The CSS is displayed in the right pane in the order in which its being applied, top down. Sometimes a rule overrides the rule you want. When you point at the imagename in the CSS assignment, you should see a thumbnail of the image - if you don't, the browser is not finding it.

    Other errors are incorrectly indicating the CSS tags/classes/ID's the styling is supposed to be applied to.

    If you try this and really can't find the solution, post the URL of the page on which you are having the problem.

  11. Mordacity
    Member
    Posted 4 years ago #

    It's pointing to both image locations. I've been staring at code all day, it's possible I'm just completely missing it.

    http://www.ninja-kitten.com

  12. kaswistry
    Member
    Posted 4 years ago #

    @stvwlf

    I really apologize. I am a newbie with CSS and I just can't seem to figure it out.

  13. stvwlf
    Member
    Posted 4 years ago #

    @Mordacity:
    I don't see any a:hover assignments in your stylesheet.

    When I added this to your stylings (only in my browser)

    #social a:hover#facebook-link {
     background-image: url(images/facebook.png);
    }

    The Facebook rollover worked fine. You need to add the equivalent for the other one also.

    the a:hover tells the browser to apply that styling when the mouse is hovering over the A link

  14. Mordacity
    Member
    Posted 4 years ago #

    Ah ha, I see what's wrong. Those hover tags are there, but there was a space between a:hover and #facebook-link :) Thanks a ton!!

  15. stvwlf
    Member
    Posted 4 years ago #

    @kaswistry:

    Hi - You also are missing the hover links - see what I just wrote in the above response. You ARE very close.

    Yours should be

    #social a:hover#twitter-link {
    background:transparent url(images/twitter_full.jpg)
    }

    to make them horizontal, add
    float: left;
    to the CSS for each of the 3 A tags you defined previously. you will need to add some margin also, to separate them:
    margin-right: 3px;
    Only the first two need the margin.

  16. kaswistry
    Member
    Posted 4 years ago #

    @stvwlf

    I did the corresponding edits but I still get no hover image and no link :(

  17. kaswistry
    Member
    Posted 4 years ago #

    LOL! Finally, I figured it out!

    a #logo was blocking the three icons from loading their css script! LOl

    Than you very much sir!

  18. markeps
    Member
    Posted 4 years ago #

    Hello, I am having the same issue. I have a background image in the header and I need to add rollover buttons to it. The site is http://blog.lexidupont.com/ . Not sure where to write the css to make this happen. I also want to remove the tag line from the header.

    thanks

  19. markeps
    Member
    Posted 4 years ago #

    Hello, I am having the same issue. I have all of the images in place and they all link to the proper pages, but I can't get the rollover to work.

    the site is http://blog.lexidupont.com/

    thanks

  20. kaswistry
    Member
    Posted 4 years ago #

    Im having another problem. The setup is still the same. However, I can't add a youtube icon.

    Any suggestions?

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.