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

[lepe]

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

[emprear]

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

[lepe]

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

[emprear]

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

[lepe]

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

[emprear]

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

[lepe]

De acuerdo emprear, estaré muy atento a lo que puedas testear
Hasta pronto ;))

[emprear]

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

Código PHP:

<?php  
$ext = "gif";
$numero = $_GET['valor'];
if (!isset($numero)){
echo "No se definió un valor";
//exit();
}
 
$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='' />";
?>
 

mira esta demo

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

ahi hay un rar para descargar con el código

[lepe]

Iniciado por emprear

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

Código PHP:

<?php  
$ext = "gif";
$numero = $_GET['valor'];
if (!isset($numero)){
echo "No se definió un valor";
//exit();
}
 
$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='' />";
?>
 

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

[emprear]

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

[lepe]

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

[_cronos2]

Con JS también se puede hacer si te interesa.
Saludos (:

[lepe]

Hola muy buenas cronos, ¿podrias mostrarnos como seria dicho codigo? ¿Podria insertarse dicho codigo en ficheros .tpl?
saludos

[emprear]

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:

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="es" lang="es" >
<head>
<title>Sustituir números por gráficos - Versión Javascript</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="description" content="x" />
<meta name="keywords" content="x" />
<meta http-equiv="Content-Language" content="ES" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="copyright" content="&copy; 2006, Guillermo Gianello" xml:lang="es" lang="es" />
<meta name="author" content="http://emprear.com"  xml:lang="es" lang="es" />
<script type="text/javascript">
//<![CDATA[
function sust_img(numero){
var img_url = 'http://foros.emprear.com/php/numeros/img/';
var ext = 'gif';
var lgt = numero.length;
 
for (i=0;i<lgt;i++){
var s = numero.substr(i,1);
if (s == '.'){
s = "punto";
}
document.write("<img src='" + img_url + s + "." + ext + "' border='0' alt='' />");
} 
document.write("<img src='" + img_url + "euro.gif' border='0' alt='' />");
} //fin funcion
 
//]]>
</script>
</head>
<body>
<script type="text/javascript">
//<![CDATA[
sust_img('90788.3453');
//]]>
</script>
</body>
</html>
 

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

Saludos

[lepe]

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

[emprear]

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

[lepe]

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