Placer une image sur une autre image

J'ai une image comme par exemple:Placer une image sur une autre image

et voudrait quand je passe la souris, pour obtenir une autre image transparente sur elle. c'est le css:

#imagebox { 

Width:338px; 
margin-left:10px; 
background-color:#12100e; 
height:221px; 
float:left; 
margin-bottom: 10px; 
border: 1px solid #232323; 
} 

#imagebox:hover { 
background: url("upplyst-platta.png") no-repeat 0 0; 
}

Mais il est derrière l'image, une façon de résoudre ce css? ou je dois le réparer avec javascript? L'image sur le fond est généré à partir db (plus tard) et ne peut pas être dans css

EDIT: Je vu cette solution: http://jsfiddle.net/bazmegakapa/Zf5am/ mais ne peut le faire fonctionner. même si je copie tout le code, quel peut être le problème?

Source

2011-05-20 Jimmy

Que diriez-vous d'utiliser Jquery pour votre usage, ce serait beaucoup plus simple, jetez un coup d'oeil à http://api.jquery.com/hover/ –

Pouvez-vous bidouiller ceci? –

ici jeter un oeil à ce tutoriel http://bavotasan.com/tutorials/a-simple-mouseover-hover-effect-with-jquery/ –

Utilisez le z-index à l'autre quel ordre les éléments sont dessinés dans Vous pouvez trouver plus d'informations ici. http://www.w3schools.com/css/pr_pos_z-index.asp

Quelques autres choses aussi, vous pouvez ajouter le placement d'image par rapport basé sur la position des parents et où vous dites Width dans le premier style, il devrait être tout en minuscules width :-P

Espérons que c'est ce que vous cherchez.

Source

2011-05-20 16:50:18 kstev

Essayé, mais je n'ai obtenu aucun résultat:/Voulez-vous l'essayer? – Jimmy

N'obtient toujours aucun résultat, et css est insensible à la casse. Comment bout 'un exemple? – Jimmy

@Jimmy: Comment l'avez-vous essayé? – Marcin

#imagebox { 
Width:338px; 
margin-left:10px; 
background-color:#12100e; 
height:221px; 
float:left; 
margin-bottom: 10px; 
border: 1px solid #232323; 
background: url("upplyst-platta.png") no-repeat 0 0; 
} 
#imagebox img{ 
display: none; 
} 
#imagebox:hover img{ 
display: block; 
}

et la structure HTML doit être:

<div id="imagebox"> <img src="iWantToShowThisImage.jpg" /></div>

Source

2011-05-20 17:06:36 Yman

Cela ne fonctionne pas, vous l'avez dans le mauvais ordre. l'image im montrer devrait être là à tout moment, quand je survolerai la deuxième image apparaît dessus ... dans votre code l'image n'apparaît que lorsque je fais de la souris, et aussi c'est au-dessus de l'image transparente. – Jimmy

puis remplacez simplement "upplyst-platta.png" par "IAlwaysWantToShowThisImage.jpg". Juste Tweak la commande et vous obtenez le résultat que vous voulez, et "iWantToShowThisImage.jpg" est l'image que vous voulez montrer sur hover ..... – Yman

Le problème est, les images que je veux toujours afficher est dynamiquement ajouté à la page ... donc ne peut pas le mettre en css – Jimmy

espère que cela fonctionne pour vous ou fournit une source d'inspiration: jsfiddle example #1

Mise à jour basé sur le premier commentaire: Voulez-vous dire comme ça ? jsfiddle example #2

2ème mise à jour basé sur modifier en question: Eh bien, la raison pour ne pas travailler est que le hoverimage est non seulement transparente: il est une modification de l'original. Mais cela clarifie votre souhait. Je pense vraiment que mon premier exemple est la solution que vous cherchez. Remplacez simplement l'URL de la feuille de style par votre nom de fichier png transparent.

Source

2011-05-20 18:50:03 NGLN

Ce n'était pas à moitié mauvais ... Mais il met l'image transparente sur l'image arrière, je veux qu'il passe par-dessus le dos (la .Imagebox). serait vraiment bien si cela pouvait être fait. – Jimmy

Vous voulez dire comme ceci: http://jsfiddle.net/8g5p6/4/? – NGLN

Placer une image sur une autre image

Répondre

Questions connexes