Animate image in table cell

Home / Uncategorized / Animate image in table cell

Question:
I wanted to rotate image on table cell when the page loaded. When i appended the image table without creating image object, the image displayed along with other data. However, when i created image object to access image id for rotating image, i got [object HTMLImageElement] instead of image. I have separate function to rotate the image, it works i tested on other html images. I am not quite sure how to rotate image on table cell. The image source is project folder not html. The table is created dynamically. I couldn’t rotate element in the table cell. i need some tips
var table = document.getElementById("table");
for(i = 0 ; i < 7; ++i){ var row = table.insertRow(i); var cell1 = row.insertCell(0); cell1.style.border = '1px solid black'; var cell2 = row.insertCell(1); cell2.style.border = '1px solid black'; var cell3 = row.insertCell(2); cell3.style.border = '1px solid black'; var cell4 = row.insertCell(3); cell4.style.border = '1px solid black'; cell4.style.height ='80px' cell1.innerHTML = car[i]; cell2.innerHTML = model[i]; cell3.innerHTML = brand[i]; cell4.innerHTML = image; // i need to rotate image here } var image = new Image(); image.src = 'img/direction.png'; image.id = "imageID"; function rotateImage(degree) { $('imageID').animate({ transform: degree }, { step: function(now,fx) { $(this).css({ '-webkit-transform':'rotate('+now+'deg)', '-moz-transform':'rotate('+now+'deg)', 'transform':'rotate('+now+'deg)' }); } }); }


Answer:

Read more

Leave a Reply

Your email address will not be published. Required fields are marked *