Como conseguir este efecto

[Blashete]

Buenas, me gustaria saber como se haria este efecto (ponerlo en un html y cargarlo para er el resultado). Seguro que a mas de uno os seria util

<script type="text/javascript" src="http://www.lawebdelmaestro.net/barrita/izquierda.js"> </script><noscript><a href="http://www.lawebdelmaestro.net/"> http://www.LaWebDelMaestro.Net</a></noscript>

Lo he visto en esta web y me parece curioso, pero no se que codigo tengo que hacer:

este es el codigo del js

Código HTML:

function getURL(uri) {
uri.dir = location.href.substring(0,location.href.lastIndexOf('\/'));
uri.dom = uri.dir; if (uri.dom.substr(0,7) == 'http:\/\/') uri.dom = uri.dom.substr(7);
uri.path = ''; var pos = uri.dom.indexOf('\/'); if (pos > -1) {uri.path = uri.dom.substr(pos+1); uri.dom = uri.dom.substr(0,pos);}
uri.page = location.href.substring(uri.dir.length+1,location.href.length+1);
pos = uri.page.indexOf('?');if (pos > -1) {uri.page = uri.page.substring(0, pos);}
pos = uri.page.indexOf('#');if (pos > -1) {uri.page = uri.page.substring(0, pos);}
uri.ext = ''; pos = uri.page.indexOf('.');if (pos > -1) {uri.ext =uri.page.substring(pos+1); uri.page = uri.page.substr(0,pos);}
uri.file = uri.page;
if (uri.ext != '') uri.file += '.' + uri.ext;
if (uri.file == '') uri.page = 'index';
uri.args = location.search.substr(1).split("?");
return uri;
}

var uri = new Object();
getURL(uri);

document.write('<style><!-- @import url(http://www.lawebdelmaestro.net/barrita/estilo.css); --></style>'
+ '<div class="MPHWhiteBandSmallLeft"><img src="http://www.lawebdelmaestro.net/barrita/blanco.gif" width="163" height="163" border="0" usemap="#MPHLinkMapSmallLeft"></div>'
+ '<map name="MPHLinkMapSmallLeft"><area shape="poly" coords="163,0,0,163,0,133,133,0" href="http://www.lawebdelmaestro.net" target="_blank"></map>'
);

pero, de ahí no saco de donde sale lo que se muestra en la imagen... ni nada mas :)

Un saludo y gracias

[ludovico2000]

Para hacer que la zona diagonal sea linkable, utiliza un mapa:

<map name="MPHLinkMapSmallLeft"><area shape="poly" coords="163,0,0,163,0,133,133,0" href="http://www.lawebdelmaestro.net" target="_blank"></map>

Aplicado a la imagen en blanco y cuadrada:

<img src="http://www.lawebdelmaestro.net/barrita/blanco.gif" width="163" height="163" border="0" usemap="#MPHLinkMapSmallLeft"


Ahora, cómo hace que la imagen en blanco saque el dibujo del "banner", no lo veo así a botepronto...

LO TENGO:

utiliza un estilo aplicado a la capa:

Código:

...<div class="MPHWhiteBandSmallLeft">...

...http://www.lawebdelmaestro.net/barrita/estilo.css...

Código:

...
div.MPHWhiteBandSmallLeft			{
		position:absolute;
		left:0px;
		top:0px;
		overflow:visible;
		height:163px;
		width:163px;
		background-image:url(http://www.lawebdelmaestro.net/barrita/izquierda.gif);
		background-repeat:no-repeat;
/*		background-position:-200px -200px;*/
		background-color:transparent;
		margin:0;
		padding:0;
		color:#000;
		font-family:helvetica,verdana,arial,tahoma,sans-serif;
		z-index:1000000000;
		border:none;
		float:none;
			}

...

[Blashete]

Gracias ! :P

Joder pareces un detective jejeje. Gracias de nuevo tio