Foros del Web » Creando para Internet » HTML »

¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Estas en el tema de ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ? en el foro de HTML en Foros del Web. Hola buenas, estoy estancado en mi web porque queria agregar en numeros contorno y al ser irreconocible para internet explorer (solo funciona en firefox y ...
  #1 (permalink)  
Antiguo 05/09/2010, 12:08
 
Fecha de Ingreso: febrero-2008
Mensajes: 134
Antigüedad: 9 años, 9 meses
Puntos: 1
Pregunta ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Hola buenas, estoy estancado en mi web porque queria agregar en numeros contorno y al ser irreconocible para internet explorer (solo funciona en firefox y en chrome) pues he visto que la mejor solucion es usar FIR (Fahrner Image Replacement) para que los numeros del 0 hasta el 9 en un determinado DIV de una pagina pues se sustituyan por imagenes que ya tengo creadas en photoshop que quedan con un contorno perfecto, a traves del firebug estuve observando que codigo usan unas determinadas web para conseguir ese efecto pero no se como lo consiguen ya que en .css no insertan los enlaces de las imagenes ni el codigo para que se sustituyan por los numeros y el unico codigo que introducen es en el html, ejemplo del codigo:

<div style="width: 150px; height: 28px; vertical-align: bottom;">
<img height="31" border="0" align="bottom" src="/imagenes/numeros/xxx.../1.gif">
<img height="31" border="0" align="bottom" src="/imagenes/numeros/xxx.../6.gif">
<img height="31" border="0" align="bottom" src="/imagenes/numeros/xxx.../8.gif">
<img height="31" border="0" align="bottom" src="/imagenes/numeros/xxx.../coma.gif">
<img height="25" border="0" align="bottom" src="/imagenes/numeros/xxx.../9.gif">
<img height="25" border="0" align="bottom" src="/imagenes/numeros/xxx.../5.gif"></div>



Consiguen que *solo los numeros del precio* en la pagina web se muestren de la siguiente manera:






Y mi pregunta es: ¿Qué codigo deberia usar ya sea en html, .css, etc para que pueda sustituir solo los numeros de los precios por imagenes y que al actualizar los precios se cargen automaticamente dichas imagenes sin que tenga que añadir por cada numero distinto continuamente las imagenes una a una?


Solicito ayuda amigos, saludos cordiales
  #2 (permalink)  
Antiguo 05/09/2010, 16:44
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

El caso es que como dices, ya tienes hechas tus imágenes, si no una buena opción sería utilizar CSS @fontface con alguna fuente de tu agrado.
Tambien se puede hacer con php, como si fuera una suerte de contador gráfico (si ando con tiempo voy a hacer algo al respecto y te aviso),
en este artículo describen otra técnica basada en php, que usa las librerías GD y una fuente (ttf)

http://www.alistapart.com/articles/dynatext/



Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #3 (permalink)  
Antiguo 05/09/2010, 17:08
 
Fecha de Ingreso: febrero-2008
Mensajes: 134
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Gracias por contestar, lo de CSS @fontface lo leí en librosdelweb pero aparte de que mis conocimientos son muy limitados (tan solo se un poquito de html) pues preferia usar la sustitucion del texto por imagenes ya que con las imagenes quedaria mucho mejor como he obserbado en otras webs, el problema es que no se cual es el codigo que deberia de insertar para que las imagenes sustituyesen a los numeros. ¿No sabes ningun codigo que haga esa funcion y que sea en html?
saludos cordiales
  #4 (permalink)  
Antiguo 05/09/2010, 17:23
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

lepe:
Esos son los links que te deje, pero lamentablemente necesitas si o si de otro lenguaje, php preferentemente.
Usar Fontface es muy simple, compatible con todos los navegadores y solo requiere de css. Te aconsejo que vayas buscando alguna tipografía de tu agrado, hay numerosos lugares con tipografias ttf free.

Date una vuelta por http://www.fontsquirrel.com/fontface ahi hay kits de fuentes prefabricados listos para usar, o con tu propia fuente, generar tu kit en
http://www.fontsquirrel.com/fontface/generator

Ahi te crea todo, incluso el html/css

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #5 (permalink)  
Antiguo 05/09/2010, 19:21
 
Fecha de Ingreso: febrero-2008
Mensajes: 134
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Muchas gracias por tus propuestas, el Fontface que comentas es muy interesante y lo tendré muy en cuenta para futuras modificaciones, el caso es que yo buscaba crear unos numeros *con contorno de diferentes colores* y en el fontface hay pocos estilos donde elegir en ese aspecto, lo intente de una forma como comentaba [URL="http://www.forosdelweb.com/f91/como-poner-borde-no-sombreado-numeros-que-funcione-internet-explorer-835567"]aquí[/URL] pero no lo reconocia internet explorer, para conseguir lo que se explica en alistapart tendria que pegar el codigo php de [URL="http://www.alistapart.com/d/dynatext/heading.txt"]http://www.alistapart.com/d/dynatext/heading.txt[/URL] en algun directorio de mi web y luego ¿Donde indicaria la ruta de mis imagenes para que sean llamadas por ese codigo?
salu2
  #6 (permalink)  
Antiguo 05/09/2010, 21:49
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

lepe:

si esa es la script, pero la acabo de probar y no la puedo hacer funcionar, es curioso, me crea las imágenes pero el navegador no las muestra. Y tampoco está muy documentada. De todas maneras, no te hubiese arreglado nada porque equivale a hacer un fontface (en realidad estoy viendo que todas estas tecnicas con php han quedado obsoletas, teniendo en cuenta que fontface lo hace más simple y da soporte para cualquier navegador).
Igual me quedé con la espina, asi que voy a ver si hago una script que reemplaze los numeros por imágenes de los mismos. te tendré al tanto

saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #7 (permalink)  
Antiguo 06/09/2010, 12:42
 
Fecha de Ingreso: febrero-2008
Mensajes: 134
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

De acuerdo emprear, estaré muy atento a lo que puedas testear
Hasta pronto ;))
  #8 (permalink)  
