Redimensionner l'image et ajouter une image de superposition sans utiliser de tables et sans perdre de style en xml

Question

Je suis en train de construire un système pour créer une «fausse vidéo embed» avec des vignettes et des boutons de lecture sur eux. Les images proviennent d'un service à une taille standard, n'ont donc pas d'autre choix que de les redimensionner en HTML. Une autre restriction est, le codeblock doit être autonome (comme un code d'intégration) et ne pas dépendre de feuilles de style externes. Je superpose un bouton de lecture en tant que PNG transparent. Ma première solution a consisté à fixer une marge négative sur l'image de superposition avec css en ligne comme ceci:

<div style="width:340px;height:280px;"> 
<img src="thumbnail.jpg" width="340" height="280"/> 
<div style="margin-top:-280px;"><a href="link-to.video.html"> 
<img src="transparent-embed-overlay.png" 
border="0"></a></div></div> 

Mais dans le flux XML pour le blog, le bouton de lecture transparente serait « tomber » le « embarque » parce qu'il ne reconnaîtrait pas le style en ligne. Cela m'a forcé à écrire une table à une cellule avec l'image comme image de fond. Mais alors, il m'est impossible de redimensionner la vignette d'image standard qui m'a été donnée, en me donnant la taille de vignette par défaut.

FWIW, voici le code que je recours à l'utilisation:

<table width="320" height="240" background="thumbnail.jpg"> 
<tr><td><a href="link-to-video.html"> 
<img src="transparent-overlay.jpg" border="0"></a></td></tr></table> 

Answer 1

Pouvez-vous envoyer un lien vers un exemple? D'après ce que je comprends vous modifiez dynamiquement la balise d'arrière-plan, mais vous ne pouvez pas redimensionner une image d'arrière-plan sans utiliser CSS 3, donc la compatibilité est compromise.

CSS La propriété Background peut contenir une couleur, un URL, des positions x, y et une répétition.

ie.

background: white url("mypic.jpg") 0 0 no-repeat; 

Quirksmode CSS 3 Backgrounds

Comment venez-vous ne pouvez pas utiliser une balise img dans la table que vous modifiez dynamiquement sa source à la nouvelle image et définir la hauteur et la largeur à tout?

Ou si votre problème est avec l'utilisateur faisant glisser les images, vous pouvez simplement utiliser un div plutôt qu'une image, définir sa hauteur et sa largeur, et placez-le sur les images.