Tenho um código feito por designer alemães que vale a pena conferir

mavix · Junho 22, 2008

...É, bom pessoal espero que esse já seja um bom começo de estréia aqui no forum, aqui aprendi muita coisa e estou aprendendo ainda, e agora difinitivamente faço parte como menbro (Q BOM!!!)

É o seguinte achei esse código em um site sobre um compositor Alemão, e era lindo o efeito que dava, um incrível e duplo onmouseover que ao passar o mouse sobre o link ou sobre uma fotosinha que tinha lá do cara, ele exebia uma barrinha com cor que ligava o link à foto e no meio uma caixa com um submenu da mesma cor da barrinha era exebida com os links e também um efeito de uma outra foto imitando um filtro com transparência da mesma cor da barrinha era colocado em cima da foto anterior e agora venho aqui explica-lo e pedir a ajuda de alguém, pois, gostaria que o submenu não sumisse quando se clicasse em outro lugar fora dele a não ser no próprio link! O que achei mais massa nesse submenu é que o Javascript deixa o submenu sem sumir ao tirar o mouse de cima dele mesmo sendo onmouseover diferente de muitos submenus que vejo por aí, ele fica lá e só some quando se clica fora. O que pensei? Se ele sumisse só quando clicado no mesmo link de novo teriamos um toogle, pois pasmem amigos essa joinha difernte de muitos menus que já vi o código por aí num é movido a <ul> ou <li> e sim por IDs de divs lá no velho getElementByid Será que fui claro em? Só sumir o submenu quando clicado exclusivamente no mesmo link não em qualque outro lugar!!! Será que é possivel??? Alguém pode me ajudar??? Aí vai todo o código parte por parte (ORIGINALMENTE COMO ENCONTREI ESTAVA TUDO MISTURADO DESSA MESMA FORMA, DEPOIS SEPAREI O JAVASCRIPT E O CSS EM OUTRO LUGAR E OS CHAMEI NO HEAD SEM DEIXAR NADA INLINEE SEM ESSAS TRS E TDS FEIAS, OU SEJA: FULLTABLELESS!!!):

<html><head><!-- #BeginTemplate "/Templates/Startseite_e.dwt" --><!-- DW6 -->

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta name="keywords" content="Arnold Schoenberg, Arnold Schoenberg Center, Arnold Schoenberg Institute, Second Viennese School, Viennese Music history, art history, Musicology, Composer legacy, Music archive, Music library, Music collection, Concerts Vienna, Moedling Schoenberg House, Musicological Symposium, Alban Berg, Anton Webern, Twelve tone, Atonality, Expressionism, Exhibitions Vienna, Gertrud Schoenberg, Journal of the Arnold Schsnberg Center, Music history 20th twentieth century, Judaism Vienna, Composition, Music bibliography, Biography, mp3, Classical music, Music autographs, Music manuscripts, paintings, writings, recordings, Schoenberg as teacher, program notes, programme notes, Palais Fanto, modern music,  Blue rider, Fin de si�cle, music theory, dodecaphony">
<meta name="description" content="The Arnold Schönberg Center in Vienna (Austria) houses the legacy of Arnold Schönberg, organizes exhibitions, concerts and symposia concerning the Second Viennese School."><title>Arnold Schoenberg Center</title>

<!--Esses dois CSS,externo e interno abaixo, só serve pra tratar o texto e os links (decoração) e não tem nada haver com a função do Submenu ou com a aplicação do javascript-->

<link rel="stylesheet" href="default_e_arquivos/styles_edit.css">

<style type="text/css"><!-- .Navigation1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #FFFFFF; text-decoration: none} .Navigation2 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; text-decoration: none} .Position1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; color: #333333; text-decoration: none} .Position2 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; color: #333333; text-decoration: none} .Text1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #000000; word-spacing: -1px} .Link1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #103E71; text-decoration: none} .Eingabefeld1 { background-color: #cccccc; border: none} .Eingabefeld2 { background-color: #cccccc; border: none} a:active {  color: #CC0033} a:hover {  color: #CCCCCC} --> </style>



