Where to start?

**g8r** · 05-16-2007, 02:59 PM

I want to make a webpage where there is an image in the center that changes depending on what button the mouse is hovering over. Once clicked to go to another page. I think I can do it in flash, but is there a better way? Especially if I want to make a liquid type page. Thanks.

**Twey** · 05-16-2007, 04:49 PM

Of course:

Code:

  <script type="text/javascript">
    function changeImage() {
      var data = this.rel.split("|"),
        img = document.images[changeImage.img];
      img.src = data[1];
      img.alt = data[2];
    }
    changeImage.img = "centreimage";
    function unChangeImage() {
      var img = document.images[changeImage.img];
      img.src = changeImage.defaultSrc;
      img.alt = changeImage.defaultAlt;
    }

    onload = function() {
      changeImage.defaultSrc = img.src;
      changeImage.defaultAlt = img.alt;
      for(var i = 0, a = document.links; i < a.length; ++i) {
        if(a[i].rel && a[i].rel.indexOf("swap|") === 0) {
          a[i].onmouseover = changeImage;
          a[i].onmouseout = unChangeImage;
        }
      }
    };
  </script>
</head>
<body>
  <ul>
    <a href="page1.html" rel="swap|redleaves.png|Red leaves swirling in an autumnal wind">Page One</a>
    <a href="page2.html" rel="swap|images/greenleaves.jpg|First green leaves of spring">Page One</a>
  </ul>
  <p>
    <img src="default.png" alt="Some text describing the default image">
  </p>

Ugh, I've been forced (practically at gunpoint) to use VB6 for a project recently, and it's messed up my coding style terribly.

Thread: Where to start?

Thread Tools

Search Thread

Where to start?

Bookmarks

Bookmarks

Posting Permissions