Link dar load em 2 lugares simultaneamente

Drk · Julho 12, 2007

Eu tenho 1 pagina onde possuo 3 elementos.

Div + iframe1 + iframe2

Div

Na div, eu uso 1 menu em ordem alfabetica de varias marcas.

iframe1

Possuo 1 listagem vertical de todas logomarcas produzidas (com ancoras)

Entao atraves destas ancoras, o menu da Div ao ser clicado, aponta direto para o item da lista no iframe1.

iframe2

Possuo a descricao do icone selecionado no iframe1

-------------------------------------------------------------------------

Sabemos que o ..a href.. somente deixa linkar para 1 lugar, ok?

Ou seja, ou usamos 1 ancora para lista de logomarcas no iframe1

ou, usamos 1 html descritivo para o iframe2.

Eis a questao...

Como fazer com que ao clicar no item do menu (Div), ele faça a mudança em ambos iframes?

Por Ex:

Div (menu) ---------------- Iframe1 ---------------- Iframe2

Batata Ruffles ----------- logo Ruffles ------------ descriçaõ da batata ruffles

Pringles ---------------- logo Pringles ------------- descriçaõ da batata pringles

Eu clico no menu, e escolho Pringles.

Automaticamente, no iframe1, aparece a logomarca Pringles (ancora).

..., no iframe2, aparece a descrição geral da pringles (target direto ao iframe)

Bom, a dúvida é esta.

Caso alguem saiba como contornar esse bloqueio do ..a href.. eu agradeço.

Fabio Morikawa · Julho 12, 2007

se eu entendi, segue abaixo...deverá ser feito por javascript;algo do tipofunction setAnchor(hash){iframe1.src+=hashiframe2.src+=hash}<a href='#' onclick='setAnchor("Ruffles")'>Batata Ruffles</a>obs: não testei...qualquer coisa posta ai.

Drk · Julho 12, 2007

Ok, acho que minha pergunta é 1 pouco confusa, sou 1 pouco atrapalhado para explicar hehe.

Vou colocar umas figuras para facilitar a visualizacao.

Imagem Postada

Menu -------> iframe1 e iframe2

Opção 1:

Quando seleciono 1 nome do menu, no iframe1 irá dar 1 scroll na lista vertical de logomarcas.

Imagem Postada

Ao qual eu uso 1 ancora, para isso.

<a href="logomarca.html#barca" target="teste1">Barca</a>

No menu, ao clicar no texto Barca, ele aciona o iframe1 [teste1], entao a ancora Barca, faria o iframe1 rolar até onde está a logomarca da Barca.

Opção 2:

Quando seleciono 1 nome do menu, no iframe2 irá mostrar a descrição da marca escolhida

Imagem Postada

Ao qual eu uso 1 target, para isso.

<a href="Quadros/barca.html" target="teste2">Barca</a>

No menu, ao clicar no texto Barca, ele aciona o iframe2 [teste2], entao no iframe2 poderei visualizar a informação sobre a Barca.

Entao, o que eu realmente nao consigo fazer é que ao clicar no MENU, ambas opçoes aconteçam juntas.

Pois na tag do ..a href.. nao pode dar 2 targets.

Eu li algo sobre fazer com script ou onmouse click, mas realmente nao faço idéia de como usar essas funçoes.

Mais 1 vez, muito obrigado pela atençao.

Fabio Morikawa · Julho 12, 2007

tente isso<script>function setAnchor(href1,href2){iframe1.src=href1iframe2.src=href2}</script><a href='#' onclick='setAnchor('logomarca.html#barca','Quadros/barca.html')'>Barca</a>

Drk · Julho 16, 2007

Eu devo estar fazendo algo errado, pois ainda nao consegui implementar o script.

