...

View Full Version : Rotate div layer 180 degrees?



smartist
06-16-2008, 05:41 PM
is there a way to have several div id layers, each with an image inside the div, and on select you choose which div layer you want, there is only one button which allows you to rotate the selected div to 180, also that same button allows you to rotate back to the original position.

Philip M
06-16-2008, 05:48 PM
Simplest is to have two versions of each image, one at 180 degrees (or upside down), then switch between them when the button is clicked.

smartist
06-16-2008, 06:01 PM
how should i do the on select function. I just want 1 (180 degree button) that can change the selected div image.

Philip M
06-16-2008, 06:29 PM
Try this:-



<div id = "div1">
<img name = "img1" src = "myimage1.jpg">
<br><br>
<input type = "button" value = "Rotate this image" onclick = "rotate()">
</div>

<script type = "text/javascript">
var tally = 0;
function rotate() {
if (tally == 0) {
document.images["img1"].src= "myimage2.jpg";
tally = 1;
return true;
}
else {
document.images["img1"].src= "myimage1.jpg";
tally = 0;
return true;
}
}
</script>

mymage2 is simply myimage1 rotated 180 degrees.


Label on Sainsbury's peanuts -- "Warning: contains nuts."

smartist
06-16-2008, 08:28 PM
that function works, but you have that one specific (rotate) button being applied to div1 img1.

what i need is to show only 1 (rotate button) which can be applied to several images: div1, div2, div3, div4 with the option to choose and select which div layer they want to rotate.

Philip M
06-16-2008, 10:12 PM
Here you are:-



<div id = "div1">
<img name = "img1" src = "image1.jpg">
</div>
<div id = "div2">
<img name = "img2" src = "image2.jpg">
</div>
<div id = "div3">
<img name = "img1" src = "image3.jpg">
</div>
<div id = "div4">
<img name = "img1" src = "image4.jpg">
</div>
<br><br>

<form name = "myform">
1<input type = "radio" name = "rad1" value = "1">
2<input type = "radio" name = "rad1" value = "2">
3<input type = "radio" name = "rad1" value = "3">
4<input type = "radio" name = "rad1" value = "4">
<input type = "button" value = "Click here to rotate the selected image" onclick = "rotate()">
</form>

<script type = "text/javascript">

var flip1 = 0;
var flip2 = 0;
var flip3 = 0;
var flip4 = 0;

function rotate() {
for (var i =0; i < document.myform.rad1.length; i++) {
if (document.myform.rad1[i].checked) {
var selected = document.myform.rad1[i].value;
}
alert ("You must select an image to rotate! ");
return false;
}

var imagenum = "img" + selected;

if (imagenum == 1) {
if (flip1 == 0) {
document.images["img1"].src = "image1R.jpg";
flip1 = 1
return true;
}
else {
document.images[imagenum].src = "image1.jpg";
flip1 = 0;
return true;
}
}

if (imagenum == 2) {
if (flip2 == 0) {
document.images["img1"].src = "image2R.jpg";
flip2 = 1;
return true;
}
else {
document.images[imagenum].src = "image2.jpg";
flip2 = 0;
return true;
}
}

if (imagenum == 3) {
if (flip3 == 0) {
document.images["img1"].src = "image3R.jpg";
flip3 = 1;
return true;
}
else {
document.images[imagenum].src = "image3.jpg";
flip3 = 0;
return true;
}
}

if (imagenum == 4) {
if (flip4 == 0) {
document.images["img1"].src = "image4R.jpg";
flip4 = 1;
return true;
}
else {
document.images[imagenum].src = "image4.jpg";
flip4 = 0;
return true;
}
}

}

</script>


The images are image1.jpg etc. and the rotated images are image1R.jpg etc.
Not too easy to see the point of it .......

smartist
06-17-2008, 12:34 AM
close but not quite, no radio buttons.

the user selects the div layer (which has an image in it). on click the blue outline will appear around the div layer (indicating that image is selected). because the image box is highlighted, the user can rotate it.

if no image is selected, then there is nothing to rotate.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum