how do I pass the anchor title to an css overlay?

Discussion in 'JavaScript' started by JoesMillion, Aug 8, 2010.

0
  1. #1
    I have an overlay that appears on a different part of the page. I want it to show the anchor title for each link they mouseover. I've coded much of it, just don't know how to pass the title to the overlay. Clues?
     
    Last edited: Aug 8, 2010
    JoesMillion, Aug 8, 2010 IP
  2. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #2 
    
document.getElementById("overlay").innerHTML = this.title;
    Code (markup):
    ??? I'm not sure exactly what you mean.. posting the code that you have would help a lot.
     
    camjohnson95, Aug 8, 2010 IP
  3. JoesMillion

    JoesMillion Peon

    Messages:
    824
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #3
    When someone mouses over a link...

    
<a href="" onmouseover="overlay" title="example">
    Code (markup):
    ... an over lay will appear on another part of the site with the title used on the link.

    
<div id="overlay">example</div>
    Code (markup):
    How can I do this?
     
    JoesMillion, Aug 8, 2010 IP
  4. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #4
    try with jquery:
    
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> 
<script type="text/javascript">
      $(document).ready(function(){
            $('a').hover(function() {
                $('#overlay').html($(this).attr('title'));
            }, function () {
                $('#overlay').html('');
            });
       });
</script>
    Code (markup):
     
    Last edited: Aug 9, 2010
    wab, Aug 9, 2010 IP
  5. JoesMillion

    JoesMillion Peon

    Messages:
    824
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #5
    How do I use it in my page?
     
    JoesMillion, Aug 9, 2010 IP
  6. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #6
    put this code between <head> and </head>
     
    wab, Aug 9, 2010 IP
  7. JoesMillion

    JoesMillion Peon

    Messages:
    824
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #7
    How/where do I call it?
     
    JoesMillion, Aug 9, 2010 IP
  8. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #8
    can you post the code you've already written? it will be easier to help with it.
     
    wab, Aug 10, 2010 IP
  9. JoesMillion

    JoesMillion Peon

    Messages:
    824
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #9
    Yeah, www.joesmillion.com
     
    JoesMillion, Aug 10, 2010 IP
  10. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #10
    well, you already have two functions show() and hide() which look to work fine
     
    wab, Aug 10, 2010 IP
  11. JoesMillion

    JoesMillion Peon

    Messages:
    824
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #11
    I hear it works ok with IE, but I'm on a Mac and using Firefox, which has a problem. With Firefox, the overlay jumps and wont stay visible. Thoughts?
     
    JoesMillion, Aug 10, 2010 IP
  12. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #12
    replace
    
function show(string) {
    elidoverlay = document.getElementById("overlay");
    document.getElementById("overlaymsg").innerHTML = string;
    elidoverlay.style.visibility = "visible";
    }
function hide() {
    elidoverlay = document.getElementById("overlay");
    elidoverlay.style.visibility = "hidden";
    }
    Code (markup):
    with

    
$(document).ready(function(){
   $('#overlay').hide();
   $('area').hover(function() {
         $('#overlay').show();
          $('#overlaymsg').html($(this).attr('title'));
   }, function () {
         $('#overlay').hide();
         $('#overlaymsg').html('');
   });
});
    Code (markup):
    remove visibility:hidden in your overlay css style
    remove onmouseover="show('Free Internet TV')" onmouseout="hide()"

    and that worked when I tried with firefox :)
     
    wab, Aug 10, 2010 IP
  13. JoesMillion

    JoesMillion Peon

    Messages:
    824
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #13
    Still does the same thing for me.
     
    JoesMillion, Aug 10, 2010 IP
  14. camjohnson95

    camjohnson95 Active Member

    Messages:
    737
    Likes Received:
    17
    Best Answers:
    0
    Trophy Points:
    60
    #14
    You don't want to add inline JS to every single link. Try this (uncomment the div overlay and remove the img overlay).
    
<div id="overlay"><div id="overlaymsg">link title</div></div>
</center>
<script type="text/javascript">
var as = document.getElementsByTagName("area");
var ol = document.getElementById("overlay");
for(i=0;i<as.length;i++) {
    as[i].onmouseover = function() {
        ol.childNodes[0].innerHTML = this.getAttribute("title");
        ol.style.visibility = "visible";
    }
    as[i].onmouseout = function() {
        ol.childNodes[0].innerHTML = "";
        ol.style.visibility = "hidden";
    }
}
</script>
</body>
    Code (markup):
    There is no need for jQuery...
     
    camjohnson95, Aug 10, 2010 IP
  15. JoesMillion

    JoesMillion Peon

    Messages:
    824
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #15
    I figured it out so it works with all browsers, including the clicking. Now I just need to position is correctly on the page.
     
    JoesMillion, Aug 10, 2010 IP
  16. JoesMillion

    JoesMillion Peon

    Messages:
    824
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #16
    All done. Thanks!
     
    JoesMillion, Aug 10, 2010 IP
  17. nairbuoyevoli

    nairbuoyevoli Active Member

    Messages:
    579
    Likes Received:
    3
    Best Answers:
    0
    Trophy Points:
    58
    #17
    I used to have this code.. well it is jut for an article post..


    <a href="website" title"">KW</a>

    haha.. iam just trying to help.. hope i made sense.
     
    nairbuoyevoli, Aug 10, 2010 IP
  18. JoesMillion

    JoesMillion Peon

    Messages:
    824
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    0
    #18
    Syntax is wrong.
     
    JoesMillion, Aug 10, 2010 IP
  19. wab

    wab Member

    Messages:
    57
    Likes Received:
    2
    Best Answers:
    0
    Trophy Points:
    43
    #19
    except if you want to avoid loops and complicated call of objects
     
    wab, Aug 11, 2010 IP
  20. Rev Jain

    Rev Jain Active Member

    Messages:
    202
    Likes Received:
    8
    Best Answers:
    0
    Trophy Points:
    80
    #20
    i have no idea bout the passing a title.
     
    Rev Jain, Aug 18, 2010 IP