Scale up images onclick

[Suresure]

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!

[Philip M]

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.

[Suresure]

Hey - thanks for helping! I might be after something a bit less clever though. I found this, which is close:

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

then

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

[Suresure]

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!

[Suresure]

Thanks iBall - this works nicely: http://www.suresure.co.uk/Temp/ICA.html

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

            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:

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

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

[Suresure]

Alright, I'm an idiot - this will work for the pointer cursor over images:

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:

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