Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Scale up images onclick

    I'm cluelessly trying to piece together a personal site, I’ve hunted around and can’t find this covered on here... I think it used to be bad practice to resize an image with code but SVG files render beautifully at any scale and I’d like to try this out:

    I’d like to have a series of images, each one doubling in scale when clicked then returning to its original size when clicked a second time.

    Could I use transform: scale(2) somewhere in there to make it extra streamlined?

    Thanks for reading!

  • #2
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,898
    Thanks
    203
    Thanked 2,530 Times in 2,508 Posts
    Have a look at the many excellent scripts at http://www.vicsjavascripts.org.uk/


    All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #3
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Hey - thanks for helping! I might be after something a bit less clever though. I found this, which is close:

    Code:
    <script type="text/javascript">
    function toggle(it) {
      if (it.width == 200)
        {it.width = 600;}
      else
        {it.width = 200;}
    }
    </script>
    then

    Code:
    <img src="example.svg" onclick="toggle(this)"/>
    but is there a tidy way to switch that 200 for original-size, and that 600 for double-size - I can't just smash in scale(2)... sorry for being so clumsy with this...

  • #4
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks iBall - that sounds about right but I don't know where to start with scripting it, I'm sorry... Are there any examples I could look at? And does this method invoke a generic actual width and doubling or does it require information to be gather about each image? I was hoping for the former but I'm clueless enough not to know if that's possible... Thanks again!

  • #5
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Thanks iBall - this works nicely: http://www.suresure.co.uk/Temp/ICA.html

    I've applied the function to all images (this suits me):

    Code:
                window.onload=function(){
                    var imgsO = document.getElementsByTagName('img');
                    for(i=0; i<imgsO.length; i++){
                        imgsO[i].enlarged = false;
                        imgsO[i].onclick=function(){toggleImgSize(this);}
                    }
                }
    and added scale to the css instead of pixel width:

    Code:
            <style type="text/css">
                img{
    transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -webkit-transform: scale(1);
    -o-transform: scale(1);
                }
            </style>
    Does that seem appropriate? I'm wary of making some kind of mistake here by interfering too much...



    And yet another question! I'd like to introduce a change of cursor - I've added this to the first image:

    Code:
    <img src="ICA 5.svg" OnMouseOver="this.style.cursor='pointer';" OnMouseOut="this.style.cursor='auto';"/>
    but is there a nice way to add this to the style tag so all images adopt the pointer cursor? I'm sorry to drag this out, thanks again!

  • #6
    New to the CF scene
    Join Date
    Jun 2012
    Posts
    7
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Alright, I'm an idiot - this will work for the pointer cursor over images:

    Code:
    cursor: pointer;
    Sorry!

    But is the rest tidy enough? I get anxious when I don't have a handle on what it all means - this:

    Code:
    <script type="text/javascript">
    function toggle(it) {
      if (it.width == 200)
        {it.width = 600;}
      else
        {it.width = 200;}
    }
    </script>
    I understand (it's a shame I can't figure out how to introduce original/double scale), but iBall's code used here: http://www.suresure.co.uk/Temp/ICA.html is such a mystery to me... sorry... and thanks again!


  •  

    Tags for this Thread

    Posting Permissions

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