SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Picture Toggling

    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??

  2. #2
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  3. #3
    SitePoint Enthusiast
    Join Date
    Jun 2002
    Posts
    87
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Nate Baldwin
    mindpalette.com

  4. #4
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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>

  6. #6
    SitePoint Guru moonman's Avatar
    Join Date
    Dec 2000
    Location
    The Sea of Tranquility
    Posts
    696
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I don't need the size to change, just the actual picture.

  7. #7
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!

  8. #8
    Sultan of Ping jofa's Avatar
    Join Date
    Mar 2002
    Location
    SvÝ■jˇ­
    Posts
    4,080
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Some people are afraid of heights.
    Not me, I'm afraid of widths.
    Steven Wright

  9. #9
    The doctor is in... silver trophy MarcusJT's Avatar
    Join Date
    Jan 2002
    Location
    London
    Posts
    3,509
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ROFL!
    MarcusJT
    - former ASP web developer / former SPF "ASP Guru"
    - *very* old blog with some useful ASP code

    - Please think, Google, and search these forums before posting!


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •