imprimir texto en determinada posicion de una imagen

Montes28 · #1 (**permalink**) 08/05/2013, 10:10

Hola amigos espero me puedan ayudar explico un poco lo que requiro , tengo una imagen y necesito imprimir un label o texto en determinada posicion de la imagen

es posible realizar esto con php?

pupefo · #2 (**permalink**) 08/05/2013, 10:12

Hola!!

Te refieres a: dentro de la imagen o al lado de ella???

Montes28 · #3 (**permalink**) 08/05/2013, 10:15

gracias por responder pupefo

necesito imprimir dentro y encima de ella

pr0 · #4 (**permalink**) 08/05/2013, 10:19

Pues un DIV cuyo background sea la imagen. Después escribes texto en el DIV y con estilos ubicas dicho texto en la posición que desees.

pupefo · #5 (**permalink**) 08/05/2013, 10:21

Se me ocurre lo siguiente:

- Crea un div con background-image con la imagen que quieras utilizar:

- Dentro de ese div puedes incluir texto con normalidad (cambia los colores para que destaque el texto).

- Creo que puedes incluir más div con texto y fondo transparente para que se vea la imagen.

Suerte!! jeje

Montes28 · #6 (**permalink**) 08/05/2013, 10:38

hasta el momento imprimo el texto en la esquina superior izquierda , necesito ubicar el texto en diferentes puntos de la imagen o en este caso del div

Código CSS:

Ver original<style type="text/css">
 
.Estilo1 {color: #FF0000}
#mapa{
    position:absolute;
    left:104px;
    top:62px;
    width:800px;
    height:481px;
    z-index:1;
    background-image: url(DEM-CVCBCM.png);
}
 
</style>

Código HTML:

Ver original<body>
<div id="mapa">
<span class="Estilo1">Prueba</span>
</div>
</body>

pr0 · #7 (**permalink**) 08/05/2013, 10:49

Pues es tan fácil como hacer varias clases CSS con distintos TOP y LEFT de manera que según la imagen pues seleccionas una clase u otra.

Código HTML:

Ver original<style type="text/css">
 
.texto_abajo{
    left:400px;
    top:300px;
}
 
</style>
 
<body>
<div id="mapa" class="texto_abajo">
<span class="Estilo1">Prueba</span>
</div>
</body>

bulter · #8 (**permalink**) 08/05/2013, 10:54

Pr0
Tu código movería todo el div, no solo el texto.

Código CSS:

Ver original.Estilo1 
{
    color: #FF0000;
    position: relative;
    top: 20px; 
    left: 40px;
}

pr0 · #9 (**permalink**) 08/05/2013, 10:57

Cierto, Bulter tiene la solución.

Montes28 · #10 (**permalink**) 08/05/2013, 11:20

pero las posiciones las recibo desde base de datos , osea que me toca leerlas y pasarlas a pixeles y mediante php crear el css