Helper - Imagen

Genera el codigo para mostrar una imagen en una pagina web.
Metodos del Helper Img:

METODOS

  • id(string): Identificador unico para el elemento HTML.
  • setCss(string): son las clases que se aplican al elemento, las mismas se separan por un espacio.

  • src(string): url de la imagen a mostrar.
  • alt(string): texto que se mostrara si no se puede mostrar la imagen.
  • height(integer): altura de la imagen en css pixels (entero no negativo).
  • width(integer): ancho de la imagen en css pixels (entero no negativo).
  • crossorigin(string): Permite las imagenes de sitios de tercero, para ser utilizadas en el canvas admite dos valores (anonymous / use-credentials).
  • ismap(string): Se pasa la direccion url del sitio que contiene el mapa de la imagen.
  • usemap(string): nombre para el mapa de imagen.
    • addRect($cords, $url = '#', $alt = '')
    • addCircle($cords, $url = '#', $alt = '')
    • addPoly($cords, $url = '#', $alt = '')
  • addArea(string): nombre para el mapa de imagen.

  • render(): genera el HTML5 con todas las propiedades establecidas.
Esquema de la estructura de Agenor Deberias estar en el Rectangulo Deberias estar en el Circulo Deberias estar en el Poligono Como vemos aqui, tenemos los metodos para cada parametro de la imagen que se desea mostrar en la web y hemos realizado un mapa local, que al pasar el raton sobre el circulo o rectangulo o triangulo nos dice donde esta.
El codigo para la generacion de la imagen es:
<?php
    
use agenor\helpers\HTML5 as HTML5;
    echo 
HTML5::Img()   ->src($this->getUrlView('img/img_map.png'))
                        ->
alt('Esquema de la estructura de Agenor')
                        ->
setClass('pull-left img-responsive')
                        ->
id('imgPrueba')
                        ->
usemap('prueba')
                        ->
addRect('25,28,296,79''#''Deberias estar en el Rectangulo')
                        ->
addCircle('105,185,85''#''Deberias estar en el Circulo')
                        ->
addPoly('226,189,313,338,140,338,226,189''#''Deberias estar en el Poligono')
                        ->
render();                        
En este caso tendriamos que tener cuidado con el uso de la clase img-responsive dado que al mostrar en pantallas pequeñas las coordenadas cambiarian.
El codigo resultante es el siguiente:
<img id="imgPrueba" class="pull-left img-responsive" alt="Esquema de la estructura de Agenor" src="http://localhost/agenor_project/application/index/views/img/img_map.png" usemap="#prueba" />
<map name="prueba">
<area alt="Deberias estar en el Rectangulo" shape="rect" coords="25,28,296,79" href="#" title="Deberias estar en el Rectangulo" >
 <area alt="Deberias estar en el Circulo" shape="circle" coords="105,185,85" href="#" title="Deberias estar en el Circulo" >
 <area alt="Deberias estar en el Poligono" shape="poly" coords="226,189,313,338,140,338,226,189" href="#" title="Deberias estar en el Poligono" >
</map>