Image resize on click

[Dean]

HI thier

Does anyone know how i can change the size of a image using an onclick function.

I have a image which starts off 150 by 150 showing lets say blue jumper small and i have a few thumbnails that have swap images tages to switch the blue jumper small to the corrosponding colour for the thumbnail you have rolled the mouse over.

I also have the same images but twice as big for a view large image option.

I want to have a view large button that when clicked will set the image size to 250 by 250 and show a larger image by changing the image size.

this way by only changing the image size rather than image the swap image behaviour on the thumbnails will still work and so mean you can flick through the different colours but using the larger image.

The idea being if i can change the size of the image i only need one set of images.

i would also like the view large button or image to change to view small.

any ideas welcome:confused:

[ACJavascript]

Hello Dean,

Well you could do somthing like this

<script langauge="javascript">

function changeIt(){
var width=250
var height=250

document.TheImage.width=width
document.TheImage.height=height
}

</script>

<img src="Image.gif" name="TheImage">
<BR>
<input type="button" value=" Change " onclick="changeIt()">

I didn't test it but in theory it should work lol:thumbsup:

[Dean]

hi the script works

is their any of having the text in the button change to small view and then when yiou click it it changes the image size back to one fifty

i realise that simply copy the script on the page twice change the name of the second one to changeback set the sizes to 150 but how do you get the script to change the onclick comand of the button do that it will call changeback the second time you click on it.

i would be greatful for the help.

many thanks

[ACJavascript]

Hello,,
Well im sure there are multiple ways of doing this but I do it this way

--------
<script langauge="javascript">

function changeIt(){

if(document.form1.checker.value==1){
var width=250
var height=250
document.form1.checker.value=2
}else{
document.form1.checker.value=1
var width=150
var height=150
}

document.TheImage.width=width
document.TheImage.height=height
}

</script>

<form name="form1">
<input type="hidden" checker="1">
</form>

<img src="Image.gif" name="TheImage">
<BR>
<input type="button" value=" Change " onclick="changeIt()">


Hope it works for ya :D

[Dean]

the code works a treat thanks

I have a view small image and view large image is their any way to change the code so that it changes the image src in the button. as i am using the images as buttons.

i have been trying along these lines to change the code but it doesn't seem to working can you point me in the right direction or show me where i am going wrong.

i have set the script so it starts on the lager image and i have put in the script below as to how i think it should be to swap the image button src in the same way that it swaps the image sizes for the main image.


<script langauge="javascript">

function changeIt(){

if(document.checker.checker.value==1){
var width=384
var height=329
var src="catalog/small_view.gif"
document.checker.checker.value=2
}else{
document.checker.checker.value=1
var width=284
var height=229
var src="catalog/icon_larger.gif"
}

document.main.width=width
document.main.height=height
document.view.src=src
}

</script>

<form name="checker">
<input name="checker" type="hidden" id="checker" value="2" checker="1">
</form>

<img src="catalog/hcnderbytweedlrg.jpg" name="main" width="384" height="329">
<BR>
<input name="view" type="image" id="view" onclick="changeIt()" src="catalog/small_view.gif" width="44" height="50" border="0">
<input type="button" value=" Change " onclick="changeIt()">

any suggestions welcome.

[SpeedFreak]

well first up, if you want an image to submit a form you do it like this:

<image src="image.jpg" onclick="document.form.NAME.submit()">

and your form would be:

<form name="NAME">

also 'checker' is not a valid input parameter so you cant assign 2 values to one hidden input, use 2 hidden inputs with different values.

next if you want the image (which u are using as a button) to change simply change it using the same method in the script. give it a name and then change the 'src' value for each state

hope this helps

Cheers

[Dean]

the code i have put in that has been modified from the earlier code does run and quite happly if you remove the var src lines and document.view.src=src lines of code i have added to make it try and swap the src on the input buton tag.

you can set the defualt value of the hidden filed in the form as the javascript checks the value so if like i have opted to start with a large image then you simple set the default value to 2 and it reads large image set it to 1 and it will start with a small image.

simply copy the code from the top off the page that ac gave me then give the form hidden filed a value of 2 and you will see it works#


cheers dean:thumbsup: