rotate image on an angle

[barbieandtherockers]

I'm developing a website for a community band and came across this script

http://paste.css-standards.org/15230/

which is exactly what i'm after, however i'm having difficulty getting it to work.

I want a rectangular logo rotated on the screen by 10 degrees in front of a scrolling slideshow (also javascript) as I've set up at

http://www.qwab.com.au/test/symphonicband.html

but that particular script only works in IE.

When i use the cross-browser script to rotate the logo it appears straight in IE and disappears altogether in Firefox, but works ok if i take out the other javascript for the slideshow. See

http://www.qwab.com.au/test/symphonicband2.html.

I've tried putting both onload functions into the body tag but it still doesn't seem to be working?

Also, I'm struggling to work out the mathematics behind the number of degrees to tell it to rotate for non-IE browsers that's equivalent to -10 degrees in IE?

As you can probably tell I don't know that much about javascript and this script that i'm trying to customise was posted anonymously, so i can't just ask whoever created it!

Hope someone can help?

Cheers,
Rebecca

 

[BabyJeffy]

Does it not seem easier (and make more sense) to use an image editing program to create the image effect you want... rotation and all?

Choose the right tool for the job. In this case the right tool is a static image (that will show the same for all browsers regardless of Canvas support/javascript etc).

By all means, using javascript and the canvas object to do this is possible. You would need to get familiar with both scripts you are implementing and understand their load routines before you start to combine them, though!

Cheers,
Jeff

[tt]Jeff's Blog [!]@[/!] CodeRambler

http://www.coderambler.com/

http://www.coedit.co.uk/

[/tt]

Make sure your web page and css validates properly against the doctype you have chosen - before you attempt to debug a problem!

FAQ216-6094

 

[BillyRayPreachersSon]

Also, it sounds like you want the logo to appear to "watermark" the images. If this is the case, then you should forget about it not and use a service such as digimarc.com to digitally embed watermarks.

Either way the images can be ripped off, but at least with the latter option, you can easily prove you are the copyright holder.

Hope this helps,
Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[barbieandtherockers]

Thanks for the suggestions. I actually started off with a transparent gif created in photoshop but the edges looked really jagged, and as the slideshow that it's overlapping is both multicoloured and moving it's not so easy to do the usual trick and add a 1 pixel border around it using the background colour it is to appear against to make it look less jagged.

For some reason when the javascript rotates the image it appears a lot smoother.

Maybe i'll just stick with the script that only works in IE - chances are the majority of visitors will be using IE anyway, and if not at least it will still appear, only straight.

 

[BillyRayPreachersSon]

If the transparency is an issue, use a 32-big PNG with Alpha transparency.

Dan



Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]