0

Necesito hacer un portafolio de servicios, la cosa es que es a través de imágenes, ya tengo las imágenes ubicadas. Se me ocurrió la siguiente idea: al presionar una imagen un div con la información del producto aparecerá abajo del portafolio de servicios si el usuario presiona nuevamente el producto la información desaparece, de igual forma desaparece si el usuario le da click a otra imagen, al desaparecer la información anterior aparece la información del nuevo producto seleccionado. Intenté hacerlo con un contador de clicks pero no funcionó, ¿alguna idea?. De antemano gracias.

let contador=0;
imagen_portafolio_1.onclick=function(){
	
	contador=++contador%2;
	if (contador==1) {
	document.getElementById('servicio1').style.display="inline-block";
	document.getElementById('servicio2').style.display="none";
}else{
	document.getElementById('servicio1').style.display="none";
}
return 0;
}
let subida=0;
imagen_portafolio_2.onclick=function(){
	
	subida=++subida%2;
	if (subida==1) {
		document.getElementById('servicio2').style.display="inline-block";
	}else if (contador==0 || subida==0) {}{
		document.getElementById('servicio1').style.display="none";
		document.getElementById('servicio2').style.display="none";
	}
	return 0;
}
<!-- PORTAFOLIO -->
		<div class="contenedor_portafolio" id="contenedor_portafolio1">
		<h1>Portafolio de servicios</h1>
			<img src="http://conceptodefinicion.de/wp-content/uploads/2017/10/Host.jpg" alt="" class="imagenes_portafolio" id="imagen_portafolio_1">
			<img src="https://www.solbyte.com/blog/wp-content/uploads/el-dominio-es-la-cara-de-tu-negocio-en-internet.png" alt="" class="imagenes_portafolio" id="imagen_portafolio_2">
			<img src="https://neetwork.com/wp-content/uploads/2017/12/18OPTIMIZACION-DEL-SITIO-WEB.png" alt="" class="imagenes_portafolio" id="imagen_portafolio_3">
			<img src="https://seo.pe/wp-content/uploads/h9-image-3.jpg" alt="" class="imagenes_portafolio" id="imagen_portafolio_4">
			<img src="https://www.blog.andaluciaesdigital.es/wp-content/uploads/2019/06/pentesting_1024x512px.jpg" alt="" class="imagenes_portafolio" id="imagen_portafolio_5">
			<img src="https://www.vervesearch.com/wp-content/uploads/2014/10/blog-01-01.jpg" alt="" class="imagenes_portafolio">

			<!-- DESCRIPCIÓN SERVICIOS -->
			<div class="descripciones_servicios">
			<div id="servicio1"><p>HOST<br>¿Qué es el HOSTING?<br>
				Web Hosting es el servicio que provee el espacio en Internet para los sitios web. ... Si deseas crear tu página web y que otros puedan visitarla, vas a necesitar publicar o “subir” los archivos de tu sitiotexto e imágenes) a un servicio de web hosting. <br>	
				Nuestro servicio de host es el mejor.</p>
			</div>
			<div id="servicio2"><p>DOMINIO<br>Compra tu dominio de la forma más fácil</p></div>
			<div id="servicio3"><p>POSICIONA TÚ PÁGINA<br> a través de nuestras ofertas únicas.</p></div>
			<div id="servicio3"><p>¿YA TIENES UNA PÁGINA WEB?<br>Optimiza tu página antigua.</p></div>
			<div id="servicio4"><p>SEGURIDAD <br>Realizamos PENTESTING, para que puedas solucionar los posibles fallos que tenga tú sistema.</p></div>
			<div id="servicio5"><p>RESPONSIVE DISING<br>Adapta tu página de una forma única.</p></div>
			</div>
		</div>

2 respuestas 2

0

Has intentado hacerlo con css?Es decir meter las imagenes en un input type checkbox y luego si el checkbox esta activo que sea dispay : block y si no dispay :none

body> .checkbox:checked ~ div{
  display: block;  
}
body > checkbox:not(:checked) ~ div{
  display: none;
}

algo parecido a eso editado :
Si metes la imagen en un label

<label for="menu" class="imag"><img...></label>
        <input type="checkbox" id="imag" class="checkbox">

Con eso consigues tener la imagen con el checkbox. Entonces con el codigo de arriba

body> .checkbox:checked ~ div{
  display: block;  
}
body > checkbox:not(:checked) ~ div{
  display: none;
}

Lo que haces es mostrar el div en el que tienes el texto deseasdo de cada imagen que aparezca o desaparezca

body > div, body .checkbox {
  display: none;
}

y con esto puedes hacer que no se vea ni el checkbox ni el div con el texto hasta que no se pulse

1
  • No entiendo muy bien, me puedes explicar por favor? Commented el 24 nov. 2019 a las 17:09
0

Para lograr eso primero esconde todos los div servicioX mediante la propiedad css display: none;, luego con esta sencilla función onclick muestras el id deseado.

.descripciones_servicios div {
  display: none;
}

function imageClick(servicio){
    //Aquí básicamente estoy diciendo que si el id 'servicio' que se le ha pasado a la función 
    //es igual al id clicado se muestra el div.
    //Si nunca has visto esta sintaxis se simplifica en [condición ? true : false;]
    document.getElementById('servicio1').style.display = servicio == 'servicio1' ? "block" : "none";
    document.getElementById('servicio2').style.display = servicio == 'servicio2' ? "block" : "none";
    document.getElementById('servicio3').style.display = servicio == 'servicio3' ? "block" : "none";
    document.getElementById('servicio4').style.display = servicio == 'servicio4' ? "block" : "none";
    document.getElementById('servicio5').style.display = servicio == 'servicio5' ? "block" : "none";
}

Luego a cada imagen le añades el evento onclick pasando el parametro del id a mostrar.

        <img onclick="imageClick('servicio1')" src="http://conceptodefinicion.de/wp-content/uploads/2017/10/Host.jpg" alt="" class="imagenes_portafolio" id="imagen_portafolio_1">
        <img onclick="imageClick('servicio2')" src="https://www.solbyte.com/blog/wp-content/uploads/el-dominio-es-la-cara-de-tu-negocio-en-internet.png" alt="" class="imagenes_portafolio" id="imagen_portafolio_2">
        <img onclick="imageClick('servicio3')" src="https://neetwork.com/wp-content/uploads/2017/12/18OPTIMIZACION-DEL-SITIO-WEB.png" alt="" class="imagenes_portafolio" id="imagen_portafolio_3">
        <img onclick="imageClick('servicio4')" src="https://seo.pe/wp-content/uploads/h9-image-3.jpg" alt="" class="imagenes_portafolio" id="imagen_portafolio_4">
        <img onclick="imageClick('servicio5')" src="https://www.blog.andaluciaesdigital.es/wp-content/uploads/2019/06/pentesting_1024x512px.jpg" alt="" class="imagenes_portafolio" id="imagen_portafolio_5">
        <img src="https://www.vervesearch.com/wp-content/uploads/2014/10/blog-01-01.jpg" alt="" class="imagenes_portafolio">

Ten en cuenta que a veces el evento onclick del tag img no funciona como es esperado, si es tu caso, añade un div y pon el evento onclick en el div. Leer más al respecto

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.