Cómo crear un banner con dos zonas activas para hipervínculos

  • Autor Autor rillo75
  • Fecha de inicio Fecha de inicio
R

rillo75

Gamma
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
A ver si alguien me puede echar un mano.

Quiero crear un banner (tamaño estandar, 728x90 o 300x250) que tenga dos zonas diferentes activas, donde se pueda hacer click y redireccionar a algún sitio. Las zonas de click donde insertaría el hipervínculo estarían asociadas a una imagen diferente cada una. Alguien sabe cómo podría hacerlo?

Crear un banner único como imagen y meterle un hipervínculo es sencillo, pero no se cómo podría hacerlo para dos zonas activas.

Gracias de antemano si alguien me puede guiar un poco.
 
¿Te sirvió? Únete a la conversación

Con tu cuenta gratis puedes responder, escribirle al autor por mensaje privado y comprar con Saldo retenido: el pago se libera cuando recibes lo acordado.

Toma 30 segundos · vuelves a este tema al terminar
Puedes crear un div contenedor de 728x90px, que dentro encierre a dos div, cada uno de las dimensiones que deseas, y que estos a su vez sean etiquetas a, de esa forma podrías lograrlo fácilmente compañero. :encouragement:

Rápidamente una solución a lo que buscas sería lo siguiente:

Estilos:
Insertar CODE, HTML o PHP:
	#main-container {
		width: 728px;
		height: 90px;
		background: pink;
		border: solid 1px #000;
	}
	.secondary-container {
		width: 50%;
		height: 100%;
		display: inline-block;
		float: left;
	}
	.secondary-container a img {
		width: 100% !important;
	}


Estructura del contenedor:
Insertar CODE, HTML o PHP:
	<div id="main-container">
		<div class="secondary-container">
			<a target="_blank" href="http://google.com">
				<img class="secondary-container" src="http://losviajesdedomi.com/wp-content/uploads/2014/02/halong-bay-1-600x402.jpg" alt="">
			</a>
		</div>
		<div class="secondary-container">
			<a target="_blank" href="http://youtube.com">
				<img class="secondary-container" src="http://images.nationalgeographic.com.es/medio/2015/12/21/bf63ef82rio_narcea_tineo_720x480.jpg" alt="">
			</a>
		</div>
	</div>
 
Última edición:
Puedes crear un div contenedor de 728x90px, que dentro encierre a dos div, cada uno de las dimensiones que deseas, y que estos a su vez sean etiquetas a, de esa forma podrías lograrlo fácilmente compañero. :encouragement:

Rápidamente una solución a lo que buscas sería lo siguiente:

Estilos:
Insertar CODE, HTML o PHP:
	#main-container {
		width: 728px;
		height: 90px;
		background: pink;
		border: solid 1px #000;
	}
	.secondary-container {
		width: 50%;
		height: 100%;
		display: inline-block;
		float: left;
	}
	.secondary-container a img {
		width: 100% !important;
	}


Estructura del contenedor:
Insertar CODE, HTML o PHP:
	<div id="main-container">
		<div class="secondary-container">
			<a rel="nofollow" target="_blank" href="http://google.com">
				<img class="secondary-container" src="http://losviajesdedomi.com/wp-content/uploads/2014/02/halong-bay-1-600x402.jpg" alt="">
			</a>
		</div>
		<div class="secondary-container">
			<a rel="nofollow" target="_blank" href="http://youtube.com">
				<img class="secondary-container" src="http://images.nationalgeographic.com.es/medio/2015/12/21/bf63ef82rio_narcea_tineo_720x480.jpg" alt="">
			</a>
		</div>
	</div>

Gracias compañero, le echaré un ojo a ver si lo consigo.
 

Temas similares

Atrás
Arriba