<script type="text/javascript">
// Bitte keine Aenderungen in diesem Berich durchfuehren
// copyright Andreas Niederer - Bohatsch Graphic Design GmbH
//Version 1.0

// Resize Fix fuer NE

function MM_reloadPage(init) {  //reloads the window if Nav4 resized
  if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
	document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
  else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
}

MM_reloadPage(true);


// Layer entsprechnden der uebergeben Parameter ein/ausblenden

function YY_showHideLayers(L2show, L2hide) { //v3.01
//copyright ©1998-2000 Yaromat.com
  if (document.layers){ //ns
	for (i=0; i<(document.layers.length); i++){
	  if (document.layers[i].name.search(L2hide) != -1){document.layers[i].visibility = 'hide';}
	  if (document.layers[i].name.search(L2show) != -1){document.layers[i].visibility = 'show';}
	}
  }else
  if (document.all != null){ //ie
	var yydiv = document.all.tags("DIV");
	for (i=0; i<(yydiv.length); i++){
	  if (yydiv[i]) {var yydivname = yydiv[i].id;} else {var yydivname = '';}
	  if (yydivname.search(L2hide) != -1) document.all[yydivname].style.visibility = 'hidden';
	  if (yydivname.search(L2show) != -1) document.all[yydivname].style.visibility = 'visible';
		}
  }else
  if (document.getElementById){ //mz
	var yydiv = document.getElementsByTagName("DIV");
	for (i=0; i<(yydiv.length); i++){
	  if (yydiv[i]) {var yydivname = yydiv[i].id;} else {var yydivname = '';}
	  if (yydivname.search(L2hide) != -1) document.getElementById(yydivname).style.visibility = 'hidden';
	  if (yydivname.search(L2show) != -1) document.getElementById(yydivname).style.visibility = 'visible';
	}
  }
}




// Navigation: Erster Rollover durch einen Klick abgefangen

firstClick=true

function my_mouseOver(my_show) {
	if (firstClick) {
		YY_showHideLayers(my_show,'M')		// Zeigen
	}
}


function my_Click(my_show) {/*
	if (!firstClick) {
		firstClick=true
		YY_showHideLayers(my_show,'M')		// Zeigen
	}
	else {
		menuOper=false 
		firstClick=false
		YY_showHideLayers('_','M')			// Alle ausblenden
	}*/
}


// Navigation: Klick ausserhalb registrieren

if (navigator.appName == "Netscape") {
  if (document.captureEvents) document.captureEvents(Event.MOUSEUP);
}

document.onmouseup = printEvent;

function printEvent(e) {
	if (navigator.appName == "Microsoft Internet Explorer"){
		mX = event.clientX;
		mY = event.clientY;
	  }
	  else {
		mX = e.pageX;
		mY = e.pageY;
	  }
	  //alert("Click at x = " + mX + " and y = " + mY);
		YY_showHideLayers('_','M')
	firstClick=true
}


// Browserabfrage und Plattformabrage fuer CSS


if (navigator.userAgent.indexOf("Win") != -1){
	//NE4 WIN 
	if (navigator.appName.indexOf('Netscape') != -1) {
		//document.write('<link rel="stylesheet" href="../lib/styles_win_ne.css">')
document.write('<style type="text/css"><!-- .Navigation1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #FFFFFF; text-decoration: none} .Navigation2 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; color: #333333; text-decoration: none} .Position1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; color: #333333; text-decoration: none} .Position2 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 13px; line-height: 15px; color: #333333; text-decoration: none} .Text1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #000000; word-spacing: -1px} .Link1 {  font-family: Verdana, Arial, Helvetica, sans-serif; font-size: 14px; line-height: 16px; color: #103E71; text-decoration: none} .Eingabefeld1 { background-color: #cccccc; border: none} .Eingabefeld2 { background-color: #cccccc; border: none} a:active {  color: #CC0033} a:hover {  color: #CCCCCC} --> </style>')

	}
	//IE4 WIN
//	else document.write('<link rel="stylesheet" href="lib/styles_win_ie.css">')
}

