image
Inicio » Foros » HTML

Foro sobre HTML

Botones

Volver al foro | Responder | Añadir nuevo tema


De: haba
Fecha: 13/06/2006
Mensaje:

Hola!

Hay alguna forma de hacer botones y que no sean de formulario ni sea una imagen con link??

Porque a ver, los botones de formulario me van bien, pero no los puedo usar como links... o sí?

Muchas gracias!!




Quizás le interese
De: ZeroKilled
Util para: 8 personas

Fecha: 13/06/2006
Mensaje:

Si. Es posible utilizar los botones de formulario como enlaces, sin embargo tambien requiere de otro recurso como lenguaje de lado cliente. Un lenguaje de lado cliente es un lenguaje de programacion donde toma accion en el navegador del usuario. Si recientemente se esta iniciando en el lenguaje HTML lo mas comun es que no entienda muy bien sobre el lenguaje. De todos modos le voy a dar un ejemplo que pueda ser adaptable a su necesidad. En este caso, el lenguaje de servidor que voy a utilizar es JavaScript. El siguiente contenido lo tienes que pegar dentro de las etiquetas <head></head>:

<script type='text/javascript'>
function gotoLink(url){
location.href = url;
}
</script>

Luego en cada boton de formulario tienes que añadirle lo que se conoce como un evento. Un evento es cuando el usuario responde a determinada accion el navegador lo detectará y ejecutara una serie de acciones. En este caso el evento es cuando el visitante presiona sobre un boton. Lo siguiente es un ejemplo de como quedaria los botones:

<input type='button' value='Google' onclick='gotoLink("http://www.google.com")' /> Llevame a Google.com!<br />
<input type='button' value='WebEstilo' onclick='gotoLink("http://www.webestilo.com")' />WebEstilo.com<br />
<input type='button' value='Yahoo!' onclick='gotoLink("http://www.yahoo.com/")' />

Fijese que todos los inputs tienen tres parametros: type, value, y onclick. Quiero que se enfoque en onclick. Este precisamente llama a una accion que previamente definimos en las etiquetas <script></script>. Preste mucha atencion al orden de las comillas simples y dobles, un error entre ellos podria hacer que el enlace no funcione. Dentro de la comilla doble va la direccion a donde quieres guiar al visitante. Este es un ejemplo sencillo, pero advierto que no es el unico que existe, en JavaScript se puede hacer mucho.

Ahora bien, le tengo otra propuesta en el cual puedes olvidar todo lo antes dicho. Quise mostrarle lo anterior antes de llegar hasta aqui para mostrarle que el diseño web no solo llega hasta HTML. Sino que se extiende mas alla. Este otro modo es mucho mas sencillo en el cual no requiere utilizar lenguaje de programacion. Sin embargo, sucede igual que al anterior, necesitamos de otro recurso que HTML solo no lo puede hacer. En este caso usare la tecnologia CSS (Cascading Style Sheet). El proposito de esta herramienta es proveerle al diseñador mas opciones para diseñar un documento HTML. Mas bien esta tecnologia trabaja con la presentacion visual de las paginas HTML. Para este ejemplo, no voy a utilizar un boton de formulario, sino un enlace como cualquier otro (<a>). El siguiente contenido lo añades dentro de las etiquetas <head></head>:

<style>
a.button{
font:12px arial;
padding:3px 10px;
margin:5px;
border:1px outset #CCC;
text-decoration:none;
color:#333;
background:#CCC;
}
</style>

Luego, cuando definas un enlace que quieras dar la apariencia de ser un boton:

<a href='http://www.google.com' class='button'>Google</a>
<a href='http://www.webestilo.com' class='button'>WebEstilo.com</a>

Preste gran atencion al atributo 'class', este encierra un valor llamado 'button' dentro de comillas simple. Si miras el contenido dentro de las etiquetas <style></style> veras que define asi a.button{...} El atributo 'class' hace referencia a lo que recien explique, pero tambien fijese que el valor del atributo class no conlleva el punto (.). Es muy imoprtante eso.

Mi recomindacion es que cuando quieras dar un paso adelante luego del HTML, dirijase al CSS antes de entrar en JavaScript. CSS le ayudara mucho a la presentacion visual y a crear unos que otros efectos. Y cuando entres a Javascript (si asi lo deseas), veras que con javascript puedes manipular HTML y CSS. Suerte!





De: ZeroKilled
Util para: 2 personas

Fecha: 13/06/2006
Mensaje:

Perdonen, cometi un error en la repuesta. En el primer parrafo la penultima linea dice: '... el lenguaje de servidor que voy ...', deberia ser 'el lenguaje cliente' y no servidor.



De: haba
Util para: 0 personas

Fecha: 13/06/2006
Mensaje:

Muchas gracias Zerokilled.

Entiendo perfectamente todo lo que me dices, pues he tocado de todo un poco, pero html nunca me han enseñado.

Estoy haciendo una aplicación web con php. Igual con el php también se podría conseguir algo como lo que me explicas o q?

Muchísimas gracias!!






De: haba
Util para: 0 personas

Fecha: 16/06/2006
Mensaje:

Zerokilled, olvídate de lo  dicho en el último post. Oye, ´código q me has dado de las css, sólo tiene esas opciones? En el caso de que haya más, donde puedo encontrarlas?

Gracias!! 





De: haba
Util para: 0 personas

Fecha: 16/06/2006
Mensaje:

Nada, que ya las he encontrado! Gracias igualmente por todo!



De: lzg21
Util para: 0 personas

Fecha: 18/04/2009
Mensaje:

Muy bien explicado y muy útil.
Gracias.



De: Doock!
Util para: 0 personas

Fecha: 12/08/2009
Mensaje:

ola! necesito aprender a programar botones para myspace ya sea... add me, ver fotos, ver videos, facebook, fotolog, etc... todo eso pero a partir de una imagen que tenga el diseño de los botones(la cual ya diseñe con anterioridad) y programar los botones luego... lo unico que me han dicho para esto es sobre un code el cual lleva una imagen transparente en png, la cual al programar la etiqueta queda, pero no entiendo nada de eso...no me manejo mucho en esto de programar en html, ojala puedan ayudarme con algun tutorial paso a paso sobre esto... muchas gracias!



De: ernesto
Util para: 0 personas

Fecha: 24/10/2011
Mensaje:

muy buena informacion felicidades



De: gerardo
Util para: 0 personas

Fecha: 01/12/2011
Mensaje:

Usted tambien puede crear un boton en photoshop y en ves de guardarlo como una img jpg puedes guardarlo como un gif



Volver al foro | Responder | Añadir nuevo tema

Quizás le interese:

WebEstilo.com no se hace responsable de las opiniones que los usuarios puedan verter en cualquiera de los foros existentes.

Si te solucionó el problema pulsa en G+1


Gracias!






Comparte



Última modificación:05 de Agosto de 2012. Spain - España.
© 1998-2004 por . Todos los derechos reservados.