treehouse : what would you like to learn today?
Web Design Web Development iOS Development

Text Rollover Text Display

  • After attempting to find this sort of thing on Google and not being able to come up with a good name for it, failing miserably, I decided it was time to post here in the hopes that someone would have a simple jscript that allows you to view text when rolling over text elsewhere.

    Currently I have the website I'm working on setup to rollover an image, which works perfectly but I am in need of a jscript method that will allow hidden text to appear as well underneath said image.

    If anyone has anything relevant to this, it would be most helpful. Thanks!
  • Well, the link to the page can help.

    And there is a lot of ways to get this happen. Even with simple CSS.
  • All I need is some form of function that allows me to input multiple different strings of text and be able to link the onmouseover to the box it will go in.

    For example, text a is rolled over on the right which brings up text a2 on the left. Then onmouseout it reverts to the original text.

    I'll need it for multiple different inputs though, not just a single.
  • umm could you not sinply do this in css as he mentioned instead of javascript, I mean put the text you want hidden in a div that has 0 opacity and have its opacity go to 100 when the mouse hovers over the other text or image or whatever and you can do the same for the mouse out. if you want different text to appear you could simply create multiple divs all positioned in the same spot using z index to keep one over the other and depending on what is hovered over the right div has its opacity value changed. Someone correct me if I'm wrong or there is a faster way to do this :D
  • @furrball1383 Careful using opacity to do this as lt IE 9 will ignore it as it doesn't understand it. Using display: none; or visibility: hidden; is probably the way to go about it depending on whether you want the hidden text to still sit in the flow of the page.
  • jQuery.

    $("#link1").mouseenter(function() {
    $("#caption").html("This is link1's caption!");
    $("#caption").show();
    });
    $("#link1").mouseleave(function() {
    $("#caption").html("This is the original text.");
    $("#caption").hide();
    });
  • every day i learn something new with you guys :D