Picture Toggling

**moonman** · Oct 30, 2002 10:28

Ok, this might be very simple to do, so forgive my blank mindedness - it's been a busy day.

I've got a table, split into 2 cells, one contains some text, the other a small map. Now, when clicking the small map, it's got to show another map (the larger version), and push the text down underneath the big map.

When you click on the big map, it's got to revert to the text and small map.

I'm guessing some form of javascript canbe written to do this??

**jofa** · Oct 30, 2002 12:20

Something like this...

Code:

<html>
  <head>
    <script language="javascript">
      function toggle(img)
      {
        var src = img.src;
        src = src.substr(src.lastIndexOf("/") + 1);
        img.src = (src == "img1.gif") ? "img2.gif" : "img1.gif";
      }
    </script>
  </head>
  <body>
    <img src="img1.gif" onclick="toggle(this);"/>
  </body>
</html>

**Nate Baldwin** · Oct 30, 2002 19:25

So, are you wanting the image size to change in addition to toggling its source, and to move the text accordingly? That's going to end up being more complicated. Wouldn't you pretty much have to put your image and text in a DIV and use a javascript to rewrite the HTML code in the DIV/layer/floating box/whatever you want to call it? Otherwise, the size attribute isn't going to change and the big image will just shrink to the original image's size.

**jofa** · Oct 30, 2002 19:44

Or you could change the width & height properties of the img object...

Code:

        if(src == "img1.gif")
        {
          img.src = "img2.gif";
          img.width = 200;
          img.height = 200;
        }
        else
        {
          img.src = "img1.gif";
          img.width = 33;
          img.height = 33;
        }

You don't have to put the <img> inside a <div>, just set id:s for the <td>s and then you can move the <img> between different parent elements if you want to

**jofa** · Oct 30, 2002 19:56

Another simple example:

Code:

<html>
  <head>
    <script language="javascript">
      function toggle(img)
      {
        var td1 = document.getElementById("td1");
        var td2 = document.getElementById("td2");
        var src = img.src;
        src = src.substr(src.lastIndexOf("/") + 1);
        if(src == "img1.gif")
        {
          img.src = "img2.gif";
          img.width = 200;
          img.height = 200;
          td1.removeChild(img);
          td2.appendChild(img);
        }
        else
        {
          img.src = "img1.gif";
          img.width = 33;
          img.height = 33;
          td2.removeChild(img);
          td1.appendChild(img);
        }
      }
    </script>
  </head>
  <body>
    <table border="1">
      <tr valign="top">
        <td id="td1" width="300" height="300">
          <img src="img1.gif" width="33" height="33" onclick="toggle(this);"/>
        </td>
        <td id="td2" width="300" height="300">
        </td>
      </tr>
    </table>
  </body>
</html>

**moonman** · Oct 31, 2002 02:49

I don't need the size to change, just the actual picture.

**MarcusJT** · Nov 1, 2002 08:29

Originally posted by moonman
I don't need the size to change, just the actual picture.

If not then cut out the chunks that you don't need, but that is what you originally said (small image <--> large image), and the complete solution will be helpful for others who DO need to switch between images of different sizes.

**jofa** · Nov 1, 2002 08:48

Some people are afraid of heights.
Not me, I'm afraid of widths.
Steven Wright

**MarcusJT** · Nov 1, 2002 09:26

ROFL!

User Tag List

Thread: Picture Toggling

Thread Tools

Display

Picture Toggling

Bookmarks

Bookmarks

Posting Permissions