Expandir imagen según numero

Krishee · #1 (**permalink**) 22/07/2016, 12:43

Hola!
No sé si realmente sería con php pero como prácticamente todo lo estoy haciendo así lo posteo aquí.

Tengo una barra vacía (un div) que representa la "salud" de un usuario. Me gustaría hacer que con según que eventos subiera y bajara. El problema es que no se como expandir la imagen que llena la barra según el numero de vida que tiene.
La vida la tengo en la base de datos, del 0 al 100.

xerifandtomas · #2 (**permalink**) 22/07/2016, 12:51

Supongo que tienes una barra de progreso en html, algo como

Código HTML:

Ver original<progress max="100" value="80" ></progress>

Simplemente debes de extraer el valor actual de tu base de datos para ese usuario en concreto y establecerlo en el value de la barra de progeso.

ejemplo:

Código PHP:

Ver original<?php
$valorVidaUsuario=50;//este valor deberas extraerlo de la base de datos
?>
 
 
<progress max="100" value="<?php echo $valorVidaUsuario; ?>" ></progress>

No se exactamente cual es tu problema.

Krishee · #3 (**permalink**) 22/07/2016, 12:57

Cita:

Iniciado por xerifandtomas

Supongo que tienes una barra de progreso en html, algo como

Código HTML:

Ver original<progress max="100" value="80" ></progress>

Simplemente debes de extraer el valor actual de tu base de datos para ese usuario en concreto y establecerlo en el value de la barra de progeso.

ejemplo:

Código PHP:

Ver original<?php
$valorVidaUsuario=50;//este valor deberas extraerlo de la base de datos
?>
 
 
<progress max="100" value="<?php echo $valorVidaUsuario; ?>" ></progress>

No se exactamente cual es tu problema.

El problema es que me gustaría hacer algo así pero con una imagen. Si es 100% me gustaría que se expandiese hasta el máximo tamaño, si es 50% la mitad del tamaño, etc.. Sería posible de alguna manera? Estaba utilizando un div vacio en vez de un progress

pateketrueke · #4 (**permalink**) 22/07/2016, 14:22

Cita:

Iniciado por Krishee

El problema es que me gustaría hacer algo así pero con una imagen. Si es 100% me gustaría que se expandiese hasta el máximo tamaño, si es 50% la mitad del tamaño, etc.. Sería posible de alguna manera? Estaba utilizando un div vacio en vez de un progress

¿Y por qué una imagen si ya existe un elemento de HTML perfectamente semántico para eso?

Pero bueno, si lo quieres hacer con una imagen igual te recomiendo leer algo de HTML y CSS básico:

Código HTML:

Ver original<img style="width:60%">

#5 (**permalink**) 22/07/2016, 14:40

que tal esto:

Código HTML:

Ver original<html>
    <head>
        <style type="text/css">
        .papa{
        text-align:left;
        padding:2px;
        margin:0px;
        height:25px;
        border-width:1px;
        border-color:#000000;
        border-style:solid;
        width:200px;
        }
        
        .hijo{
        margin:0px;
        padding:0px;
        height:25px;
        background-color:#00ee00;
        width:180px;
        }
        </style>
    </head>
    <body>
    
        <div class="papa">
            <div class="hijo"></div>
        </div>
        
    </body>
</html>

el div papá tiene como width 200px ese sería tu 100%, por lo que tu div hijo tiene que estar proporcionado al width papá

P.S: No es una solución prolija pero no se me ocurrió nada por el momento

Krishee · #6 (**permalink**) 22/07/2016, 15:32

No era cosa de no saber sino más bien de no imaginarme como hacerlo.
Quería utilizar una imagen ya que la tenia diseñada para eso y la solución realmente era fácil. La dejo por si alguien esta interesado en un futuro:

He puesto la imagen en un div con una anchura y una altura deseada (para la barrita de la vida) y una imagen dentro.

Código:

<div id="barra">
<?php if ($salud > 0) { echo "<img src='/img/green.gif' width='$salud%' >";} ?></div><div id="tex"><?php echo $salud ?> %</div>