css pour remplacer une image

Question

Je suis familier avec les techniques CSS pour remplacer le texte par une image. Par exemple, voici 9 d'entre eux: http: // CSS- tricks.com/nine-techniques-for-css-image-replacement/

Y a-t-il des techniques de remplacement des images? Y at-il de toute façon de définir l'arrière-plan d'une image à une image, puis cacher ou déplacer l'avant-plan de l'image (l'élément src d'image).

Je suis en train d'écrire une peau pour un site qui a une image que je veux remplacer. Merci.

  

De ce que je comprends qu'il essaie de le faire en CSS pur, sans modification de HTML ou JavaScript.

C'est exact. J'ajoute une nouvelle feuille de style à une page existante. Disons que je ne peux pas modifier HTML ou utiliser javascript.

Answer 1

Après un peu de bricoler, j'ai tout compris!

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) */
}

Cela rendra la hauteur et la largeur de l'image réelle 0, mais développer la boîte pour remplir la taille de l'image avec un rembourrage. Le seul inconvénient est il ne sera pas parfait dans les anciennes versions d'Internet Explorer.

Answer 2

Si vous avez un élément qui entoure l'image, par exemple un DIV, vous devriez être en mesure de définir une image d'arrière-plan (avec sans répétition et une position) sur elle, puis réglez l'image à display:none.

Sinon, voici une solution hasardeuse qui semble fonctionner. Il positionne l'image hors de l'écran, puis utilise le pseudo-élément :after pour définir une image d'arrière-plan. Il devrait être possible, mais vous aurez besoin de jouer avec les valeurs pour le faire fonctionner à droite. Il ne fonctionnera pas dans IE6 bien.

<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

La meilleure façon de remplacer les images est de définir la position d'arrière-plan. Créez d'abord les deux images différentes et les mettre un sur l'autre dans la même image. Supposons que votre élément de peau est pixels 50x50, vous souhaitez créer une image 50x100.

Ensuite, utilisez un code comme ceci:

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

pour afficher la deuxième image que vous déplacez l'arrière-plan par le montant requis. Vous pouvez soit utiliser javascript ou votre code côté serveur pour définir la classe appropriée.

Answer 4

Peut-être que vous pouvez définir une opacité d'un élément, puis définissez l'arrière-plan de l'image que vous voulez.

musicfreak. Je voulais dire en utilisant deux éléments

Answer 5

vous aurez assigner différentes classes pour les deux états alors écrire un peu de javascript pour avoir le changement d'image sur un événement.

par exemple:

.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>

Javascript:

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

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