[SOLUCIONADO] Clickear sobre img y abrir campo

[El_Astur]

Buenas,

no logro encontrar la forma de solucionar un problema: tengo una imagen con texto clickable y quiero que cuando se haga click sobre ello abra un input o campo que pise ese contenido y se pueda escribir. Si hubiera algún plugin jquery o algo que conozcáis que permita que realice el efecto de una forma 'más bonita' (empujando a la izquierda o algo así) os lo agradecería.

Un saludo

[carscx]

Imagen con texto clickable? Si puedes, publica el codigo que ya tienes, y vemos una forma de hacerlo.

Puedes hacerlo de varias formas, o bien que al hacer click, ocultar la imagen. Y mostrar el div que previamente estara oculto por CSS o "destruir" el elemento de imagen y por jquery, reescribir el html con el input.

Entremedias de ese proceso se pueden incluir efectos como deslizarlo a un lateral, aumentarlo y desaparecerlo, etc.....

Dame un poco de informacion y te ayudo!

[El_Astur]

Buenas Carcx,

el código html que tengo es un listado con tres cajas y quisiera que al clickear en la última apareciera el input sobre todo el listado - id="menu" -. He probado a ocultar y mostrar otra capa por encima pero no me sale, aparte que no tiene ningún efecto:

<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="nivel android"><span>Android</span></a>
<ul>
<li><a href="#">ítem 1</a></li>
<li><a href="#">ítem 2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel os"><span>iOs</span></a>
<ul>
<li><a href="#">ítem 1</a></li>
<li><a href="#">ítem 2</a></li>
</ul>
</li>
<li class="nivel1">
<p><a href="" class="nivel search"><span>Type your search</span></a></p>
<div style="display:none;"><form><input type="text" placeholder="Type your search" /></form></div>
</li>
</ul>
</div>
Muchas gracias

[carscx]

El_Astur,

Prueba con este codigo:

Código HTML:

<div id="menu">
<ul>
<li class="nivel1"><a href="#" class="nivel android"><span>Android</span></a>
<ul>
<li><a href="#">ítem 1</a></li>
<li><a href="#">ítem 2</a></li>
</ul>
</li>
<li class="nivel1"><a href="#" class="nivel os"><span>iOs</span></a>
<ul>
<li><a href="#">ítem 1</a></li>
<li><a href="#">ítem 2</a></li>
</ul>
</li>
<li class="nivel1">
<p><a href="javascript:;" class="nivel search"><span>Type your search</span></a></p>
<div style="display:none;" id="div-input"><input type="text" placeholder="Type your search" /></div>
</li>
</ul>
</div>
 

Código Javascript:

$(document).on('click', '.search', function(){
    $('#div-input').slideDown(200);
});
 

Y desde aqui te paso un jsfiddle donde lo puedes probar:

http://jsfiddle.net/carscx/nqyyf6gn/

[El_Astur]

Holas carscx,

muchísimas gracias, basándome en el código que me has pasado he logrado lo que quería. Ahora estoy intentando hacer una transición de cambio, ¿se realiza con fade de javascritp no?. Disculpa por ser tan preguntón, pero ando practicando con javascript y estoy probando eso también.

Lo dicho, muchas gracias!!!

[carscx]

El_Astur,

Asi es, puedes probar con fadeIn y fadeOut. Tambien tienes otras posibilidades como hacer que el item del menu, "vuele" hasta desaparecer y el input aparezca volando desde una posicion remota de la pantalla.

Me alegro que te haya servido. Con jQuery UI tienes varios efectos ya listos para usar.

Te paso el enlace: http://jqueryui.com/effect/

Saludos,

[El_Astur]

Muchas gracias de nuevo por la información. Una última pregunta de una función que me está volviendo loco. Es un problema que me ocurre y es que hay que hacer dos clicks para que se active, es decir, darle dos veces al botón buscar para que aparezca el input para escribir. ¿Sabrías donde se puede encontrar información o cual es el fallo? El código es:

<div class="cp_oculta" id="hidden" >
<input type="text" placeholder="Buscar" />
<button type="button" value="submit" onClick="javascript:closeThisDiv();"><img src="img/iconos/ico-close-peq.png" /></button>
</div>

<script type='text/javascript'>
//<![CDATA[
document.write('<style type="text/css">div.cp_oculta{display: none;}</style>');
function MostrarOcultar(capa,enlace){
if (document.getElementById)
{
var aux = document.getElementById(capa).style;
aux.display = aux.display? "":"block";
}
}
//]]>
</script>

Un saludo

[carscx]

Si tienes algun lugar para verlo online, te lo agradeceria. Asi podre ayudarte. Gracias