Antiguo 06/09/2010, 15:46
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

lepe:
Creo que lo tengo
es una script en php, deberias ajustarla a tu código



Código PHP:
Ver original
  1. <?php  
  2. $ext = "gif";
  3. $numero = $_GET['valor'];
  4. if (!isset($numero)){
  5. echo "No se definió un valor";
  6. //exit();
  7. }
  8.  
  9. $img_url = 'http://foros.emprear.com/php/numeros/img/';
  10.  
  11. $len = strlen($numero);
  12. for ($i=0;$i<$len;$i++){
  13. $sub = substr($numero,$i,1);
  14. if ($sub == '.'){
  15. $sub = "punto";
  16. }
  17. echo "<img src='" . $img_url . $sub . "." . $ext . "' border='0' alt='' />";
  18. }
  19. echo "<img src='" . $img_url . "euro.gif' border='0' alt='' />";
  20. ?>



mira esta demo

http://foros.emprear.com/php/numeros/numeros.php

ahi hay un rar para descargar con el código
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #9 (permalink)  
Antiguo 07/09/2010, 19:17
 
Fecha de Ingreso: febrero-2008
Mensajes: 134
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Cita:
Iniciado por emprear Ver Mensaje
lepe:
Creo que lo tengo
es una script en php, deberias ajustarla a tu código



Código PHP:
Ver original
  1. <?php  
  2. $ext = "gif";
  3. $numero = $_GET['valor'];
  4. if (!isset($numero)){
  5. echo "No se definió un valor";
  6. //exit();
  7. }
  8.  
  9. $img_url = 'http://foros.emprear.com/php/numeros/img/';
  10.  
  11. $len = strlen($numero);
  12. for ($i=0;$i<$len;$i++){
  13. $sub = substr($numero,$i,1);
  14. if ($sub == '.'){
  15. $sub = "punto";
  16. }
  17. echo "<img src='" . $img_url . $sub . "." . $ext . "' border='0' alt='' />";
  18. }
  19. echo "<img src='" . $img_url . "euro.gif' border='0' alt='' />";
  20. ?>



mira esta demo

[url]http://foros.emprear.com/php/numeros/numeros.php[/url]

ahi hay un rar para descargar con el código

