www.webdeveloper.com
Results 1 to 4 of 4

Thread: how to resize image onclick?

  1. #1
    Join Date
    Apr 2006
    Location
    Oslo, Norway
    Posts
    95

    how to resize image onclick?

    i have a image gallery. where the thumbnails are set like this:
    HTML Code:
    <div class="thumbnail">
      <a href="#"><img src="img/img0001.pg" width="200" border="0" /></a>
    </div>
    <div class="thumbnail">
      <a href="#"><img src="img/img0002.pg" width="200" border="0" /></a>
    </div>
    <div class="thumbnail">
      <a href="#"><img src="img/img0003.pg" width="200" border="0" /></a>
    </div>
    etc.......
    i am not sure what is the best sollution...
    i want to click an image and instead of loading a new page or window i want just the width of both the thumbnail class and the img tag to change to 600.

    can this be done with javascript??

  2. #2
    Join Date
    Nov 2002
    Posts
    4,473
    Code:
    <div class="thumbnail">
      <a href="#" onclick="return false"><img src="img/img0001.pg" width="200" border="0" onclick="this.width=600;this.parentElement.parentElement.style.width=600"/></a>
    </div>

  3. #3
    Join Date
    Apr 2006
    Location
    Oslo, Norway
    Posts
    95
    check it out here:
    http://www.morganwaage.com/gallery/gallery.php

    it doesn't look like it is changing the div, just the img...
    or there may be something wrong with my html...

    is there a just as easy way of resizing them back to 200 again??

  4. #4
    Join Date
    Nov 2002
    Posts
    4,473
    it doesn't look like it is changing the div, just the img
    Code:
    <script type="text/javascript">
    function toggle(it) {
      if (it.width == 200)
        {it.width = 600;}
      else
        {it.width = 200;}
    }
    </script>
    ...
    <div class="thumbnail">
      <img src="img/img0001.pg" width="200" border="0" onclick="toggle(this)">
    </div>
    It works for me. You'll have to show me what the CSS is for "thumbnail".

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles