![](http://oshiete.xgoo.jp/images/v2/pc/qa/question_title.png?8acaa2e)
ボタン押下するたびに、画像を90度→180度→270度→戻るという風に
角度変更処理をしたいと考えています。
そこで以下の様なJavaScriptで画像をPタグで囲んだエリア"AREA"をDXImageTransform.Microsoft.BasicImageで角度変更を行いました。
===============================================
document.getElementById("AREA").style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)"
===============================================
IEでは正常でしたが、FireFox3.0では動作しませんでした。
progid:DXImageTransform.Microsoft.BasicImageはFireFoxは動作しないのでしょうか?
そうであれば、FireFoxで動作可能な方法をお教え頂けないでしょうか?
No.1ベストアンサー
- 回答日時:
おもいっきり Microsoft と入っていることから、IE向けのオブジェクトのようにお見受けします。
他ブラウザようにあるかどうかまでは探してません。
あらかじめ回転した画像を用意しておいて差し替えてみては?
参考URL:http://www5e.biglobe.ne.jp/~access_r/hp/filter/
No.2
- 回答日時:
====================Q4370469-1.xhtml========================
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dt …
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Q4370469 TestCase 1</title>
<script type="application/ecmascript">
//<![CDATA[
function init(){
var svg = document.getElementById("hoge").contentDocument.rootElement;
var img = svg.getElementsByTagNameNS("http://www.w3.org/2000/svg","g")[0];
img.setAttribute("transform","rotate(45,50,50)");
}
//]]>
</script>
</head>
<body onload="init();">
<p><object id="hoge" type="image/svg+xml" data="Q4370469-1.svg"/></p>
</body>
</html>
<!--
This sample rotates the image 45 degrees.
Before you use this code,
you MUST keep in mind you have to remove ZERO WIDTH SPACE added by oshiete-goo's system.
you MUST prepare Q4370469-1.svg and Q4370469-1.png.
I used 100px * 100px square filled with plain red.
SVGSVGElement.getElementById not implemented
https://bugzilla.mozilla.org/show_bug.cgi?id=280 …
SVG images in CSS
https://bugzilla.mozilla.org/show_bug.cgi?id=231 …
external SVG not loaded from img tag
https://bugzilla.mozilla.org/show_bug.cgi?id=276 …
This solution does not seem to work for safari if this document is provided as text/html.
I'm not sure the following stuffs will do.
CSS Transforms
http://webkit.org/specs/CSSVisualEffects/CSSTran …
Add support for WebKit's CSS3 Transform proposal
https://bugzilla.mozilla.org/show_bug.cgi?id=435 …
For Gecko 1.9.1+(not for Gecko 1.9)
HTML 5 Canvas
http://www.w3.org/html/wg/html5/#the-2d-context
-->
===========Q4370469-1.svg====================
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g xml:id="target" transform="rotate(0,0,0)">
<desc>This graphic links to an external image
</desc>
<image x="0" y="0" width="100px" height="100px" xlink:href="Q4370469-1.png" >
<title>My image</title>
</image>
</g>
</svg>
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS ブロックエディターで作りつつ、画像を挿入しつつ、画像にスタイルシートのコードを付ける方法はありますか 1 2022/08/23 18:46
- HTML・CSS 【HTML】【CSS】【Swiper】 元の画像は横1200×縦600なのですが、実際のサイト上に反 5 2022/07/16 13:57
- Visual Basic(VBA) PowerPoint VBA で画像の鮮明度を変更する方法がわかりません 2 2023/03/24 13:34
- Firefox(ファイヤーフォックス) Firefoxでグーグルの検索画面が変です 2 2022/09/20 19:25
- JavaScript html5に変えるとスライドショーが消えてしまった。 3 2022/03/26 19:53
- Android(アンドロイド) AndroidでFirefoxブラウザーを使っていますが特定の画像がダウンロード出来ませんでした。 1 2022/09/17 13:11
- JavaScript clear機能を失わずにファイルアップロード機能を作成したい 3 2023/06/10 16:12
- HTML・CSS CSSが効かずどのように指定すれば良いか分からないのでアドバイスお願い致します 2 2023/06/07 12:25
- モニター・ディスプレイ 画像解像度について 4 2022/05/30 16:05
- 数学 空間図形:離れた線分の間の角度 4 2022/11/08 14:53
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
【javascript】ロールオーバー...
-
オンマウスで画像と文字を同時...
-
続き] divの背景画像を、徐々...
-
javascript 時計24時間表示
-
JAVAで画像をボタンで切り替え...
-
CSVファイルからの読取について
-
MAX関数を使ってからLEFT JOIN...
-
変数内容をHTML内で表示する方法
-
指定したパスが現URLに含まれて...
-
JavaScriptで、?マークとコロ...
-
Slick.jsのオプションrtlについて
-
フッター上部に謎の隙間
-
JavaScript スライドの画像にリ...
-
getElementByIdの戻り値がnull...
-
jQuery FlexSliderのカルーセ...
-
css固定したフッターが本文と重...
-
lightbox2をiframeから外に表示...
-
折りたたみ部分にアンカーでリ...
-
iframe内からjQueryで指定したい
-
オープニングにアニメーション...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
window.openで値の渡し方を教え...
-
this.src等のthisについて
-
jQueryでサーバー上のファイル...
-
imgのsrcに値を設定するには
-
画像の座標位置取得
-
イベントハンドラを完全に外部...
-
連番画像「次へ」「前へ」で、...
-
画像の下に説明文をつけて切り...
-
JS switch文について
-
画像と文字を同時に切り替えたい
-
スマートな外部javaでロールオ...
-
一定時間で画像とリンク先を変...
-
javascript 時計24時間表示
-
JavaScriptでシンプルなスライ...
-
これはどんなJavaScriptなので...
-
JavaScriptでリクエストを飛ば...
-
FirefoxでonMouseOver/Outの動...
-
divの背景画像を、徐々に表示さ...
-
Javaにて画像を残像が残りつつ...
-
時間によって表示される画像を...
おすすめ情報