else {
	//NE4 MAC 
//	if (navigator.appName.indexOf('Netscape') != -1) document.write('<link rel="stylesheet" href="lib/styles_mac_ne.css">')
	//IE4 MAC
//	else document.write('<link rel="stylesheet" href="lib/styles_edit.css">')
}



// Browserfenster oeffnen

function MM_openBrWindow(theURL,winName,features) { //v2.0
 	fern=window.open(theURL,winName,features);
	setTimeout("window.fern.focus()",100)
}

</script>


</head>

<body leftmargin="0" topmargin="0" alink="#ff0033" bgcolor="#7f8588" link="#3f260f" marginheight="0" marginwidth="0" text="#000000" vlink="#4f361f">






<table align="left" border="0" cellpadding="0" height="122" width="760">
  <tbody><tr>
	<td height="54" width="522">
	
	
	
	</td>
	<td width="232"></td>
  </tr>
  <tr>
	<td height="62"></td>
	<td>

<div id="pscroller1" class="someclass" style="overflow: hidden; position: relative;"><div class="innerDiv" style="position: absolute; width: 200px; top: -16px;" id="pscroller11"><a href="http://www.schoenberg.at/8_shop/shop_various6_e.htm" class="Navigation1">New: Schoenberg-Mousepads</a><br><font class="Navigation2">in the ASC Online-Shop</font></div><div class="innerDiv" style="position: absolute; width: 200px; visibility: visible; top: 32px;" id="pscroller12"><a href="http://www.youtube.com/ascvideo" target="blank" class="Navigation1">Schoenberg on YouTube</a><br><font class="Navigation2">Videoclips about Life and Works</font></div></div><br></td>
  </tr>
</tbody></table>


			<p> </p>

	 <!--Essa div tem haver com a posição do link, observem que tudo é inline mas eu troquei
			  para ser chamado externamente-->
<div id="Navigation" style="position: absolute; left: 0px; top: 99px; width: 160px; height: 285px; z-index: 10; visibility: visible;"><!-- #BeginLibraryItem "/Library/M_Inhalt_e.lbi" -->
<table border="0" cellpadding="0" cellspacing="0" width="160">
  <tbody><tr>
	<td height="1" width="5"><img src="default_e_arquivos/leer.gif" height="1" width="1"></td>
	<td height="1" width="10"><img src="default_e_arquivos/leer.gif" height="1" width="1"></td>
	<td height="1" width="145"><img src="default_e_arquivos/ws.gif" height="1" width="45"></td>
  </tr>
  <tr>
	<td bgcolor="#496dd1" height="29" width="5"><img src="default_e_arquivos/leer.gif" height="1" width="1"></td>
	<td height="29" width="10"><img src="default_e_arquivos/leer.gif" height="1" width="1"></td>

	<!--primeiro link que o onmouseover aciona-->

	<td height="29" valign="top" width="145"><font face="Arial, Helvetica, sans-serif" size="-1"><a href="#" class="Navigation1" onmouseover="my_mouseOver('M1')" onclick="my_Click('M1')">Arnold
	  Schönberg!</a></font></td>
  </tr>
  <tr>
	<td bgcolor="#496dd1" height="1"><img src="default_e_arquivos/leer.gif" height="1" width="1"></td>
	<td height="1"><img src="default_e_arquivos/leer.gif" height="1" width="1"></td>
	<td height="1"><img src="default_e_arquivos/leer.gif" height="1" width="1"><img src="default_e_arquivos/ws.gif" height="1" width="45"></td>
  </tr>

  
  </tbody></table></div>

  <!-- essa div diz a posição do submenu, tal como sua comunicação com o Javascript atravéz de sua ID(div id="M1") -->

  <div id="M1" style="position: absolute; left: 165px; top: 100px; width: 150px; height: 180px; z-index: 11; visibility: hidden;"><!-- #BeginLibraryItem "/Library/M1_e.lbi" -->
  <!--aqui fica as configurações do submenu, tal como sua borda(border="0") e largura(width="165")-->
