المغلق لاستبدال صورة

Question

وأنا على دراية تقنيات CSS ليحل محل النص مع الصورة. على سبيل المثال، وهنا 9 منهم: HTTP: // css- tricks.com/nine-techniques-for-css-image-replacement/

هل هناك أي تقنيات لاستبدال الصور؟ هناك على أية حال لضبط الخلفية من صورة إلى صورة ومن ثم إخفاء أو نقل المقدمة من الصورة (عنصر صورة SRC).

وأنا أحاول أن أكتب الجلد لموقع يحتوي على الصورة التي أريد أن يحل محل. شكرا.

<اقتباس فقرة>   

ومن كيف أفهمها انه يحاول القيام بذلك في CSS نقية، مع أية تغييرات على HTML أو جافا سكريبت.

وهذا هو الصحيح. انا إضافة أنماط جديدة إلى صفحة موجودة. اسمحوا أقول إنني لا يمكن تعديل HTML أو استخدام جافا سكريبت.

Answer 1

وبعد قليل من ترقيع، وأنا أحسب من ذلك!

img.someclass {
  background: url("NEW IMAGE URL") top right;
  height: 0;
  width: 0;
  padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */
}

وهذا سيجعل من ارتفاع وعرض الصورة الفعلية 0، ولكن توسيع مربع لملء حجم الصورة مع الحشو. الجانب السلبي الوحيد لهذا هو أنه لن ننظر إلى الكمال في الإصدارات القديمة من إنترنت إكسبلورر.

Answer 2

إذا كان لديك عنصر المحيطة الصورة، على سبيل المثال وDIV، يجب أن تكون قادرا على تعيين صورة خلفية (مع عدم تكرار وموقف) على ذلك، ثم تعيين الصورة لdisplay:none.

وبدلا من ذلك، وهنا حل العشوائي الذي يبدو للعمل. ومن المواقف الصورة خارج الشاشة، ثم يستخدم :after الزائفة عنصر لتعيين صورة الخلفية. وينبغي أن يكون عملي، ولكن ستحتاج إلى عزف مع القيم للحصول على عمل الصحيح. فهو لن يعمل في IE6 بالرغم من ذلك.

<style>
  img.test {
    background: url('image_to_show.png') no-repeat right top;
    position: relative;
    left: -16000px;
  }
  img.test:after {
    content: ".";
    color: transparent;
    display: block;
    width: 16000px;
  }
</style>

<img class="test" src="image_to_hide.png">

Answer 3

وأفضل طريقة لاستبدال الصور هي لتعيين موضع الخلفية. أولا إنشاء الصورتين مختلفة ووضعها واحدة فوق الأخرى في نفس الصورة. يقول عنصر بشرتك بكسل 50X50، وكنت خلق صورة 50x100.

وثم استخدام بعض التعليمات البرمجية مثل هذا:

.skinElement1 {
  background: #fff url("image.png") no-repeat 0 0;
}
.skinElement2 {
  background: #fff url("image.png") no-repeat 0 -50px;
}

وهكذا لعرض الصورة الثانية قمت بنقل الخلفية بنسبة المبلغ المطلوب. هل يمكن إما استخدام جافا سكريبت أو رمز server-side لتعيين الدرجة المناسبة.

Answer 4

وربما يمكنك تعيين التعتيم عنصر ثم قم بتعيين خلفية الصورة التي تريدها.

وMusicfreak: قصدته باستخدام اثنين من عناصر

Answer 5

وسيكون لديك تعيين فئات مختلفة للدولتين ثم كتابة بعض جافا سكريبت لتغيير صورة على حدث.

وعلى سبيل المثال:

.firsImage { background:transparent url(/images/someImage.jpg) no-repeat; }
.secondIMage { background:transparent url(/images/image2.jpg) no-repeat; }

وHTML:

<div id="imageDiv" class="firstImage"> some content </div>
<a onclick="changeImage()">Change the image!</a>

وجافا سكريبت:

function changeImage(){
    var imageDiv =  document.getElementById("imageDiv")

    if ( imageDiv.className === "firsImage" )
        document.getElementById("imageDiv").className = "secondImage"
    else
        document.getElementById("imageDiv").className = "firstImage"
}