Hola emprear eres un genio ese codigo es justo lo que buscaba, mil gracias, intentaré meterlo en mi documento y hacer que funcione como sea aunque no sepa php :)
¿En principio ese codigo php podria meterlo en una pagina con extension .tpl e insertandolo dentro del div donde deseo que haga esa funcion de la sustitucion ya deberia de funcionar?

Pd: El ejemplo del "generador" es una maravilla
  #10 (permalink)  
Antiguo 07/09/2010, 19:31
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Lepe:

tpl me suena a plantilla, solo deberias asegurarte que se procese como php.
de la script lo que cuenta es esto

$img_url = 'http://foros.emprear.com/php/numeros/img/';
$len = strlen($numero);
for ($i=0;$i<$len;$i++){
$sub = substr($numero,$i,1);
if ($sub == '.'){
$sub = "punto";
}
echo "<img src='" . $img_url . $sub . "." . $ext . "' border='0' alt='' />";
}
echo "<img src='" . $img_url . "euro.gif' border='0' alt='' />";


en la variable $ext podrias poner directamnete la extension de tus imágenes.
y solo tendrías que buscar la forma de que $numero sea el valor de tu precio.
Lo que no tengo claro es como se genera ese numero, es dinámica su actualización? o lo haces manualmente y pones

Producto Descripcion 123.45€

Bueno, por lo menos ya estas más encaminado, tambien creo que si no usas php se podria hacer algo simmilar en Javascript


Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #11 (permalink)  
Antiguo 07/09/2010, 19:44
 
Fecha de Ingreso: febrero-2008
Mensajes: 134
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Hola de nuevo emprear, pues la verdad es que no sabria decirte si el .tpl que tengo yo es una simple plantilla o no, pero me da que tiene algo de php porque tiene codigos un poco raros, la plantilla donde queria insertar ese codigo es muy corta tan solo consta de 30 lineas y estoy haciendo unas pruebas y subiendolo a mi servidor y de momento se me queda la pantalla en blanco Intentaré seguir probando cambiando la posicion del codigo y las etiquetas de cierre y a ver si doy con la tecla magica :)) Si quieres podria pasarte el .tpl para que veas si es php o no, lo que pasa es que no se como subirtelo, saludos
  #12 (permalink)  
Antiguo 08/09/2010, 15:03
Avatar de _cronos2
Colaborador
 
