#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    256
    Rep Power
    13

    Image swap & text...css? javascript?


    I know that you can have a javascript that when you go over some text, an image, somewhere else on the page, will change... but is there a way to reverse that? As in I want to go over an image and have the TEXT change.... Basically I want to have a menu which consists of, lets say, 'home' 'about' 'links' 'contact' all images (for example) and then there be a spot near there which consists of text which may offer something like a brief description of the page, or a last update....

    I want to have my menu items be images so that 1) I can use the font I want without having to embedd, and 2) acutally have those images swap with themselves......

    Any ideas?
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Jan 2002
    Location
    Seattle WA
    Posts
    863
    Rep Power
    14
    How to implement it really depends on how your menu system is laid out. The easiest way is to use the innerHTML property of an element to set text on the fly. innerHTML is not standard, but all recent browsers support it. Just have an array of context strings and switch in and out the text you need.

    The code below uses the id of a node passed to the function as a key to an array of strings. It also exits gracefully if innerHTML is not supported. You should be able to pick out how it works and apply it to your site.
    Code:
    <?xml version="1.0" encoding="utf-8"?>
    <!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" xml:lang="en" lang="en">
      <head>
        <title>New Document</title>
        <script type="text/javascript">
          // The help text.
          var text = new Array();
          text["home"] = "This takes you to the frontpage.";
          text["about"] = "General information about this site.";
          text["links"] = "Relevant links and partners.";
          text["contact"] = "How to get ahold of us.";
    
          // toggleText expects a node who's id is a key to an array of
          // context help strings.
          function toggleText(node) {
            // Some older browsers don't support the innerHTML property.
            // Just return if this browser doesn't.
            if (!node.innerHTML)
              return;
    
            // Set the text for our context node.
            document.getElementById("menu_context").innerHTML =
              text[node.id];
          }
        </script>
      </head>
      <body>
        <div id="menu">
          <a id="home" href="#" onmouseover="toggleText(this)">Home</a>
          <a id="about" href="#" onmouseover="toggleText(this)">About</a>
          <a id="links" href="#" onmouseover="toggleText(this)">Links</a>
          <a id="contact" href="#" onmouseover="toggleText(this)">Contact</a>
        </div>
        <div id="menu_context"></div>
      </body>
    </html>
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2003
    Posts
    256
    Rep Power
    13
    Thank you! But now what if I wanted to have it be images, rather than text that you mouse over? And then what if I want to make those images swap....so that the image would swap with and be replaced by another image AND the description below would work?

IMN logo majestic logo threadwatch logo seochat tools logo