Abrir una pagina al apretar una imagen que esta dentro de una caja de texto

skyz · #1 (**permalink**) 18/11/2013, 00:53

Saludos comunidad tengo la siguiente caja de texto con una imagen:

CSS

Código CSS:

Ver original<style type="text/css">
.userBox
{
background-image:url('users.gif');
background-repeat:no-repeat;
padding-left:25px;
border-width:1px;
border-style:solid;
border-color:#CC0000;
}
</style>

HTML

Código HTML:

Ver original<input type="text" name="nombre" class="userBox" size="18">

Lo que deseo es que cuando este el cursor en la imagen pueda darle un click y me aparesca otra pagina, pero nose como realizarlo con css, como lo tiene google al buscar imagenes: http://images.google.es.

Gracias por su tiempo.

pzin · #2 (**permalink**) 18/11/2013, 01:32

¿Un enlace dices? ¿Una imagen con un enlace?

caricatos · #3 (**permalink**) 18/11/2013, 01:54

Hola:

Las imágenes de fondo no pueden ser "zonas calientes"... No sé qué hacen en google, pero supongo que o superponen la imagen al control, o el cuadro de texto no tiene borde y el borde se pone a un contenedor que aúne el control con las imágenes "calientes"... (no se me ocurren otras maneras, pero posiblemente existan

Saludos

skyz · #4 (**permalink**) 18/11/2013, 08:49

Como realizaria dicho efecto:

no tengo idea

PHPeros · #5 (**permalink**) 18/11/2013, 09:01

Creo que la única forma es superponiendo el elemento.

Daniel Ulczyk · #6 (**permalink**) 18/11/2013, 12:23

Yo veo que es un DIV dentro de una celda

—visto con Firebug en Firefox

willyfc · #7 (**permalink**) 18/11/2013, 22:33

Creo que la estructura base sería algo así:

Código HTML:

Ver original<!DOCTYPE html>
<html>
<head>
<title>Ejemplo</title>
<style type="text/css">
#contenedor{ width: 532px; margin: 30px auto; background: #CCC; position: relative; padding: 20px 10px}
.userBox{border: 1px solid #CC0000; width: 418px; background: #FFF; padding:5px 34px 5px 2px }
input[type="submit"]{ width: 72px;background: #4889F1; text-align: center;color: #FFF; border: 0; cursor: pointer; padding: 5px 0}
a.boton{ display: block; width: 25px; height: 20px; background: #999; position: absolute; top: 24px;  right: 89px; text-indent: -1000000px; z-index: 9999}
a.boton:hover{background: #CFBFFF}
</style>
</head>
 
<body>
<div id="contenedor">
    <input class="userBox" type="text">
    <input type="submit" value="B">
    <a class="boton" href="">camara</a>
</div>
</body>
</html>

eso, si no entendí mal.