Foros del Web » Creando para Internet » HTML »

Reproductor online con imagen sin marco

Estas en el tema de Reproductor online con imagen sin marco en el foro de HTML en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 07/06/2006, 04:41
 
Fecha de Ingreso: marzo-2005
Mensajes: 25
Antigüedad: 12 años, 8 meses
Puntos: 0
Pregunta Reproductor online con imagen sin marco

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.
__________________
Y el eremita bajó de la montaña... :pensando:
http://eleremita.blogspot.com
  #2 (permalink)  
Antiguo 07/06/2006, 06:54
 
Fecha de Ingreso: mayo-2006
Mensajes: 475
Antigüedad: 11 años, 7 meses
Puntos: 58
Tendrías que ponerle a la imagen un Border="0". yo creo que así te quedará bien
Cita:
<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>
  #3 (permalink)  
Antiguo 07/06/2006, 08:30
 
Fecha de Ingreso: marzo-2005
Mensajes: 25
Antigüedad: 12 años, 8 meses
Puntos: 0
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?
__________________
Y el eremita bajó de la montaña... :pensando:
http://eleremita.blogspot.com
  #4 (permalink)  
Antiguo 07/06/2006, 09:42
 
Fecha de Ingreso: mayo-2006
Mensajes: 475
Antigüedad: 11 años, 7 meses
Puntos: 58
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.


Cita:
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)
}}},

Última edición por jossss; 07/06/2006 a las 09:56
  #5 (permalink)  
Antiguo 08/06/2006, 02:56
 
Fecha de Ingreso: marzo-2005
Mensajes: 25
Antigüedad: 12 años, 8 meses
Puntos: 0
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.
__________________
Y el eremita bajó de la montaña... :pensando:
http://eleremita.blogspot.com
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta

SíEste tema le ha gustado a 1 personas (incluyéndote)




La zona horaria es GMT -6. Ahora son las 15:29.