SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Activating Spans on Hover

    Continued from this thread.
    Below is what I have so far, I'm looking for a way to have one of the highlighted sections highlighted by default when the page loads. Can anyone help me do this?

    Code:
    <script type="text/javascript">
        function highlight(paraId, mode)
        {
          var t = document.getElementById(paraId);
          t.className = mode ? "hilite" : "";
        }
    
        if (window.addEventListener) {
          window.addEventListener("load", function() {
              var i = document.getElementById("initiator");
              i.addEventListener("mouseover", function() {highlight("target", true)}, false);
              i.addEventListener("mouseout", function() {highlight("target", false)}, false);
              }, false);
        } else if (window.attachEvent) {
          window.attachEvent("onload", function() {
              var i = document.getElementById("initiator");
              i.attachEvent("onmouseover", function() {highlight("target", true)});
              i.attachEvent("onmouseout", function() {highlight("target", false)});
              });
        }
    	
    	
    	    if (window.addEventListener) {
          window.addEventListener("load", function() {
              var i = document.getElementById("initiator2");
              i.addEventListener("mouseover", function() {highlight("target2", true)}, false);
              i.addEventListener("mouseout", function() {highlight("target2", false)}, false);
              }, false);
        } else if (window.attachEvent) {
          window.attachEvent("onload", function() {
              var i = document.getElementById("initiator2");
              i.attachEvent("onmouseover", function() {highlight("target2", true)});
              i.attachEvent("onmouseout", function() {highlight("target2", false)});
              });
        }
    	
      </script>
    HTML Code:
    <div id="left">
    <h2><a id="initiator" href="#">hover link 1</a></h2>
    <h2><a id="initiator2" href="#">hover link 2</a></h2>
    <h2>hover link 3</h2>
    <h2>hover link 3</h2>
    </div>
    <div id="right">
    <p class="main"><span id="target">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor neque at purus. In libero. Cras posuere, urna quis euismod nonummy, mauris metus congue purus,</span> / <span id="target2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor neque at purus. In libero. Cras posuere, urna quis euismod nonummy, mauris metus congue purus,</span>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Duis auctor neque at purus. In libero. Cras posuere, urna quis euismod nonummy, mauris metus congue purus,</p>
    </div>

  2. #2
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I guess I misunderstood what you're trying to do. If you want one section to be highlighted from the start, just give it the 'hilite' class.

    You should rewrite the functions to toggle the highlighted state. (And you can move the second set of event listener assignments into the first if-statement.)

    I'm sorry, I don't have time to code it for you right now. Maybe later.
    Birnam wood is come to Dunsinane

  3. #3
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I would like the initial highlight to be removed once you start hovering over the other words, so just aplying the hilite class wont work. I'm afraid I dont know how to rewrite the code.. any help is apreciated.

  4. #4
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Like this?
    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
      <title>Remote Hover</title>
      <style type="text/css">
        .hilite {color:#c00}
      </style>
      <script type="text/javascript">
        function highlight(targetId)
        {
          var t1 = document.getElementById("target");
          var t2 = document.getElementById("target2");
          t1.className = t1.id == targetId ? "hilite" : "";
          t2.className = t2.id == targetId ? "hilite" : "";
        }
    
        if (window.addEventListener) {
          window.addEventListener("load", function() {
              var i1 = document.getElementById("initiator");
              var i2 = document.getElementById("initiator2");
              i1.addEventListener("mouseover", function() {highlight("target")}, false);
              i1.addEventListener("mouseout", function() {highlight("")}, false);
              i2.addEventListener("mouseover", function() {highlight("target2")}, false);
              i2.addEventListener("mouseout", function() {highlight("")}, false);
              highlight("target2");
              }, false);
        } else if (window.attachEvent) {
          window.attachEvent("onload", function() {
              var i1 = document.getElementById("initiator");
              var i2 = document.getElementById("initiator2");
              i1.attachEvent("onmouseover", function() {highlight("target")});
              i1.attachEvent("onmouseout", function() {highlight("")});
              i2.attachEvent("onmouseover", function() {highlight("target2")});
              i2.attachEvent("onmouseout", function() {highlight("")});
              highlight("target2");
              });
        }
      </script>
    </head>
    <body>
      <p><a id="initiator" href="#">Hover link 1</a></p>
      <p><a id="initiator2" href="#">Hover link 2</a></p>
      <p><span id="target">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque interdum rutrum sapien. In metus. Quisque aliquam libero et velit. Vestibulum sapien. Quisque suscipit, massa suscipit dapibus facilisis, urna lacus blandit nisl, at consectetuer quam tortor vel felis. Donec diam. Sed non orci. Suspendisse vitae risus ut ipsum tempor sagittis. Sed nec magna vitae velit dapibus dapibus. In et felis. Integer auctor dui eu purus.</span> <span id="target2">Praesent congue lacus ac nunc. Integer nec pede in nunc rutrum tempor. Nunc orci elit, venenatis at, pharetra nec, porta et, pede. Integer tempus.</span></p>
    </body>
    </html>
    Birnam wood is come to Dunsinane

  5. #5
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Yeah, that's what I was looking for. Thanks! Would it now be straight forward to have initiator2 highlighted at first as well as target2?

  6. #6
    SitePoint Author silver trophybronze trophy

    Join Date
    Nov 2004
    Location
    Ankh-Morpork
    Posts
    12,159
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It's doable, but I'd need to know how you want it to behave on mouseover. In the current example, the initiators are not highlighted; only the targets.

    If you want the initiators to be highlighted when the corresponding target is highlighted, it's easy to achieve. You'd have to add some code to the highlight() function:
    Code:
    function highlight(targetId)
    {
          var i1 = document.getElementById("initiator");
          var i2 = document.getElementById("initiator2");
          var t1 = document.getElementById("target");
          var t2 = document.getElementById("target2");
          i1.className = t1.className = t1.id == targetId ? "hilite" : "";
          i2.className = t2.className = t2.id == targetId ? "hilite" : "";
    }
    Birnam wood is come to Dunsinane

  7. #7
    SitePoint Addict dreado's Avatar
    Join Date
    Jan 2005
    Location
    UK
    Posts
    221
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    That's brilliant, thank you. I was using a regular link hover for the initiators.


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
  •