acho melhor postar o codigo da index.html hehehe

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="description" content="Portfólio de trabalhos de criação gráfica de André Prata - Design. Criação de Logotipos, Impressos Publicitários e Websites." /><meta name="keywords" content="design, logomarcas, logotipos, identidade visual, criação, websites, folders, folhetos, panfletos, design gráfico, desenhos, sites, Bragança Paulista" /><title>André Prata - Design</title><link href="estiloPrata.css" rel="stylesheet" type="text/css" media="screen" /><script type="text/JavaScript"><!--function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}function MM_jumpMenu(targ,selObj,restore){ //v3.0  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");  if (restore) selObj.selectedIndex=0;}//--></script><link href="css/quadros.css" rel="stylesheet" type="text/css" /><style type="text/css"><!--#Layer1 {	position:absolute;	left:18px;	top:178px;	width:137px;	height:25px;	z-index:5;}--></style></head><body onload="MM_preloadImages('images/logomarcasaceso.png','images/webaceso.png','images/impaceso.png','images/contatoaceso.png')"><div id="root"><iframe name="teste1" src="logomarca.html" scrolling="auto" id="t1" style="position:absolute; width: 186px; height: 364px; left: 165px; top: 55px; z-index: 5;" frameborder="0"></iframe><iframe src="display.html" name="teste2" marginwidth="0" marginheight="0" scrolling="no" frameborder="0" id="t2" style="position:absolute; left: 356px; top: 55px; width: 395px; height: 364px; z-index: 5;"></iframe><iframe name="lista" src="lista.html" scrolling="auto" id="l1" style="position:absolute; width: 150px; height: 203px; left: 10px; top: 216px; z-index: 5;" frameborder="0"></iframe><div id="Layer1">  <form name="Seletor" id="Seletor">	<select name="menu1" onchange="MM_jumpMenu('lista',this,0)">	  <option value="Listas/indice.html">Ordem Alfabética</option>	  <option value="abc.html">ABC</option>	  <option value="def.html">DEF</option>	  <option value="ghi.html">GHI</option>	  <option value="jkl.html">JKL</option>	  <option value="mno.html">MNO</option>	  <option value="pqr.html">PQR</option>	  <option value="stu.html">STU</option>	  <option value="vwy.html">VWY</option>	  <option value="xyz.html">XYZ</option>	  </select>  </form></div> <div id="logomarca"><img src="images/logo.png" alt="Andre Prata Design"/></div>   		  <div id="menu">		<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contato','','images/contatoaceso.png',1)"><img src="images/contatoapagado.png" alt="Contato" name="contato" width="110" height="20" border="0" id="contato" /></a><a href=""></a> 		<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('impressos','','images/impaceso.png',1)"><img src="images/impapagado.png" alt="Impressos" name="impressos" width="110" height="20" border="0" id="impressos" /></a><a href=""></a>		<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('websites','','images/webaceso.png',1)"><img src="images/webapagado.png" alt="websites" name="websites" width="110" height="20" border="0" id="websites" /></a><a href=""></a><a href="index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/logomarcasaceso.png',1)"><img src="images/logomarcasapagado.png" name="Image2" width="110" height="20" border="0" id="Image2" alt="logo_off"/></a><a href=""></a></div>		<div id="conteudo1">		  <div id="abertura"></div>  </div></div></body></html>

Fabio Morikawa · Julho 16, 2007

index onde contem os iframes

<script>function setAnchor(href1,href2){	document.getElementById('iframe1').src=href1	document.getElementById('iframe2').src=href2}</script><a href="#" onclick="setAnchor('frame1.html#op1','frame2.html#op1')">Opção 1</a><a href="#" onclick="setAnchor('frame1.html#op2','frame2.html#op2')">Opção 2</a><iframe id="iframe1" name="iframe1" src="frame1.html" height="100px"></iframe><iframe id="iframe2" name="iframe2" src="frame2.html" height="100px"></iframe>

iframe1

<a name="op1"></a>opção 1<br>opção 1<br>opção 1<br>opção 1<br>opção 1<br>opção 1<br>opção 1<br>opção 1<br>opção 1<br><a name="op2"></a>opção 2<br>opção 2<br>opção 2<br>opção 2<br>opção 2<br>opção 2<br>opção 2<br>opção 2<br>

iframe2

<a name="op1"></a>opção 1<br>opção 1<br>opção 1<br>opção 1<br>opção 1<br>opção 1<br>opção 1<br>opção 1<br>opção 1<br><a name="op2"></a>opção 2<br>opção 2<br>opção 2<br>opção 2<br>opção 2<br>opção 2<br>opção 2<br>opção 2<br>

Drk · Julho 17, 2007

Puxa, acreditas que ainda nao consegui fazer funcionar?

Bom aqui vai 1 imagem de como esta estruturado meu index.html

Pois do modo como eu estruturei, esta muito dificil eu conseguir fazer o script funcionar, eu acredito que seja erro de implementaçao meu. Pois ainda estou tentando me acostumar com isso, e agradeço muito a ajuda.

Imagem Postada

Onde Div Root contem todas iframes.

1 = Div, com 1 menu dropdown, que abre o iframe1

2= iframe1, onde aparece o menu do item selecionado por ordem alfabetica

3= iframe2, onde aparece o menu de "todos" logos vertical

4= iframe3, eh onde eu faço o display das caracteristicas.

Entao, o script teria que atraves do "2" (iframe1) conseguir dar a linkagem dupla, mas realmente deve estar fazendo algo errado, pois qdo tento fazer ou nao clica, ou nao funciona como esperado, mesmo que esteja com z-index maior que tudo.

Aqui vai o cod. da index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><meta name="description" content="Portfólio de trabalhos de criação gráfica de André Prata - Design. Criação de Logotipos, Impressos Publicitários e Websites." /><meta name="keywords" content="design, logomarcas, logotipos, identidade visual, criação, websites, folders, folhetos, panfletos, design gráfico, desenhos, sites, Bragança Paulista" /><title>André Prata - Design</title><link href="../estiloPrata.css" rel="stylesheet" type="text/css" media="screen" /><script type="text/JavaScript"><!--function MM_swapImgRestore() { //v3.0  var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;}function MM_preloadImages() { //v3.0  var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();	var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)	if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}}function MM_findObj(n, d) { //v4.01  var p,i,x;  if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {	d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}  if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];  for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);  if(!x && d.getElementById) x=d.getElementById(n); return x;}function MM_swapImage() { //v3.0  var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)   if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}}function MM_jumpMenu(targ,selObj,restore){ //v3.0  eval(targ+".location='"+selObj.options[selObj.selectedIndex].value+"'");  if (restore) selObj.selectedIndex=0;}//--></script><link href="../css/quadros.css" rel="stylesheet" type="text/css" /><style type="text/css"><!--#Layer1 {	position:absolute;	left:20px;	top:178px;	width:135px;	height:25px;	z-index:5;}--></style></head><body onload="MM_preloadImages('../images/logomarcasaceso.png','../images/webaceso.png','../images/impaceso.png','../images/contatoaceso.png')"><div id="root"><iframe name="lista" src="lista.html" scrolling="auto" id="l1" style="position:absolute; width: 150px; height: 203px; left: 10px; top: 216px; z-index: 5;" frameborder="0"></iframe><iframe name="iframe1" src="impressos.html" scrolling="auto" id="iframe1" style="position:absolute; width: 105px; height: 364px; left: 181px; top: 55px; z-index: 5;" frameborder="0"></iframe><iframe src="display.html" name="iframe2" marginwidth="0" marginheight="0" frameborder="0" id="iframe2" style="position:absolute; left: 300px; top: 55px; width: 460px; height: 364px; z-index: 5;"></iframe><div id="Layer1">  <form name="Seletor" id="Seletor">	<select name="menu1" onchange="MM_jumpMenu('lista',this,0)">	  <option value="indice.html">Selecione Opção</option>	  <option value="Listas/anuncio.html">Anúncios</option>	  <option value="Listas/cardapio.html">Cardápios</option>	  <option value="Listas/fold.html">Folders</option>	  <option value="Listas/rot.html">Rótulos</option>	</select>  </form>  </div> <div id="logomarca"><img src="../images/logo.png" alt="Andre Prata Design"/></div>   		  <div id="menu">		<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('contato','','../images/contatoaceso.png',1)"><img src="../images/contatoapagado.png" alt="Contato" name="contato" width="110" height="20" border="0" id="contato" /></a><a href=""></a> 		<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('impressos','','../images/impaceso.png',1)"><img src="../images/impapagado.png" alt="Impressos" name="impressos" width="110" height="20" border="0" id="impressos" /></a><a href=""></a>		<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('websites','','../images/webaceso.png',1)"><img src="../images/webapagado.png" alt="websites" name="websites" width="110" height="20" border="0" id="websites" /></a><a href=""></a><a href="../index.html" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','../images/logomarcasaceso.png',1)"><img src="../images/logomarcasapagado.png" name="Image2" width="110" height="20" border="0" id="Image2" alt="logo_off"/></a><a href=""></a></div>		<div id="conteudo1">		  <div id="abertura"></div>  </div></div></body></html>

Aqui o cod. do iframe1 (menu alfab.) xxxxx.html

<body><div id="lista"><!-- InstanceBeginEditable name="Body" -->  <table width="110%" border="0" cellpadding="0" cellspacing="0" class="texto">	<tr>	  <td><div><a href="../Quadros/bio_manteiga.html" target="iframe2">Biofresh - Manteiga</a></div></td>	</tr>	<tr>	  <td><div><a href="../Quadros/bio_meloes.html" target="iframe2">Biofresh - Melões</a></div></td>	</tr>	<tr>	  <td><div><a href="../Quadros/bio_parmesao.html" target="iframe2">Biofresh - Parmesão</a></div></td>	</tr>	<tr>	  <td><div><a href="../Quadros/guarani.html" target="iframe2">Guarani - Polvilho</a></div></td>	</tr>	<tr>	  <td><div><a href="../Quadros/lanupi_frescal.html" target="iframe2">Lanupi - Frescal</a></div></td>	</tr>	<tr>	  <td><div><a href="../Quadros/lanupi_palito.html" target="iframe2">Lanupi - Mussarela 1</a></div></td>	</tr>	<tr>	  <td><div><a href="../Quadros/lanupi_mussarela.html" target="iframe2">Lanupi - Mussarela 2</a></div></td>	</tr>	<tr>	  <td><div><a href="../Quadros/ra_mussarela.html" target="iframe2">RA - Mussarela</a></div></td>	</tr>  </table></div></body>

Aqui o cod. do iframe2 (menu vertical de logos) yyyy.html

<body><div id="iframeT1"><!-- InstanceBeginEditable name="Body" -->  <table width="100%" border="0" cellspacing="0" cellpadding="0">	<tr>	  <td><a href="Quadros/acn.html" target="iframe2"><img src="../images/impressos/tacn.jpg" alt="ACN" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/bio_manteiga.html" target="iframe2"><img src="../images/impressos/tbiofreshmanteiga.jpg" alt="Manteiga" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/bio_meloes.html" target="iframe2"><img src="../images/impressos/tbiofreshmeloes.jpg" alt="Melões" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/bio_parmesao.html" target="iframe2"><img src="../images/impressos/tbiofreshparmesao.jpg" alt="Parmesão" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/cavernas.html" target="iframe2"><img src="../images/impressos/tcavernas.jpg" alt="Cavernas" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/citroex.html" target="iframe2"><img src="../images/impressos/tcitroex.jpg" alt="Citroex" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/clean.html" target="iframe2"><img src="../images/impressos/tclean.jpg" alt="Clean" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/deco.html" target="iframe2"><img src="../images/impressos/tdeco.jpg" alt="Deco" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/guarani.html" target="iframe2"><img src="../images/impressos/tguaranipaodequeijo.jpg" alt="Polvilho" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/lanupi_frescal.html" target="iframe2"><img src="../images/impressos/tlanupifrescal.jpg" alt="Frescal" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/lanupi_palito.html" target="iframe2"><img src="../images/impressos/tlanupimussarela1.jpg" alt="Mussarela" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/lanupi_mussarela.html" target="iframe2"><img src="../images/impressos/tlanupimussarela2.jpg" alt="Mussarela" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/master.html" target="iframe2"><img src="../images/impressos/tmaster.jpg" alt="Master" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/mcutilar.html" target="iframe2"><img src="../images/impressos/tmcutilar.jpg" alt="Cutilar" width="80" height="80" border="0" /></a></td>	</tr>	<tr>	  <td><a href="Quadros/ra_mussarela.html" target="iframe2"><img src="../images/impressos/tramussarela.jpg" alt="Mussarela" width="80" height="80" border="0" /></a></td>	</tr>  </table></div></body>

Drk · Julho 17, 2007

Eu realmente estou 1 pouco perdido, pois entendi o lance de chamar por IDs, mas nao entendo o que estou fazendo errado, que nao consigo fazer que ocorra exatamente como no script.

De inicio o target no iframe1 eh em branco, entao eu jogo ele pra 1 div vazia (lista.html).

(Eu sei que tinha 1 opçao por javascript, mas nao lembro como deixar o 1o item do menu dropdown sem abrir nada... hehehe)

Depois que a pessoa escolhe 1 opçao de menu alfabetico, entao eu dou 1 target direto para 1 html aparecer no iframe1.

No iframe2, eu coloco todas logomarcas, ou seja, a pessoa tem 2 opcoes de navegar, 1 visual (iframe2) ou outra por menu de txt (menu alfabetico)

No iframe3, de inicio o target vai pra 1 div vazia, somente qdo se escolhe alguma logomarca, é que ele aparece algo.

1 pouco confuso de explicar ne?

Valeu pela ajuda dada até agora, Fabio.

http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Fabio Morikawa · Julho 17, 2007

cara agora você conseguiu complicar heheheagora quem se perdeu foi eu :wacko:

Drk · Julho 18, 2007

kkkkkkkkkkTalvez seja por isso que nao consegui implementar o script hehe.

Arquivado

Link dar load em 2 lugares simultaneamente

Recommended Posts

Drk 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabio Morikawa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Drk 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabio Morikawa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Drk 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabio Morikawa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Drk 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Drk 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fabio Morikawa 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Drk 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Não consigo carregar imagem do captcha no meu formulário

Estou criando uma calculadora de m2 e litros de tinta

Cruzamento de Bases

Fóruns

Tempo Real

Informação importante