Fecha de Ingreso: junio-2010
Mensajes: 2.062
Antigüedad: 7 años, 6 meses
Puntos: 309
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Con JS también se puede hacer si te interesa.
Saludos (:
__________________
" Getting older’s not been on my plans
but it’s never late, it’s never late enough for me to stay. "
Cigarettes - Russian Red
  #13 (permalink)  
Antiguo 08/09/2010, 17:17
 
Fecha de Ingreso: febrero-2008
Mensajes: 134
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Hola muy buenas cronos, ¿podrias mostrarnos como seria dicho codigo? ¿Podria insertarse dicho codigo en ficheros .tpl?
saludos
  #14 (permalink)  
Antiguo 08/09/2010, 19:11
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Lepe

como te indiqué la script original que te pasé la convertí en una función, podés verla aqui
http://foros.emprear.com/php/numeros/sust_img.php ó descargarla en
http://foros.emprear.com/php/numeros/sust_img.rar

Lo mismo, pero hecho con JavaScript quedaría así

Código HTML:
Ver original
  1. <?xml version="1.0" encoding="utf-8"?>
  2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  3. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  4. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
  5. <title>Sustituir números por gráficos - Versión Javascript</title>
  6. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  7. <meta name="description" content="x" />
  8. <meta name="keywords" content="x" />
  9. <meta http-equiv="Content-Language" content="ES" />
  10. <meta http-equiv="Content-Script-Type" content="text/javascript" />
  11. <meta http-equiv="imagetoolbar" content="no" />
  12. <meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" lang="es" />
  13. <meta name="author" content="http://emprear.com"  xml:lang="es" lang="es" />
  14. <script type="text/javascript">
  15. //<![CDATA[
  16. function sust_img(numero){
  17. var img_url = 'http://foros.emprear.com/php/numeros/img/';
  18. var ext = 'gif';
  19. var lgt = numero.length;
  20.  
  21. for (i=0;i<lgt;i++){
  22. var s = numero.substr(i,1);
  23. if (s == '.'){
  24. s = "punto";
  25. }
  26. document.write("<img src='" + img_url + s + "." + ext + "' border='0' alt='' />");
  27. }
  28. document.write("<img src='" + img_url + "euro.gif' border='0' alt='' />");
  29. } //fin funcion
  30.  
  31. //]]>
  32. </head>
  33. <script type="text/javascript">
  34. //<![CDATA[
  35. sust_img('90788.3453');
  36. //]]>
  37. </body>
  38. </html>



pero seguimos con lo mismo, ¿dónde se genera tu número? y como integrarla en tu tpl

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #15 (permalink)  
Antiguo 11/09/2010, 11:02
 
Fecha de Ingreso: febrero-2008
Mensajes: 134
Antigüedad: 9 años, 9 meses
Puntos: 1
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Despues de el fantastico codigo que nos ha facilitado emprear ya "solo" nos queda insertarlo en una plantilla .tpl que tiene combinacion de html y php ¿Smarty?
A ver si alguien que sepa el funcionamiento de integrar codigo a archivos .tpl nos echa una mano para adjuntar el codigo de emprear

saludos cordiales
  #16 (permalink)  
Antiguo 12/09/2010, 01:32
Avatar de emprear
Colaborador
 
Fecha de Ingreso: junio-2007
Ubicación: me mudé
Mensajes: 8.388
Antigüedad: 10 años, 5 meses
Puntos: 1567
Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

lepe:
por lo visto seguis en la lucha con eso, tendrías que empezar a hacer algunas pruebas

en la tpl que me mandaste, que comienza con

{if isset($products)}
<!-- Products list -->
<ul id="product_list" class="clear">


arriba de <-- Product list -->
inserta la siguiente script (el numero podes cambiarlo para verificar y el literal no es de la script sino algo que lei para insertar codigo en el smarty)


{literal}
<script type="text/javascript">
sust_img('533.987');
</script>
{/literal}


y en el head del php que contiene esa plantilla

<script type="text/javascript" src="sustituir.js"></script>

Por último desde http://foros.emprear.com/php/numeros/ baja y guarda en tu servidor sustituir.js y fijate los resultados.
Esta script es la version javascript de la funcion que hice en php. Hahy un ejemplo en sustituir.html . Si funciona tenes qie buscar como hacer que en lugar del numero se inserte el código smarty equivalente.

Esrtuve leyendo un poco de la doc de smarty, mira esto
http://www.smarty.net/manual/es/language.escaping.php
y
http://www.smarty.net/manual/es/lang...on.literal.php

El tema es encontrar la sintáxis apropiada

Saludos
__________________
La voz de las antenas va, sustituyendo a Dios.
Cuando finalice la mutación, nueva edad media habrá
S.R.
  #17 (permalink)  
Antiguo 12/09/2010, 09:45
 
Fecha de Ingreso: febrero-2008
Mensajes: 134
Antigüedad: 9 años, 9 meses
Puntos: 1
De acuerdo Respuesta: ¿ Que codigo usar para FIR (sustitucion de NUMEROS por IMAGEN) ?

Bueno, bueno, podemos decir que por fin he conseguido mi objetivo
Los usuarios que necesiten conseguir el efecto que yo buscaba me imagino que pocos lo haran mediante Smarty, entonces tan solo deberian usar el codigo de Emprear (ver mensaje #8) y ese codigo lo deberian insertarlo en el ARCHIVO .PHP PRINCIPAL de su web para luego hacer una llamada al div donde se necesite usarlo, No se si me explique bien, en mi caso no lo he metido en el .tpl donde se generaban los numeros que queria cambiar sino en el archivo inicial de mi web llamado init.php
El resultado es asombroso (depende de como diseñes los numeros en photoshop ) y el funcionamiento es de lo mejor que hay ya que nunca deberas volver insertar ninguna imagen ya que se generaran automaticamente, para aquellos que esten un poco hartos de que internet explorer no interprete algunos sombreados y contornos correctamente y deseen que cualquier tipo de letra sea valido esta es su solucion

Saludos cordiales

Última edición por lepe; 12/09/2010 a las 09:50 Razón: corregir

Etiquetas: numeros
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




La zona horaria es GMT -6. Ahora son las 12:55.