CodingForums.com - Scale up images onclick

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - Scale up images onclick (http://www.codingforums.com/showthread.php?t=264996)

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!

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.

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

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!

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!

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!