Ir para conteúdo
Fórum Script Brasil

Ricardo - PTR

Membros
  • Total de itens

    17
  • Registro em

  • Última visita

Tudo que Ricardo - PTR postou

  1. Boa Tarde, Estou com problemas para criar um efeito de zoom nas imagens de meu site. o efeito funciona se for aplciado em uma unica imagem, porém se eu tntar inserir mais imagens o efeito para. Basicamente, possuo 3 botões no momento(1, 2 e 3) e, quero que ao clicar neles, a imagem abaixo mude, mas mantendo o efeito do zoom. o problema é que no js do zoom ele cria um atributo chamado "data-zoomsrc", que deverá trazer o link da imagem no tamanho grande! alguém sabe como eu faria para alterar este valor de acordo com o botão? seguem os códigos que estou usando: 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" xml:lang="pt" lang="pt"> <head> <title>Galeria de fotos em Javascript</title> <script type="text/javascript" src="mojozoom.js"></script> <link type="text/css" href="mojozoom.css" rel="stylesheet" /> <script type="text/javascript"> function exibir(imagens) { //Informamos o ID da tag IMG que irá exibir a galeria var imagem = document.getElementById("myimage"); //Informamos as imagens a serem exibidas pela galeria switch(imagens) { case "01": imagem.src = "natal1_peq.jpg"; break; case "02": imagem.src = "natal2_peq.jpg"; break; case "03": imagem.src = "natal3_peq.jpg"; break; } } </script> </head> <body onload="exibir('01')"> Navegue na nossa galeria: <a href="#" onclick="java script: exibir('01');">01</a> - <a href="#" onclick="java script: exibir('02');">02</a> - <a href="#" onclick="java script: exibir('03');">03</a> <hr /> <img id="myimage" data-zoomsrc="natal1.jpg"> </body> </html> css div.mojozoom_marker { position : absolute; cursor : crosshair; } div.mojozoom_border { position : absolute; left:0px; top:0px; border : 1px solid black; width:100%; height:100%; } div.mojozoom_fill { position : absolute; left:0px; top:0px; width:100%; height:100%; background-color : white; opacity : 0.2; -moz-opacity : 0.2; -khtml-opacity : 0.2; filter:alpha(opacity=20); } img.mojozoom_img { padding : 0px; border: 0px; } div.mojozoom_imgctr { position : absolute; margin-left : 20px; border : 1px solid black; } js /* * MojoZoom 0.1.6 - JavaScript Image Zoom * Copyright (c) 2008 Jacob Seidelin, jseidelin@nihilogic.dk, http://blog.nihilogic.dk/ * Licensed under the MPL License [http://www.nihilogic.dk/licenses/mpl-license.txt] */ var MojoZoom = (function() { var $ = function(id) {return document.getElementById(id);}; var dc = function(tag) {return document.createElement(tag);}; var defaultWidth = 250; var defaultHeight = 250; function addEvent(element, ev, handler) { var doHandler = function(e) { return handler(e||window.event); } if (element.addEventListener) { element.addEventListener(ev, doHandler, false); } else if (element.attachEvent) { element.attachEvent("on" + ev, doHandler); } } function getElementPos(element) { var x = element.offsetLeft; var y = element.offsetTop; var parent = element.offsetParent; while (parent) { x += parent.offsetLeft - parent.scrollLeft; y += parent.offsetTop - parent.scrollTop; parent = parent.offsetParent; } return { x : x, y : y } } function getEventMousePos(element, e) { var scrollX = document.body.scrollLeft || document.documentElement.scrollLeft; var scrollY = document.body.scrollTop || document.documentElement.scrollTop; if (e.currentTarget) { var pos = getElementPos(element); return { x : e.clientX - pos.x + scrollX, y : e.clientY - pos.y + scrollY } } return { x : e.offsetX, y : e.offsetY } } function makeZoomable(img, zoomSrc, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow) { // make sure the image is loaded, if not then add an onload event and return if (!img.complete && !img.__mojoZoomQueued) { addEvent(img, "load", function() { img.__mojoZoomQueued = true; setTimeout(function() { makeZoomable(img, zoomSrc, zoomImgCtr, zoomWidth, zoomHeight, alwaysShow); }, 1); }); return; } img.__mojoZoomQueued = false; // Wrap everything in a timeout. // this fixes a problem where, if makeZoomable is called a second time after changing the src, // FF would not have figured out the new offsetHeight of the image yet. A small timeout helps though it's rather hackish. setTimeout(function(){ // sorry var isIE = !!document.all && !!window.attachEvent && !window.opera; var w = img.offsetWidth; var h = img.offsetHeight; var oldParent = img.parentNode; if (oldParent.nodeName != "A") { var linkParent = dc("a"); linkParent.setAttribute("href", zoomSrc); oldParent.replaceChild(linkParent, img); linkParent.appendChild(img); } else { var linkParent = oldParent; } linkParent.style.position = "relative"; linkParent.style.display = "block"; linkParent.style.width = w+"px"; linkParent.style.height = h+"px"; var imgLeft = img.offsetLeft; var imgTop = img.offsetTop; var zoom = dc("div"); zoom.className = "mojozoom_marker"; var zoomImg = dc("img"); zoomImg.className = "mojozoom_img"; zoomImg.style.position = "absolute"; zoomImg.style.left = "-9999px"; zoomImg.style.top = "-9999px"; zoomImg.style.maxWidth = "none"; zoomImg.style.maxHeight = "none"; zoomImg.style.zIndex = 10000001; document.body.appendChild(zoomImg); var parent = img.parentNode; var ctr = dc("div"); ctr.style.position = "absolute"; ctr.style.left = imgLeft+"px"; ctr.style.top = imgTop+"px"; ctr.style.width = w+"px"; ctr.style.height = h+"px"; ctr.style.overflow = "hidden"; ctr.style.display = "none"; ctr.appendChild(zoom); parent.appendChild(ctr); var zoomInput = parent; // clear old overlay if (img.__mojoZoomOverlay) parent.removeChild(img.__mojoZoomOverlay); img.__mojoZoomOverlay = ctr; // clear old high-res image if (img.__mojoZoomImage && img.__mojoZoomImage.parentNode) img.__mojoZoomImage.parentNode.removeChild(img.__mojoZoomImage); img.__mojoZoomImage = zoomImg; var useDefaultCtr = false; if (!zoomImgCtr) { zoomImgCtr = dc("div"); zoomImgCtr.className = "mojozoom_imgctr"; var imgPos = getElementPos(img); zoomImgCtr.style.left = w + imgPos.x + "px"; zoomImgCtr.style.top = imgPos.y + "px"; zoomImgCtr.style.width = (zoomWidth ? zoomWidth : defaultWidth) +"px"; zoomImgCtr.style.height = (zoomHeight ? zoomHeight : defaultHeight) +"px"; document.body.appendChild(zoomImgCtr); useDefaultCtr = true; } zoomImgCtr.style.overflow = "hidden"; if (!alwaysShow) { zoomImgCtr.style.visibility = "hidden"; } addEvent(zoomImg, "load", function() { // bail out if img has been removed from dom if (!zoomImg.parentNode) return; var zoomWidth = zoomImg.offsetWidth ? zoomImg.offsetWidth : zoomImg.naturalWidth; var zoomHeight = zoomImg.offsetHeight ? zoomImg.offsetHeight : zoomImg.naturalHeight; var ctrWidth = zoomImgCtr.offsetWidth; var ctrHeight = zoomImgCtr.offsetHeight; var ratioW = zoomWidth / w; var ratioH = zoomHeight / h; var markerWidth = Math.round(ctrWidth / ratioW); var markerHeight = Math.round(ctrHeight / ratioH); document.body.removeChild(zoomImg); zoomImgCtr.appendChild(zoomImg); var zoomFill = dc("div"); zoomFill.className = "mojozoom_fill"; zoom.appendChild(zoomFill); var zoomBorder = dc("div"); zoomBorder.className = "mojozoom_border"; zoom.appendChild(zoomBorder); zoom.style.width = markerWidth+"px"; zoom.style.height = markerHeight+"px"; if (alwaysShow) { zoom.style.left = "0px"; zoom.style.top = "0px"; zoomImg.style.left = "0px"; zoomImg.style.top = "0px"; } var isInImage = false; if (!alwaysShow) { addEvent(zoomInput, "mouseout", function(e) { var target = e.target || e.srcElement; if (!target) return; if (target.nodeName != "DIV") return; var relTarget = e.relatedTarget || e.toElement; if (!relTarget) return; while (relTarget != target && relTarget.nodeName != "BODY" && relTarget.parentNode) { relTarget = relTarget.parentNode; } if (relTarget != target) { isInImage = false; ctr.style.display = "none"; zoomImgCtr.style.visibility = "hidden"; } } ); // a bit of a hack, mouseout is sometimes not caught if moving mouse really fast addEvent(document.body, "mouseover", function(e) { if (isInImage && !(e.toElement == zoomBorder || e.target == zoomBorder)) { ctr.style.display = "none"; zoomImgCtr.style.visibility = "hidden"; isInImage = false; } } ); } addEvent(zoomInput, "mousemove", function(e) { isInImage = true; var imgPos = getElementPos(img); if (useDefaultCtr) { zoomImgCtr.style.left = w + imgPos.x + "px"; zoomImgCtr.style.top = imgPos.y + "px"; } ctr.style.display = "block"; zoomImgCtr.style.visibility = "visible"; var pos = getEventMousePos(zoomInput, e); if (e.srcElement && isIE) { if (e.srcElement == zoom) return; if (e.srcElement != zoomInput) { var zoomImgPos = getElementPos(e.srcElement); pos.x -= (imgPos.x - zoomImgPos.x); pos.y -= (imgPos.y - zoomImgPos.y); } } var x = markerWidth/2; var y = markerHeight/2; if (!isIE) { pos.x -= imgLeft; pos.y -= imgTop; } if (pos.x < x) pos.x = x; if (pos.x > w-x) pos.x = w-x; if (pos.y < y) pos.y = y; if (pos.y > h-y) pos.y = h-y; var left = ((pos.x - x)|0); var top = ((pos.y - y)|0); zoom.style.left = left + "px"; zoom.style.top = top + "px"; zoomImg.style.left = -((pos.x*ratioW - ctrWidth/2)|0)+"px"; zoomImg.style.top = -((pos.y*ratioH - ctrHeight/2)|0)+"px"; } ); }); // I've no idea. Simply setting the src will make IE screw it self into a 100% CPU fest. In a timeout, it's ok. setTimeout(function() { zoomImg.src = zoomSrc; }, 1); }, 1); } function init() { var images = document.getElementsByTagName("img"); for (var i=0;i<images.length;i++) { var img = images[i]; var zoomSrc = img.getAttribute("data-zoomsrc"); if (zoomSrc) { makeZoomable(img, zoomSrc, document.getElementById(img.getAttribute("id") + "_zoom"), null, null, img.getAttribute("data-zoomalwaysshow")=="true"); } } } return { addEvent : addEvent, init : init, makeZoomable : makeZoomable }; })(); MojoZoom.addEvent(window, "load", MojoZoom.init); Desde já obrigado :blush:
  2. na minha visualização a unica coisa q aconteceu foi o logo cortado (pra esquerda) e o espaço em branco pra direita. você podia colok a div container centralizada e tirar aquele margin da box-title de -43px obs.: só uma opnião, não sei o que você pretende fazer pela frente =D
  3. galera dei mais uma pesquisada e achei a solução. segue o código caso alguém tenha um problema semelhante: <script language="JavaScript" type="text/javascript"> function get_height(){ x = document.getElementById("meio").offsetHeight; y = document.getElementById("dir"); z = document.getElementById("esq"); y.style.height=(x + 'px'); z.style.height=(x + 'px'); } </script> obrigado.
  4. Bom dia galera, estava com um problema com algumas divs no site que estou criando e, aparentemente a solução pra esse rpoblema seria as linahs de código: document.getElementById("div_id").offsetHeight; e style.width e eu não tenho conhecimento sobre isto, porisso gostaria que alguém me ajudasse. basicamente, o que eu preciso na realidade é pegar a altura de uma div, e aplicar a outras divs(mais de uma). e como o conteúdo será dinâmico, preciso que esztas divs sempre tenham o mesmo tamanho, independente do conteúdo. é possível de se fazer isso? obrigado.
  5. hummm =/ firmeza vo ve la se alguém me ajuda =D vlws ae vinny ^^ edit: achei a solução pro problema segue o código caso alguém tenha um problema semelhante: <script language="JavaScript" type="text/javascript"> function get_height(){ x = document.getElementById("meio").offsetHeight; y = document.getElementById("dir"); z = document.getElementById("esq"); y.style.height=(x + 'px'); z.style.height=(x + 'px'); } </script> Obrigado.
  6. não foi grande coisa mais, tamo ae pra se ajuda =D boa sort ^^
  7. não é possivel inserir esta borda direto no li em vez de deixar na imagem?
  8. galera não sei se vocês vão conseguir me entender, mas dei uma pesquisada e, aparentemente o código document.getElementById("div_id").offsetHeight; somado a style.width resolveria todo o meu problema, pois poderia definir a algura de uma div do conteúdo para as outras. o único problema é: eu não sei usa isso o.o alguém pode me da um help ai por favor? obrigado.
  9. desculpe mais não entendi o que você quuer fazer então :huh: visualizando no ff e no ie, o li.selected sempre fica na mesma posição (com ou sem o position). a única coisa que muda é que ao tirar o position, o menu abaixo dele pula uma linha (o que não ocorre com o position:absolute)
  10. você pode tirar a altura 100% do menu e deixar uma altura fixa. do jeito que tá ele vai estica de acordo com a página.
  11. você diz aquele espaço cinza entre o rodapé e o vetor? (uns 5px mais ou menos?)
  12. vou subir ela e ai insiro o link aqui obrigado. segue o link da página já no ar(ignore as imagens do menu por favor, fiquei com preguiça de alinha isso): http://www.sanny.com.br/si/site/3100 nesse caso, o rodapé ficou em cima do conteúdo. Se eu consigo colocar embaixo, ou o conteúdo some dentro do espaço dele após atingir o limite da div principal. Ou ele não estica em 100%. Lembrando que neste site o conteúdo será dinamico, com um editor online para o mesmo. Por este motivo estou sofrendo tanto :wacko: obrigado novamente
  13. tenta algo como isso: <script language="JavaScript" type="text/javascript"> if (screen.width == "1600" && screen.width < "1920") { document.write("<link rel='stylesheet' type='text/css' href='estilo6.css'>"); } if (screen.width == "1440" && screen.width < "1600") { document.write("<link rel='stylesheet' type='text/css' href='estilo5.css'>"); } if (screen.width == "1280" && screen.width < "1440") { document.write("<link rel='stylesheet' type='text/css' href='estilo4.css'>"); } if (screen.width == "1152" && screen.width < "1280") { document.write("<link rel='stylesheet' type='text/css' href='estilo3.css'>"); } if (screen.width >= "1024" && screen.width < "1152") { document.write("<link rel='stylesheet' type='text/css' href='estilo2.css'>"); } if (screen.width >= "800" && screen.width < "1024") { document.write("<link rel='stylesheet' type='text/css' href='estilo1.css'>"); } if (screen.width < "800") { document.write("<link rel='stylesheet' type='text/css' href='estilo.css'>"); } </script> O que você precisa definir é apenas os tamanhos das telas, e criar um CSS para cada uma. Acredito que deve existir outras formas masi simples pro seu caso, porém não sou nenhum expert no assunto. Espero que essa forma seja útil para você.
  14. eae manin, nos estilos, você não deu um espaço da url da imagem pro repeat: background: url('http://2.bp.blogspot.com/_q3nktXr_ADU/TLS8KDTJ8iI/AAAAAAAAACE/OaUceFrf-rI/s1600/31.png')repeat-x; so coloca esse espaço que vai funciona qualquer coisa posta aqui dinovo
  15. eae manin, o problema é a diferença de resolução de cada computador, você deve ter percebido que as imagens também aparentam ser menores ou maiores em outros monitores. o que você pode fazer é modificar a medida de tamanho de fonte, para alguma medida relativa, ou ultilizar o javascript pra identificar a resolução e alterar o tamanho das fontes.
  16. Boa tarde galera, Estou trabalhando em um site de um cliente e, desde que comecei a trabalhar com web uso tabelas pra organizar o layout, porém isso já está ultrapassado, e estou querendo me atualizar com as divs. Tentei criar o site com um menu no topo, um banner central, uma barra com os titulos e o caminho percorrido no site, conteudo (formado por 3 colunas) e rodape. O que acontece é que já faz uma semana que estou pesquisando e, um problema sempre aparece neste layout. Quando as colunas de conteúdo ficam em 100%, as outras não acompanham, quando as outras acompanham, tudo fica em cima do rodapé. Entre outros problemas. Gostaria de saber se vocês podem me da uma ajuda com o código inicial deste layout para que eu possa dar continuidade. Segue os códigos que estou usando(deixei apenas o que acredito ser importante): css: /* ínicio css */ *{margin:0px; padding:0px; border: 0px;} html, body{height:100%;} /* div geral do site */ #geral {width:1258px; margin:0 auto; height: 100%;} /* div com menu do topo */ #topo {width: 1258px; height:64px; margin-bottom: 10px;} /* div com banner, localizao abaixo do menu */ #banner_slides {width: 1248px; height: 275px; margin-bottom: 10px; margin-left: 5px; margin-right: 5px;} /* div com o titulo */ #barra_titulo {width: 1248px; height: 45x; margin-bottom: 10px; margin-left: 5px; margin-right: 5px; margin-top: 10px; overflow:hidden;} /* ínicio do conteúdo */ #principal {width: 1248px; height: 100%; margin-left: 5px; margin-right: 5px;} /* dentro da div principal, inseri 3 colunas: esquerda, meio e direita */ #coluna_esquerda, #coluna_direita, #meio {float:left; height: 100%;} #coluna_esquerda {width:242px;} #coluna_direita {width:242px;} #meio {width:744px; margin-left: 10px; margin-right: 10px;} /* dentro de cada uma destas colunas tera um um quadro com as bordas arredondadas, dividi ele em 3 linhas: superior, central e inferior. Abaixo deste quadro poderá ser inserido mais conteúdo(em qualquer uma das 3 colunas) */ .painel-superior {width: 100%; height: 9px;} .painel-superior .esq {width: 9px; height: 9px; float: left;} .painel-superior .meio {height: 9px; background: url(../imagens/pnl_c.png) repeat-x; float: left;} .painel-superior .dir {width: 9px; height: 9px; float: left;} .painel-central {overflow: hidden; height: 100%;} .painel-central .esq {width: 9px; float: left; background: url(../imagens/pnl_e.png) repeat-y; height: 100%;} .painel-central .meio {float: left; height: 100%;} .painel-central .dir {width: 9px; float: left; background: url(../imagens/pnl_d.png) repeat-y; height: 100%;} .titulo-painel {width: 214px; border: #d4d4d4 1px solid; background-color: #f7f7f7; padding: 5px; margin-top: 10px; margin-bottom: 5px; font-family: arial; font-size: 12px; color: #666; font-weight:bold;} .subtitulo-painel {width: 204px; font-family: arial; font-size: 12px; color: #999; margin-left: 20px; margin-top: 2px; margin-bottom: 2px; font-weight:bold;} .painel-inferior {width: 100%; height: 9px;} .painel-inferior .esq {width: 9px; height: 9px; float: left;} .painel-inferior .meio {height: 9px; background: url(../imagens/pnl_r.png) repeat-x; float: left;} .painel-inferior .dir {width: 9px; height: 9px; float:right;} /* ínicio rodape */ #rodape {width: 1248px; height:40px; clear:both; position: relative; margin-top: 30px; margin-left: 5px; margin-right: 5px;} html <!-- ínicio --> <div id="geral"> <!-- ínicio topo --> <div id="topo">aqui vai o menu do topo</div> <!-- fim topo --> <!-- ínicio banner --> <div id="banner_slides">aqui vai o banner rotativo</div> <!-- fim banner --> <!-- ínicio barra de título --> <div id="barra_titulo">aqui vai o titulo da página</div> <!-- fim barra de título --> <!-- ínicio conteúdo da página --> <div id="principal"> <!-- ínicio da coluna da esquerda, as imagens são apenas as bordas arredondadas --> <div id="coluna_esquerda"> <div class="painel-superior"> <div class="esq"><img src="templates/2010/1280/imagens/pnl_ce.png" width="9" height="9"/></div> <div class="meio" style="width: 224px;"><img src="templates/2010/1280/imagens/pnl_c.png" width="1" height="9"/></div> <div class="dir"><img src="templates/2010/1280/imagens/pnl_cd.png" width="9" height="9"/></div> </div> <div class="painel-central"> <div class="esq"></div> <div class="meio" style="width: 224px;"> <div class="titulo-painel">:: Antropometria</div> <div class="subtitulo-painel">Antropometria</div> <div class="subtitulo-painel">Cardiologia</div> <div class="subtitulo-painel">Software</div> <div class="subtitulo-painel">Pediatria</div> <div class="titulo-painel">:: Monitores de Frequencia Cardíaca</div> <div class="subtitulo-painel">Monitores Cardíacos</div> <div class="subtitulo-painel">Pedômetro</div> <div class="subtitulo-painel">Cronômetros</div> <div class="titulo-painel">:: Fisioterapia</div> <div class="subtitulo-painel">Anatomia</div> <div class="subtitulo-painel">Eletroterapia</div> <div class="subtitulo-painel">Reabilitação</div> <div class="subtitulo-painel">Faixa Elástica e Acessórios</div> <div class="subtitulo-painel">Respiratória</div> <div class="titulo-painel">:: Treinamento Desportivo</div> <div class="subtitulo-painel">Condicionamento Físico</div> <div class="subtitulo-painel">Arbitragem</div> <div class="titulo-painel">:: Glicemia, Colesterol e Lactato</div> <div class="titulo-painel">:: Diversos</div> </div> <div class="dir"></div> </div> <div class="painel-inferior"> <div class="esq"><img src="templates/2010/1280/imagens/pnl_re.png" width="9" height="9"/></div> <div class="meio" style="width: 224px;"><img src="templates/2010/1280/imagens/pnl_r.png" width="1" height="9"/></div> <div class="dir"><img src="templates/2010/1280/imagens/pnl_rd.png" width="9" height="9"/></div> </div> </div> <!-- fim da coluna esquerda--> <!-- inicio da coluna do meio--> <div id="meio"> <div class="painel-superior"> <div class="esq"><img src="templates/2010/1280/imagens/pnl_ce.png" width="9" height="9"/></div> <div class="meio" style="width: 726px;"><img src="templates/2010/1280/imagens/pnl_c.png" width="1" height="9"/></div> <div class="dir"><img src="templates/2010/1280/imagens/pnl_cd.png" width="9" height="9"/></div> </div> <div class="painel-central"> <div class="esq"></div> <div class="meio" style="width: 726px;"><#pagina> </div> <div class="dir"></div> </div> <div class="painel-inferior"> <div class="esq"><img src="templates/2010/1280/imagens/pnl_re.png" width="9" height="9"/></div> <div class="meio" style="width: 726px;"><img src="templates/2010/1280/imagens/pnl_r.png" width="1" height="9"/></div> <div class="dir"><img src="templates/2010/1280/imagens/pnl_rd.png" width="9" height="9"/></div> </div> </div> <!-- fim da coluna do meio--> <!-- inicio da coluan direita--> <div id="coluna_direita"> <div class="painel-superior"> <div class="esq"><img src="templates/2010/1280/imagens/pnl_ce.png" width="9" height="9"/></div> <div class="meio" style="width: 224px;"><img src="templates/2010/1280/imagens/pnl_c.png" width="1" height="9"/></div> <div class="dir"><img src="templates/2010/1280/imagens/pnl_cd.png" width="9" height="9"/></div> </div> <div class="painel-central"> <div class="esq"></div> <div class="meio" style="width: 224px;"><#lateral></div> <div class="dir"></div> </div> <div class="painel-inferior"> <div class="esq"><img src="templates/2010/1280/imagens/pnl_re.png" width="9" height="9"/></div> <div class="meio" style="width: 224px;"><img src="templates/2010/1280/imagens/pnl_r.png" width="1" height="9"/></div> <div class="dir"><img src="templates/2010/1280/imagens/pnl_rd.png" width="9" height="9"/></div> </div> </div> <!-- fim da coluna direita--> </div> <!-- fim conteúdo da página --> </div> <!-- ínicio rodapé --> <div id="rodape"> rodape </div> <!-- fim rodapé --> <!-- fim --> Obrigado.
×
×
  • Criar Novo...