image swap + restore + set

Collapse
This topic is closed.
X
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • Matthew
    #1

    image swap + restore + set

    Hi all

    I'm looking for a solution that can be used in a calendar/gig guide
    scenario where each day is represented by a dot image. Now this dot must
    do the following

    1. When the mouse goes over the dot image it swaps to the mouseover dot
    2. When the mouse goes out of the dot image it restores back to the
    original img
    3. When the img is clicked the dot image is swapped with another image
    (different to the other 2) that will remain there even when the mouse
    goes out of the image

    I've been searching high & low for an answer but with no luck

    Any gurus out there able to help ???

    Cheers

    Matthew
    Tags: None
    • Tony
      #2
      Re: image swap + restore + set

      "Matthew" <dinkumws@hotma il.com> wrote in message
      news:42731daf$1 @duster.adelaid e.on.net...[color=blue]
      > Hi all
      >
      > I'm looking for a solution that can be used in a calendar/gig guide
      > scenario where each day is represented by a dot image. Now this dot must
      > do the following
      >
      > 1. When the mouse goes over the dot image it swaps to the mouseover dot
      > 2. When the mouse goes out of the dot image it restores back to the
      > original img
      > 3. When the img is clicked the dot image is swapped with another image
      > (different to the other 2) that will remain there even when the mouse goes
      > out of the image
      >
      > I've been searching high & low for an answer but with no luck
      >
      > Any gurus out there able to help ???[/color]

      Try googling "javascript rollover" or "javascript image rollover"



        Comment

        • RobB
          #3
          Re: image swap + restore + set

          Matthew wrote:[color=blue]
          > Hi all
          >
          > I'm looking for a solution that can be used in a calendar/gig guide
          > scenario where each day is represented by a dot image. Now this dot[/color]
          must[color=blue]
          > do the following
          >
          > 1. When the mouse goes over the dot image it swaps to the mouseover[/color]
          dot[color=blue]
          > 2. When the mouse goes out of the dot image it restores back to the
          > original img
          > 3. When the img is clicked the dot image is swapped with another[/color]
          image[color=blue]
          > (different to the other 2) that will remain there even when the mouse[/color]
          [color=blue]
          > goes out of the image
          >
          > I've been searching high & low for an answer but with no luck
          >
          > Any gurus out there able to help ???
          >
          > Cheers
          >
          > Matthew[/color]

          <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
          "http://www.w3.org/TR/html4/strict.dtd">
          <html>
          <head>
          <base href="http://snaught.com/JimsCoolIcons/Marbles-W/">
          <style type="text/css">

          table {
          width: 400px;
          margin: 100px auto;
          border-collapse: collapse;
          border: 3px #fff inset;
          }
          td {
          font: bold 11px tahoma;
          border: 1px #000 solid;
          background: #fafffa;
          }

          </style>
          <script type="text/javascript">

          //::::::::::::::: ::::::::::::::: :
          var overurl = 'green-glass.jpg';
          var outurl = 'green.jpg';
          var clickurl = 'red-glass.jpg';
          //::::::::::::::: ::::::::::::::: :

          function init()
          {

          function over()
          {
          if (!/red/.test(this.src) )
          this.src = this.src.replac e(outurl, overurl);
          }
          function out()
          {
          if (!/red/.test(this.src) )
          this.src = this.src.replac e(overurl, outurl);
          }
          function click()
          {
          this.src = clickurl;
          }

          var i = 0,
          img,
          imgs = document.getEle mentsByTagName( 'img');
          while (img = imgs.item(i++))
          if (img.className == 'swap')
          {
          img.onmouseover = over;
          img.onmouseout = out;
          img.onclick = click;
          }
          var plover = new Image().src = 'green-glass.jpg';
          var plclick = new Image().src = 'red-glass.jpg';
          }

          window.onload = function()
          {
          if (document.getEl ementsByTagName )
          init();
          }

          </script>
          </head>
          <body>
          <table cellspacing="1" >
          <tbody>
          <script type="text/javascript">
          document.write( '<tr>');
          var d = 0;
          while (d < 31)
          {
          if (d && d % 7 == 0)
          document.write( '</tr><tr>');
          document.write( '<td><img class="swap" src="green.jpg" >',++d,'</td>');
          }
          document.write( '<td></td><td></td><td></td>');
          </script>
          </tbody>
          </table>
          </body>
          </html>

            Comment

            Previous template Next
            Working...