3

私には小さな要件があります：javascriptを介して別の画像の上に画像を追加する必要があります。提案をお願いします！

チキン

function sampleImage()
{     
    document.getElementById('img1').innerHTML='<img src="C:\Users\rajasekhark\Desktop\assets\images\Cock.png" />';
}
4

5 に答える 5

2

2つの画像をで囲み、<div>次のCSS属性を使用する必要があります。

div {
    position: relative;
}

​#img2 {
    position: absolute;
    top: 100px;
    left: 100px;
}

http://jsfiddle.net/C8hh4/を参照してください

2番目の画像は最初の画像の兄弟である必要があります。これは正当なHTMLではないため、子孫にすることはできません。<div>位置が必要です。relativeそうでない場合、の絶対位置は、デフォルトの位置を持たない#img2最も近い祖先を基準にして計算されます。static

の値はtop、外側の画像の高さと内側の画像の高さの差の半分である必要があり、同様に左/幅の値である必要があります。

コンテンツが静的である場合は、それらの値を手動で計算します。動的な場合は、JSを使用してスタイルを設定します。

var img1 = $('#img1')[0];
var img2 = $('#img2')[0];

var top = 0.5 * (img1.height - img2.height);
var left = 0.5 * (img1.width - img2.width);

$(img2).css({top: top, left: left});
于 2012-08-29T13:53:50.437 に答える
1

なぜJavaScriptなのか？もちろん、キャンバスを使用してそれらを相互にペイントすることもできますが、単純なCSSをお勧めします。

<img
  style="padding: 20px 7px, background: url('/some/frame.png')"
  src="/cock.jpg"
  width="50px" height="40px"
/>

そのためにクラスを使用するかもしれません、インラインスタイルはちょうど短いです。

于 2012-08-29T13:52:40.307 に答える
1

相対ポジショニングを使用できます。画像をposition:relative;top:VALUE; 積み重ね、値を-HalfHeightOfBackgroundImage-HalfHeightOfForegroundImageに設定する必要があります。

別のアプローチは、前景画像をdivでラップし、背景画像を。として設定することbackground-imageです。

于 2012-08-29T13:53:42.667 に答える
0

あなたはすべきです（私はjqueryタグを見ました）：

$("#img1 img").first().prop("src", "C:\Users\rajasekhark\Desktop\assets\images\Cock.png");

そしてアドバイス：ローカルディスクへのフルパスを使用しないでください...

于 2012-08-29T13:51:25.663 に答える
-1

jQueryオプションは

$("#img1").prop("src","blahblah.jpg");

私はあなたの質問を本当に理解していませんが。

ホバー時に画像を変更する必要がある場合は、おそらくこれが役立ちます...

$("#img1").hover(
    function () {
    $(this).prop("src","newImage.jpg");
    }, 
    function () {
    $(this).prop("src","originalImage.jpg");
});

編集：

OK ...必要なのは、背景画像として緑色のフラッシュカードを使用したdivです。そして、そのdivにコック画像を配置しますが、display：none;に設定します。

次にホバーすると、コックの画像を表示します。

$("#containerDiv").hover(
    function () {
    $(this).find("img").show();
    }, 
    function () {
    $(this).find("img").hide();
});
于 2012-08-29T13:50:41.327 に答える