SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    United Kingdom
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Hover over a link to unhide a div?

    I am trying to work out how to use JS to respond to a mouseover on one element (a link) by modifying the CSS declarations of another, separate element. The related element is a div containing text that summarises the content to which the link points. It is positioned over another div and is currently hidden; I want the mouseover to make it look as if the other div's content has changed.

    It should be easy to change the relevant declaration in response to the mouseover, but I can only find advice about how to modify the same element as the mouseover applies to. It is basically the same as Stu Nicholls uses in his JS paged menu, but I have not been able to pick it apart and understand that code.

  2. #2
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This can be done using css alone. If you insist on using javascript then you would use something like

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
        <head>
            <title>Untitled Document</title>
            <link rel="stylesheet" type="text/css" media="all" />
            <style type="text/css"></style>
            <script type="text/javascript">
                function show(what) {
                    if(typeof(what) == 'string')
                        what = document.getElementById(what);
                    what.style.display = 'block';
                }
                function hide(what) {
                    if(typeof(what) == 'string')
                        what = document.getElementById(what);
                    what.style.display = 'none';
                }
            </script>
        </head>
        <body>
            
            <a href="#" onmouseover="show('test');" onmouseout="hide('test');">A test Link</a>
    
            <div id="test" style="display: none;"><img src="http://sitepointstatic.com/images/new/logo.gif" alt="Test" title="Test" /></div>
    
        </body>
    </html>


  3. #3
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    United Kingdom
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Thanks for your reply

    I was beginning to think that nobody knew the answer or was willing to provide it.

    I am aware that this can be done -- albeit with too much complexity for me -- with CSS, but that would not provide the best solution. It is essential that the links can still be clicked to go to the complete pages, because the content that I wish to show is just a condensed highlight. If I can do it with JS, then it should degrade properly when it is blocked because visitors will just follow the link as normal. The CSS solution seems to involve links that go nowhere.

    Thanks again for your solution.

  4. #4
    SitePoint Wizard gRoberts's Avatar
    Join Date
    Oct 2004
    Location
    Birtley, UK
    Posts
    2,439
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    CSS would be exactly the same as the Javascript. It would not interfere with the actual operation of the link. Although technically it would be more difficult using CSS, but only slightly.


  5. #5
    SitePoint Enthusiast
    Join Date
    Mar 2007
    Location
    United Kingdom
    Posts
    83
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    When I look at the code behind the CSS paged menus at CSS Play, I see code that is too complex for me to use and understand. It also uses links that end in "#nogo", and I don't know if that is avoidable.

  6. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Adrian M.H. View Post
    I am trying to work out how to use JS to respond to a mouseover on one element (a link) by modifying the CSS declarations of another, separate element. The related element is a div containing text that summarises the content to which the link points. It is positioned over another div and is currently hidden; I want the mouseover to make it look as if the other div's content has changed.

    It should be easy to change the relevant declaration in response to the mouseover, but I can only find advice about how to modify the same element as the mouseover applies to.
    The challenge is in how to achieve this in a semantically appropriate manner.

    First, how is the content going to look without css or javascript, and next is how to appropriately define the relationship between the link and the div area.

    If the link is a fragment identifier then that makes life a lot easier, you can just link to #pageinfo and the script can use that well. When you're linking to another page things become more tricky, but not much.

    Code html4strict:
    <p><a id="pagelink" href="linktopage.html" rel="pageinfo">Page link</a></p>
    <div id="pageinfo">Information about Page</div>

    When the page elements are available we want to attach an event to the link and to hide the page info piece. Place this script at the bottom of the body.

    Code javascript:
    var pagelink = document.getElementById('pagelink');
    pagelink.onmouseover = displayContent;
    pagelink.onmouseout = hideContent;
    pagelink.onmouseout();

    And now things are ready. The mouse over and out events are ready to go and we've fired the onmouseout event to hide the div. We just need the displayContent and hideContent functions.

    Code javascript:
    function displayContent() {
        var target = this.getAttribute('rel');
        document.getElementById(target).className = '';
    }
    function hideContent() {
        var target = this.getAttribute('rel');
        document.getElementById(target).className = 'hidden';
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


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
  •