[SOLUCIONADO] imagenes con ñ y/o acentos

rogama · #1 (**permalink**) 10/04/2014, 05:53

Tengo un cliente un poco particular y no hay manera de hacerle entender que no es el modo correcto, así que no me queda otra que adaptarme a el.

El caso es que lo que necesito es cambiar el fondo (background) de una pagina en concreto por la imagen de varias personas, tengo esas fotos en una carpeta, y el nombre de las fotos es el nombre de la persona en concreto terminado en jpg.
Como con un ejemplo es mas facil explicarse, os explico.

/img/personas/pepito-apellido-con-ñ.jpg
/img/personas/juanito-mi-nombre-solo-tiene-acentos-á-é-í.jpg

esas serian las rutas de las imagenes que dan problemas en cuestion

el codigo con el que lo estoy intentando es

Código:

nombre = replaceAll(nombre," ","-");
url = ('../img/personas/'+nombre+'.jpg');
$("body").css("background-image", 'url("'+url+'")');

No doy con la clave para poder enlazar a esas imagenes y cambiarlas por JS o JQuery

Alguna idea amigos??
Un abrazo y gracias de antemano

quimfv · #2 (**permalink**) 10/04/2014, 06:49

1.- La ruta es la que es? Tienes ese codigo en un directorio js.... y el html o lo que sea que lo usa en otro directorio, ojo con la ruta relativa.

2.- Ese replace all da el resultado esperado?

No podrías convencer al cliente de usar el identificador de la persona como nombre del fichero (el DNI p.e.), no le digas que debe hacer faltas de ortografia, y de paso le vendes un gestor de ficheros que le traduzca identificador por nombre....???

Artificium · #3 (**permalink**) 10/04/2014, 07:02

Bueno, algunos clientes son así, en todo caso lo que yo haría sería "limpiar" esos nombres de carpetas o nombres de archivos. Busca una función que te cree "slug" y utiliza eso en lugar del nombre original. Esa sería mi recomendación.

rogama · #4 (**permalink**) 10/04/2014, 07:06

Soy un gran cap......
Tema Solucionado estaba usando la ruta copiada desde la imagen por defecto que se la doy desde los css, y como tanto los css como los js estan guardados en un carpeta al mismo nivel que las imagenes, deje los ../ olvidando que al llamar al js desde el fichero php estoy en un nivel mas bajo...
En fin que mi problema era que no apuntaba a la carpeta correcta, aunque por otro lado la consola me arrojaba un error con el nombre codificado, y si mandaba imprimir por consola la ruta que le daba yo lo veia correctamente, asi que me pense que era problema de codificacion.

No hay nada como comer y tomarse un cafecito para resolver los problemas, por cierto os dejo este otro codigo que es con el que me dado cuenta del error por si a alguien le es de utilidad

Código:

var style = document.createElement('style');
style.type = 'text/css';
style.innerHTML = '.cssClass { background-image: url("img/personas/'+nombre+'.jpg"); }';
document.getElementsByTagName('head')[0].appendChild(style);

document.body.className = 'cssClass';

Gracias a todos

rogama · #5 (**permalink**) 10/04/2014, 07:07

Gracias, si
da el resultado esperado la funcion es esta por si le sirve a alguien

function replaceAll( text, busca, reemplaza ){
while (text.toString().indexOf(busca) != -1)
text = text.toString().replace(busca,reemplaza);
return text;
}

Artificium · #6 (**permalink**) 10/04/2014, 08:16

ReplaceAll? pero si en JavaScript existe un método que hace eso? para qué creas otra función que hace lo mismo? Se hace así mira:

var text = texto.replace(/buscar/g, reemplazar);

Pero se debe tomar en cuenta que "/buscar/g" es literal no variable y reemplazar sí es una variable. Nada más.

rogama · #7 (**permalink**) 11/04/2014, 01:03

No te digo que no tengas razon, pero tampoco que estes acertado en esto XD
Es cierto que JS tiene un metodo que es replace, pero lo unico que hace es reemplazar el primer caracter que se encuentre de los que tu le indicas en mi caso como has visto reemplazo los espacios en blanco por guiones, por lo que usando el metodo replace solo me reemplaza el primer espacio quedando algo asi Nombre-Apellido1 Apellido2 y no me sirve.

El metodo que os he dejado arriba, lo llevo usando algun tiempo, no recuerdo de donde lo saque, aunque como veis es solo un bucle que pasa tantas veces como sea necesario y dentro del mismo usa el replace de JS

quimfv · #8 (**permalink**) 11/04/2014, 02:08

Código HTML:

Ver original<!DOCTYPE html>
<html>
<body>
 
<p id="demo">Tengo esto</p>
 
<button onclick="cambia()">Cambia</button>
 
<script>
function cambia()
{
var str = document.getElementById("demo").innerHTML; 
var acambiar="Tengo esto";
var esto="Ahora ya no";
var res = str.replace(acambiar,esto);
document.getElementById("demo").innerHTML=res;
}
</script>
 
</body>
</html>

Los dos parametros de replace pueden ser una variable.

Artificium · #9 (**permalink**) 11/04/2014, 11:57

Lo que no sabes es que el método replace usa como paramétro una expresión regular y no una cadea de texto común. Te daré un ejemplo para reemplazar todos los carácters que encuentre en una cadena.

Código PHP:

  var cadena = "cadena-con-guiones";
var otraCadena = cadena.replace(/-/g, ' ');

Debes poner tal y como lo pongo, entre los dos slash la cadena de texto a reemplazar y una "g" después que le indica que debe reemplazar todas las veces que encuentre el carácter y no solo una vez.

La función que usas tiene la desventaja de hacer mucho proceso, aunque seguro no se siente. Pero en todo caso usa lo que ya tiene el lenguaje, y de paso te sugiero que aprendas un poco de expresiones regulares que te podría servir más adelante.