<table bgcolor="#496dd1" border="0" cellpadding="0" cellspacing="0" width="145">
	<tbody><tr>
	  <td width="10"> </td> 

	  <!--aqui fica a largura do texto(width="300") tal como sua cor de fundo no css que depois passei tudo pra outra div externamente-->

		  <td height="15" width="300"><a href="#" class="Navigation2"></a> <a href="#" class="Navigation2">Byographie</a></td>
 </tbody></table><!-- #EndLibraryItem --></div>

<!--aqui fica as configurações da faixa que liga o menu a foto, tal como sua posição altura larugra e etc...top: 100px; width: 330px; height: 30px; z-index: 9; background-color: rgb(73, 109, 209)-->

<div id="M1Balken" style="border: 1px none rgb(0, 0, 0); position: absolute; left: 0px; top: 100px; width: 330px; height: 30px; z-index: 9; background-color: rgb(73, 109, 209); visibility: hidden;"></div>

<!--aqui fica as configurações da primeira foto (thunbnail) que o java script aciona onmouseover, tal como suas configurações de largura, altura, posiciionamento etc.position: absolute; left: 330px; top: 55px; width: 105px; height: 75px; z-index: 8;"><img src="default_e_arquivos/M1_p.jpg" usemap="#b1" border="0"...-->

<div id="a" style="position: absolute; left: 330px; top: 55px; width: 105px; height: 75px; z-index: 8;"><img src="default_e_arquivos/M1_p.jpg" usemap="#b1" border="0" height="75" width="105"><map name="b1"><area shape="rect" coords="-1,45,44,76" href="#" onmouseover="YY_showHideLayers('M1','M')" onclick="my_Click('M1')"></map></div>

<!--aqui fica as configurações da segunda foto (thunbnail) que o java script aciona
ONMOUSEOVER e deixa aberta junto com o submenu, tal como suas configurações de largura, altura, posiciionamento etc.position: absolute; left: 330px; top: 55px; width: 105px; height: 75px; z-index: 9; visibility: hidden;-->

<div id="M1a" style="position: absolute; left: 330px; top: 55px; width: 105px; height: 75px; z-index: 9; visibility: hidden;"><img src="default_e_arquivos/M1_a.jpg" height="75" width="105"></div>


<!-- Version 1.0 --><body leftmargin="0" topmargin="0" alink="#ff0033" bgcolor="#7f8588" link="#3f260f" marginheight="0" marginwidth="0" text="#000000" vlink="#4f361f">

</body></html>

Bom pessoal é isso aí e espero ter explicado tudo direitinho troquem tudo todas as fotos e vejam o que é isso, no mais tentem manter as coisas como estão, tipo imagens do mesmo tamanho e tals só pra entender melhor depois troquem tudo apesar de assim já funcionar igualzinho os efeitos de javascript, mas claro sem as fotos, e não se equeçam que mando o site todo pra quem quiser zipado, pois o mesmo já saiu do ar pelo que me consta, posso tá enganado e vamos ver se alguém me ajuda deixando o subemenu sumir só quando clicar no mesmo link de origem que disparou o submenu apenas!!! Quem pode nos dar essa força aqui forum?!?!?!

Um abraço a todos e estou no aguardo...

hinom · Junho 22, 2008

poste o link da pagina original

mavix · Junho 25, 2008

Eureka!!! o site voltou ao ar e está aqui o link amigo, você que disse que queria o link então é esse o link: http://www.schoenberg.at/default_e.htm eu particulamente acho isso muito lindo!!!

E estou doido para consegir fazer o que quero com essse submenu, será que é possivel como disse antes na explicação acima em?!?!??!

hinom · Junho 27, 2008

ok. acessei o link e vi como funciona.

tecnicamente está muito mal feito. o script nao funciona corretamente

se for fazer algo dessse tipo sugiro que faça usando o Flash.

É muito mais seguro e prático do que utilizar o javascript

Entrar

Arquivado

Tenho um código feito por designer alemães que vale a pena conferir

Recommended Posts

mavix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hinom 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

mavix 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

hinom 5

Compartilhar este post

Link para o post

Compartilhar em outros sites

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Alteracao Tema Wordpress Profolio

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante