Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
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.
Ok, acho que minha pergunta é 1 pouco confusa, sou 1 pouco atrapalhado para explicar hehe.
Vou colocar umas figuras para facilitar a visualizacao.
/applications/core/interface/imageproxy/imageproxy.php?img=http://img.photobucket.com/albums/v422/paladini/exemplo.jpg&key=90f151c242a88673cf8cb943212d1adc6cd9ed7683cc30bfd67f61da78f8fbdd" alt="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.
/applications/core/interface/imageproxy/imageproxy.php?img=http://img.photobucket.com/albums/v422/paladini/exemplo2.jpg&key=581af7d297b0516af4d2186d07aed1a072f49bac09b2df7d253fd242e02d5568" alt="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
/applications/core/interface/imageproxy/imageproxy.php?img=http://img.photobucket.com/albums/v422/paladini/exemplo3.jpg&key=c268ff2f6d2d99cc3fa9bc2a55c48eeab49a44b61e8ea4c5631b952b03bab454" alt="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.
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>
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">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>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>
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.
/applications/core/interface/imageproxy/imageproxy.php?img=http://img.photobucket.com/albums/v422/paladini/layout.jpg&key=f340ed159a9a2fdd0de6b7e66f92b141d74be2be5f7bd0f16a6b5786ed3a351a" alt="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">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>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
cara agora você conseguiu complicar heheheagora quem se perdeu foi eu :wacko:
kkkkkkkkkkTalvez seja por isso que nao consegui implementar o script hehe.
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.