Reproductor online con imagen sin marco

[eremitablog]

Quizá esta duda sea una tontería pero yo no tengo mucha idea de HTML así que aquí la lanzo por si alguien me puede ayudar

En este enlace podeis ver un post en mi blog de pruebas, en él hay un mp3 con reproductor que suena al pulsar sobre la imagen del play. Pero si os fijais esa imagen es demasiado grande. Sólo mide 12x12, pero aquí se ve con una especie de margen blanco alrrededor lo que hace que la linea se descoloque y el texto quede un poco más bajo.

Como se puede hacer que salga sin ese margen? Hay que modificar algo en el código del reproductor? en ese caso colgaré el código para que me indiqueis, gracias, Muchas gracias.

[jossss]

Tendrías que ponerle a la imagen un Border="0". yo creo que así te quedará bien

<table border="0">
<tr>
<td><a href="http://wiredset.com/media/colin_macintyre/How-Bout-I-Love-You-More.mp3"><img src="http://eremitablog.googlepages.com/play.gif" width="12" height="12" border="0"/></a></td>
<td>Colin Mcintyre - How Bout I Love You More</td>
</tr>
</table>

[eremitablog]

Gracias Josssss, el problema es que la imagen no la pongo yo tal cual. Me explico. Al poner un enlace a un archivo mp3, automáticamente se activa un reproductor y aparece la imagen del play a su izquierda. Osea que no puedo entraren el código para poner el border=0.

Este es el código del reproductor que hace que aparezca la imagen:

Código:

if(typeof(Delicious) == 'undefined') Delicious = {}
Delicious.Mp3 = {
	playimg: null,
	player: null,
	go: function() {
		var all = document.getElementsByTagName('a')
		for (var i = 0, o; o = all[i]; i++) {
			if(o.href.match(/\.mp3$/i)) {
				var img = document.createElement('img')
				img.src = 'http://url/play.gif'; img.title = 'Play'
				img.height = img.width = 12
				img.style.marginRight = '0.5em'
				img.style.cursor = 'pointer'
				img.style.border = '0'
				img.onclick = Delicious.Mp3.makeToggle(img, o.href)
				o.parentNode.insertBefore(img, o)
	}}},
	toggle: function(img, url) {
		if (Delicious.Mp3.playimg == img) Delicious.Mp3.destroy()
		else {
			if (Delicious.Mp3.playimg) Delicious.Mp3.destroy()
			var a = img.nextSibling, c=''
			if (document.defaultView && document.defaultView.getComputedStyle) c = document.defaultView.getComputedStyle(a,null).getPropertyValue('color')
			else if (a.currentStyle) c = a.currentStyle['color']
			c = c.replace(/^rgb|[ ()]/g, '')
			var hex = c.match(/^#?([a-f0-9]{6})$/), hexSm = c.match(/^#?([a-f0-9]{3})$/), rgb = c.match(/^([0-9]+),([0-9]+),([0-9]+)$/)
			if (rgb) { var c16 = "0123456789abcdef", c=''; for(var i=1,d;d=rgb[i];i++) { var j=d%16; c=c+c16.charAt((d-j)/16)+c16.charAt(j) } }
			else if (hex) c = hex[1]
			else if (hexSm) c = hexSm[1].charAt(0) + hexSm[1].charAt(0) + hexSm[1].charAt(1) + hexSm[1].charAt(1) + hexSm[1].charAt(2) + hexSm[1].charAt(2)
			else c = "000000"
			img.src = 'http://url/stop.gif'; img.title = 'Stop'; Delicious.Mp3.playimg = img;
			Delicious.Mp3.player = document.createElement('span')
			Delicious.Mp3.player.innerHTML = '<object style="vertical-align:bottom;margin-right:0.2em" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000"' +
			'codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0"' +
			'width="50" height="14" id="player" align="middle">' +
			'<param name="wmode" value="transparent" />' +
			'<param name="allowScriptAccess" value="sameDomain" />' +
			'<param name="flashVars" value="theLink='+url+'&amp;fontColor='+c+'" />' +
			'<param name="movie" value="http://del.icio.us/static/swf/mp3.swf" /><param name="quality" value="high" />' +
			'<embed style="vertical-align:bottom;margin-right:0.2em" src="http://del.icio.us/static/swf/mp3.swf" flashVars="theLink='+url+'&amp;fontColor='+c+'"'+
			'quality="high" wmode="transparent" width="50" height="14" name="player"' +
			'align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"' +
			' pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>'
			img.parentNode.insertBefore(Delicious.Mp3.player, img.nextSibling)
	}},
	destroy: function() {
		Delicious.Mp3.playimg.src = 'http://url/play.gif'; Delicious.Mp3.playimg = null
		Delicious.Mp3.player.removeChild(Delicious.Mp3.player.firstChild); Delicious.Mp3.player.parentNode.removeChild(Delicious.Mp3.player); Delicious.Mp3.player = null
	},
	makeToggle: function(img, url) { return function(){ Delicious.Mp3.toggle(img, url) }}
}

Delicious.addLoadEvent = function(f) { var old = window.onload
	if (typeof old != 'function') window.onload = f
	else { window.onload = function() { old(); f() }}
}

Delicious.addLoadEvent(Delicious.Mp3.go)

Tendría que modificar algo en este reproductor?

[jossss]

OK. Si este código si que puedes modificarlo copia las lineas que está en rojo para centrar la imagen con el texto y para ponerle el fondo transparente.

if(typeof(Delicious) == 'undefined') Delicious = {}
Delicious.Mp3 = {
playimg: null,
player: null,
go: function() {
var all = document.getElementsByTagName('a')
for (var i = 0, o; o = all[i]; i++) {
if(o.href.match(/\.mp3$/i)) {
var img = document.createElement('img')
img.src = 'http://url/play.gif'; img.title = 'Play'
img.height = img.width = 12
img.style.marginRight = '0.5em'
img.style.cursor = 'pointer'
img.style.verticalAlign = 'middle' //---> linea que añadimos para centrar verticalmente
img.style.backgroundColor= 'transparent' //---> fondo transparente
img.style.border = '0'
img.onclick = Delicious.Mp3.makeToggle(img, o.href)
o.parentNode.insertBefore(img, o)
}}},

[eremitablog]

Acabo de probarlo. El borde de la imagen sigue saliendo, pero ya está alineado con el texto y es transparente, así que muchisimas gracias Jossss, eres un crack.