imágen con url

Hola espero me puedan ayudar la verdad ya me desespere, necesito que una imágen que creo me haga la acción de la url, para eso necesito hacerlo para poder poner un hipervinculo a la creación de un nuevo registro con el create el código que tengo es el siguiente:




$this->menu=array(

	array('template'=>'<img src="'.Yii::app()->request->baseUrl.'/images/iconos/agregar.png">', 'url'=>array('create')),

);



y lo que necesito hacer sería como en html se indica de la siguiente manera:




<a href="URL A LA QUE ENVIARE"><img src="/images/iconos/agregar.png"></a>



A sí cuando le de clic en la imágen como ese html indicado si lo hace, pero en yii como puedo hacer esto, si en el arreglo le quito el template ya no aparece la imágen si le pongo img, o image, o button o x texto no me aparece la imágen pero si se visualiza la capa div y si le doy clic si me envia hacia la url como le puedo hacer???

En la definicion del widget del CMenu tienes que setear a encodeLabel como false y ya haciendo eso puedes poner una imagen como etiqueta…


$this->widget('zii.widgets.CMenu', array(

	'items'=>array(

		array(

			'label'=>CHtml::image(Yii::app()->request->baseUrl."/images/iconos/agregar.png").' Agregar',

			'url'=>array('create'),

		),

	),

	'encodeLabel' => false,

));

Muchas gracias a lo que veo si funciona, pero ahora me surge una nueva duda…, como quito el punto negro que aparece??, porque me aparece la imágen con un punto negro, y ps después necesitare ponerle una clase CSS me imagino que la clase se indica de esta manera:




$this->widget('zii.widgets.CMenu', array(

        'items'=>array(

                 array('label'=>'<img src="'.Yii::app()->request->baseUrl.'/images/iconos/agregar.png">', 'url'=>array('create'),'itemOptions'=>array('class'=>'agrega'),

                ),

        ),

        'encodeLabel' => false,

));



Aunque no he tenido exito con el movimiento del css la indico, deseo ver si en verdad lo esta haciendo bien y nada mas puse que se fuera hacía la izquierda ejemplo




.agrega{

   left:150px; /*Le he intentado mover con 150 o -150px para ver si se mueve pero nada ha resultado...*/

}



ahi mismo en tu clase .agrega para ocultar el punto negro que dices… escribele lo siguiente


list-style: none outside none;

Y de aqui en delante todo tendra que ver con CSS

El problema es que no me esta aceptando la clase…, la clase la estoy poniendo dentro del archivo main.css para ver si lo acepta y nada, y luego lo indique de esta manera:




$this->widget('zii.widgets.CMenu', array(

        'items'=>array(

                 array('label'=>'<img title="Agregar" src="'.Yii::app()->request->baseUrl.'/images/iconos/agregar.png">', 

				 'url'=>array('create'),array('class'=>'agrega','style'=>'list-style: none outside none;'),

                ),

        ),

        'encodeLabel' => false,

));



La verdad no se si esta bien de esta manera ó me podrías orientar en como hacerle???.

Si utilizas firebug, usando el inspector de elementos y focus sobre tu menu te daras cuenta cual es la otra clase que esta reemplezando la regla que quieres aplicar… y seguramente es lo que debe de suceder…

de todas formas intenta con

list-style: none outside none !important;

Ya me pudo quitar el punto, desde CSS estaba indicando de otra manera que no me habia fijado la clase, pero… aun sigue sin moverme la imágen a otro lado…, anexo el código que tengo, por cierto utilizo el firebug para ver el posicionamiento y ver la ubicación de la clase por medio de su capa.





/*Código de PHP*/

$this->widget('zii.widgets.CMenu', array(

        'items'=>array(

                 array('label'=>'<img title="Agregar" src="'.Yii::app()->request->baseUrl.'/images/iconos/agregar.png">', 

				 'url'=>array('create'),'itemOptions'=>array('class'=>'agrega'),

                ),

        ),

        'encodeLabel' => false,

));


/*Código de CSS, este código lo tengo dentro del archivo main.css*/

.agrega{

	list-style: none outside none;

	width:25px;

	height:25px;

	top:200px;

}



Notése que tengo un top de 200px y no me lo mueve del lugar donde esta anexo imágen.

Bueno, supongo que si lo que quieres mover es la imagen… entonces deberias de hacerlo usando los selectores correctos…


.agrega img {

	float:right;

}

Muchas gracias por tu contestación me estrece demasiado y nunca se me ocurrio preguntarle al diseñador de interfaz de usuario de la empresa, jajaja y de hecho el error era tan obvio que los dos no lo vimos, nunca iba a poder mover esa imágen porque no le indicaba el position al CSS osease no le habia puesto si la posición iba a ser relative o absolute, teniendo esto ya lo puede mover como si nada…, jajaja muchas gracias de todas maneras, solo una última pregunta, es necesario siempre indicar CMenu para poder meter un css:




$this->widget('zii.widgets.CMenu', array());



Mi pregunta es por si tengo la necesidad de indicar puras imágenes.

Y muchisimas gracias por la contestación jajaja comprobado una vez mas que el stress por terminar lo mas pronto posible el proyecto no te hace ver errores simples…

O_o ¿? no entendi eso ultimo

Lo que necesito, es acomodar el diseño como si fueran templates para el sistema web, el cuál tenga una mejor visualización para el usuario, para ello se deben de poner varias imágens posicionadas con CSS, y sobre ellas indicar los controles correspondientes que el programador este utilizando, por decir ya tengo mi diseño acomodado con x imágenes, ahora sobre esas imágens necesito indicar donde pondre el boton para guardar, un ver detalles, imprimir pdf, o excel, etc…, al igual indicar la tabla del grid en cierta parte de la pantalla, como donde aparecerá el texto del usuario que se ha logueado entre otros controles, en si es puro posicionamiento CSS, y para ello te preguntaba que si necesito poner CMENU para indicar las imágenes y sobre de ellas los controles PHP de YII:





/*Código de PHP

Si te fijas como me aquí me ayudaste indico una imágen para agregar, pero pongamosle*/

/*que necesito varias imágenes y el CSS solo me lo acepte en el widget como esta indicado??*/

/*ó hay otra manera de indicar el arreglo para poder acomodar el css como un standar de YII mejor dicho.*/


$this->widget('zii.widgets.CMenu', array(

        'items'=>array(

                 array('label'=>'<img title="Agregar" src="'.Yii::app()->request->baseUrl.'/images/iconos/agregar.png">', 

                                 'url'=>array('create'),'itemOptions'=>array('class'=>'agrega'),

                ),

        ),

        'encodeLabel' => false,

));




Supongo q tienes muchas formas de hacerlo… o defines las imagenes para cada item del menu o lo haces atraves de la clase de css… todo aplica para el menu…

No entendí Shaolin… colocando ese código php pude ver la imágen pero tengo dos problemas:

  • No puedo hacer desaparecer el punto negro ni siquiera modificando el main.css

  • No puedo alinear la imagen a la derecha.

Espero que alguien lo haya solucionado, me imagino que debe de ser algo súmamente tonto para alguien que se dedica a esto.

Saludos.

Hola migue espero que te encuentres bien… mira a el punto que tu mencionas es algo sencillo dentro de tu código css donde estas indicando esa clase para el botón, tienes que indicar el siguiente código:




list-style: none outside none;

//por decir mi clase del boton se llama agrega y lo tengo de esta manera.

.agrega{

  list-style: none outside none;

}



Pero notése que aquí no has indicado el posicionamiento osea ya acabamos de quitar el punto negro, con esa linea de código, pero por decir tu quieres mover tu botón al lado derecho o izquierdo para empezar debes de indicar que lo vas a mover dentro del css




.agrega{

  list-style: none outside none; //Código para quitar el punto negro.

  position:relative; //aquí indica tu tipo de posicionamiento como lo quieres si absolute ó relative

}



Como ya hemos indicado ya quitamos el punto negro con la primera linea del CSS, y con la segunda indicamos que le vamos a dar un movimiento a x parte de la pantalla, ten en cuenta que si esa linea no existe nunca lo vas a poder mover, aunque le pongas left, right, bottom, top, etc… si no indicas position, no podrás moverlo, entonces ahora indicaras a donde deseas tu movimiento.




.agrega{

  list-style: none outside none; //Código para quitar el punto negro.

  position:relative; //aquí indica tu tipo de posicionamiento como lo quieres si absolute ó relative

  left:50px;

  top:50px;

  background:url(../images/iconos/buscar.png); // con este indicas que le vas a poner una imágen.

}



Espero te resuelva la duda de esta manera mas explicada y perdona la tardanza es que estaba algo ocupado. Saludos…

GENIAL!

Gracias por responder tan detalladamente, estoy empezando con todo este mundo de la programación web y siempre viene bien tener este tipo de respuestas.

Esta tarde lo pruebo.

Saludos.

Ahora que acabo de ver otra nueva forma para eso mismo, que es la que yo estaba buscando menos código te la planteare.

Dentro de tu código PHP indica esta manera:




echo CHtml::link('','index.php?r=usuario/create',array('class'=>'agrega','title'=>'Agregar'));



Dentro de tu Código CSS que en mi caso el mio se llama agrega se indica esto:




.agrega{

	position:relative;

	background:url(../images/iconos/agregar.png); // busco una imágen y la pongo

	display:block;   //con esta propiedad forzo que aparezca buscala en google para que le entiendas mas

	width:25px;      //aqui indico el tamaño a lo largo de mi imágen

	height:25px;     //aqui indico el tamaño a lo alto de mi imágen

	top:15px;        //con esto le digo cuantos pixeles lo movere desde arriba 

	z-index:2;       //esta es usada para cuando tengas dos clases CSS y una esta encima de la otra puedes usar z-index para forzar que se vea encima, siempre y cuando tus dos clases tengan position, veamoslo asi, si tienes un z-index:1; y otra que es z-index:2; la que se mostrara encima de la 1 es la 2 no se si me explique bien.

}



Mostrando estos códigos css y php sería mas fácil que puedas poner tu imágen con un simple link, pero ahora te explicare el php




echo CHtml::link('','index.php?r=usuario/create',array('class'=>'agrega','title'=>'Agregar'));

//Ejemplo 1

//Nota que inicia echo CHtml::link('Aqui va tu texto que quieres que se vea en un link','',''); 

//Ejemplo 2

//Nota que inicia echo CHtml::link('hipervinculo','aquí va tu link de a donde deseas que viaje',''); 

//Ejemplo 3

//Nota que inicia echo CHtml::link('hipervinculo','index.php?r=usuario/create','aqui va el arreglo que deseas indicar');



Dentro del arreglo que deseas indicar pongo class que es donde ira el CSS, y en title esto es que cuando este tu cursor encima de tu imágen aparecerá el texto que tu le indicas en mi caso aparecerá Agregar.

Nota que si deseas que solo aparezca la imágen y no el texto solo quita del primer parametro el texto asi como pongo el ejemplo, espero te sirva de ayuda.