marvi

há ta Rafael... no caso terei uma variavel pegando informações do banco, tipo: Algo assim: <%=rsvideo("video")%> Como vou fazer um replace nisso, entende? dentro desse rsvideo("video") tem: <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/cl6Twx1i8DY&hl=pt-br&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/cl6Twx1i8DY&hl=pt-br&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> Se eu fizer o seguinte (segundo o link que você me passou): replace(rsvideo("video"),"425","200") rsvideo("video") = variável que possui o caracter que eu desejo substituir 425 = caracter que irei substituir 200 = caracter que substituirá É isso aí teoricamente, isso? Vou tentar então!

Olá pessoal, Estou querendo colocar em uma página com videos que vem do Youtube, mas ela deve ter uma dimensão certa e esses vídeos vai ser cadastrados através de um formulário para o banco de dados exibir na página... Como faço? Pois o Youtube libera esse codigo para colocar na página: <object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/cl6Twx1i8DY&hl=pt-br&fs=1"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/cl6Twx1i8DY&hl=pt-br&fs=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object> Mas essas dimensões padrões, width="425" height="344", não podem ser como esse padrão do youtube, tem que ser menor na página... Como vou criar algo que diminua o video no youtube e exiba na página que vem do banco? É tipo um cadastro de videos que vem do youtube para colocar em um site... Obrigado! Marcelo

Pessoal, tenho um comando que chama uma divs: Essa exibe normal: <div name="tabLegal" id="tabLegal" style="display:none"> <!--#include file="imagensilustracao.asp"--> </div> Mas essa não exibe nada: <div name="tabFone" id="tabFone" style="display:none"> <!--#include file="imagensplantas.asp"--> </div> Descobrir que nesta div que não exibe nada tem um problema: dentro do include imagensplantas.asp tem mais algumas divs com CSS <div id="galeria" > <div id="slide"> <span id="seta-esq"></span> <div id="tira" > <ul id="inner-tira"> E quando deleto essas divs acima na pagina imagensplantas.asp ela exibe a div com o imagensplantas.asp, mas preciso dessas divs e agora?

Mas aí é que está... por isso perguntei se alguém conhece o lightbox pois ele vem com uma pasta cheio de script...e CSS... um deles: // ----------------------------------------------------------------------------------- // // Lightbox v2.04 // by Lokesh Dhakar - http://www.lokeshdhakar.com // Last Modification: 2/9/08 // // For more information, visit: // http://lokeshdhakar.com/projects/lightbox2/ // // Licensed under the Creative Commons Attribution 2.5 License - http://creativecommons.org/licenses/by/2.5/ // - Free for use in both personal and commercial projects // - Attribution requires leaving author name, author link, and the license info intact. // // Thanks: Scott Upton(uptonic.com), Peter-Paul Koch(quirksmode.com), and Thomas Fuchs(mir.aculo.us) for ideas, libs, and snippets. // Artemy Tregubenko (arty.name) for cleanup and help in updating to latest ver of proto-aculous. // // ----------------------------------------------------------------------------------- /* Table of Contents ----------------- Configuration Lightbox Class Declaration - initialize() - updateImageList() - start() - changeImage() - resizeImageContainer() - showImage() - updateDetails() - updateNav() - enableKeyboardNav() - disableKeyboardNav() - keyboardAction() - preloadNeighborImages() - end() Function Calls - document.observe() */ // ----------------------------------------------------------------------------------- // // Configurationl // LightboxOptions = Object.extend({ fileLoadingImage: 'images/loading.gif', fileBottomNavCloseImage: 'images/closelabel.gif', overlayOpacity: 0.8, // controls transparency of shadow overlay animate: true, // toggles resizing animations resizeSpeed: 7, // controls the speed of the image resizing animations (1=slowest and 10=fastest) borderSize: 10, //if you adjust the padding in the CSS, you will need to update this variable // When grouping images this is used to write: Image # of #. // Change it for non-english localization labelImage: "Image", labelOf: "of" }, window.LightboxOptions || {}); // ----------------------------------------------------------------------------------- var Lightbox = Class.create(); Lightbox.prototype = { imageArray: [], activeImage: undefined, // initialize() // Constructor runs on completion of the DOM loading. Calls updateImageList and then // the function inserts html at the bottom of the page which is used to display the shadow // overlay and the image container. // initialize: function() { this.updateImageList(); this.keyboardAction = this.keyboardAction.bindAsEventListener(this); if (LightboxOptions.resizeSpeed > 10) LightboxOptions.resizeSpeed = 10; if (LightboxOptions.resizeSpeed < 1) LightboxOptions.resizeSpeed = 1; this.resizeDuration = LightboxOptions.animate ? ((11 - LightboxOptions.resizeSpeed) * 0.15) : 0; this.overlayDuration = LightboxOptions.animate ? 0.2 : 0; // shadow fade in/out duration // When Lightbox starts it will resize itself from 250 by 250 to the current image dimension. // If animations are turned off, it will be hidden as to prevent a flicker of a // white 250 by 250 box. var size = (LightboxOptions.animate ? 250 : 1) + 'px'; // Code inserts html at the bottom of the page that looks similar to this: // // <div id="overlay"></div> // <div id="lightbox"> // <div id="outerImageContainer"> // <div id="imageContainer"> // <img id="lightboxImage"> // <div style="" id="hoverNav"> // <a href="#" id="prevLink"></a> // <a href="#" id="nextLink"></a> // </div> // <div id="loading"> // <a href="#" id="loadingLink"> // <img src="images/loading.gif"> // </a> // </div> // </div> // </div> // <div id="imageDataContainer"> // <div id="imageData"> // <div id="imageDetails"> // <span id="caption"></span> // <span id="numberDisplay"></span> // </div> // <div id="bottomNav"> // <a href="#" id="bottomNavClose"> // <img src="images/close.gif"> // </a> // </div> // </div> // </div> // </div> var objBody = $$('body')[0]; objBody.appendChild(Builder.node('div',{id:'overlay'})); objBody.appendChild(Builder.node('div',{id:'lightbox'}, [ Builder.node('div',{id:'outerImageContainer'}, Builder.node('div',{id:'imageContainer'}, [ Builder.node('img',{id:'lightboxImage'}), Builder.node('div',{id:'hoverNav'}, [ Builder.node('a',{id:'prevLink', href: '#' }), Builder.node('a',{id:'nextLink', href: '#' }) ]), Builder.node('div',{id:'loading'}, Builder.node('a',{id:'loadingLink', href: '#' }, Builder.node('img', {src: LightboxOptions.fileLoadingImage}) ) ) ]) ), Builder.node('div', {id:'imageDataContainer'}, Builder.node('div',{id:'imageData'}, [ Builder.node('div',{id:'imageDetails'}, [ Builder.node('span',{id:'caption'}), Builder.node('span',{id:'numberDisplay'}) ]), Builder.node('div',{id:'bottomNav'}, Builder.node('a',{id:'bottomNavClose', href: '#' }, Builder.node('img', { src: LightboxOptions.fileBottomNavCloseImage }) ) ) ]) ) ])); $('overlay').hide().observe('click', (function() { this.end(); }).bind(this)); $('lightbox').hide().observe('click', (function(event) { if (event.element().id == 'lightbox') this.end(); }).bind(this)); $('outerImageContainer').setStyle({ width: size, height: size }); $('prevLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage - 1); }).bindAsEventListener(this)); $('nextLink').observe('click', (function(event) { event.stop(); this.changeImage(this.activeImage + 1); }).bindAsEventListener(this)); $('loadingLink').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); $('bottomNavClose').observe('click', (function(event) { event.stop(); this.end(); }).bind(this)); var th = this; (function(){ var ids = 'overlay lightbox outerImageContainer imageContainer lightboxImage hoverNav prevLink nextLink loading loadingLink ' + 'imageDataContainer imageData imageDetails caption numberDisplay bottomNav bottomNavClose'; $w(ids).each(function(id){ th[id] = $(id); }); }).defer(); }, // // updateImageList() // Loops through anchor tags looking for 'lightbox' references and applies onclick // events to appropriate links. You can rerun after dynamically adding images w/ajax. // updateImageList: function() { this.updateImageList = Prototype.emptyFunction; document.observe('click', (function(event){ var target = event.findElement('a[rel^=lightbox]') || event.findElement('area[rel^=lightbox]'); if (target) { event.stop(); this.start(target); } }).bind(this)); }, // // start() // Display overlay and lightbox. If image is part of a set, add siblings to imageArray. // start: function(imageLink) { $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'hidden' }); // stretch overlay to fill page and fade in var arrayPageSize = this.getPageSize(); $('overlay').setStyle({ width: arrayPageSize[0] + 'px', height: arrayPageSize[1] + 'px' }); new Effect.Appear(this.overlay, { duration: this.overlayDuration, from: 0.0, to: LightboxOptions.overlayOpacity }); this.imageArray = []; var imageNum = 0; if ((imageLink.rel == 'lightbox')){ // if image is NOT part of a set, add single image to imageArray this.imageArray.push([imageLink.href, imageLink.title]); } else { // if image is part of a set.. this.imageArray = $$(imageLink.tagName + '[href][rel="' + imageLink.rel + '"]'). collect(function(anchor){ return [anchor.href, anchor.title]; }). uniq(); while (this.imageArray[imageNum][0] != imageLink.href) { imageNum++; } } // calculate top and left offset for the lightbox var arrayPageScroll = document.viewport.getScrollOffsets(); var lightboxTop = arrayPageScroll[1] + (document.viewport.getHeight() / 10); var lightboxLeft = arrayPageScroll[0]; this.lightbox.setStyle({ top: lightboxTop + 'px', left: lightboxLeft + 'px' }).show(); this.changeImage(imageNum); }, // // changeImage() // Hide most elements and preload image in preparation for resizing image container. // changeImage: function(imageNum) { this.activeImage = imageNum; // update global var // hide elements during transition if (LightboxOptions.animate) this.loading.show(); this.lightboxImage.hide(); this.hoverNav.hide(); this.prevLink.hide(); this.nextLink.hide(); // HACK: Opera9 does not currently support scriptaculous opacity and appear fx this.imageDataContainer.setStyle({opacity: .0001}); this.numberDisplay.hide(); var imgPreloader = new Image(); // once image is preloaded, resize image container imgPreloader.onload = (function(){ this.lightboxImage.src = this.imageArray[this.activeImage][0]; this.resizeImageContainer(imgPreloader.width, imgPreloader.height); }).bind(this); imgPreloader.src = this.imageArray[this.activeImage][0]; }, // // resizeImageContainer() // resizeImageContainer: function(imgWidth, imgHeight) { // get current width and height var widthCurrent = this.outerImageContainer.getWidth(); var heightCurrent = this.outerImageContainer.getHeight(); // get new width and height var widthNew = (imgWidth + LightboxOptions.borderSize * 2); var heightNew = (imgHeight + LightboxOptions.borderSize * 2); // scalars based on change from old to new var xScale = (widthNew / widthCurrent) * 100; var yScale = (heightNew / heightCurrent) * 100; // calculate size difference between new and old image, and resize if necessary var wDiff = widthCurrent - widthNew; var hDiff = heightCurrent - heightNew; if (hDiff != 0) new Effect.Scale(this.outerImageContainer, yScale, {scaleX: false, duration: this.resizeDuration, queue: 'front'}); if (wDiff != 0) new Effect.Scale(this.outerImageContainer, xScale, {scaleY: false, duration: this.resizeDuration, delay: this.resizeDuration}); // if new and old image are same size and no scaling transition is necessary, // do a quick pause to prevent image flicker. var timeout = 0; if ((hDiff == 0) && (wDiff == 0)){ timeout = 100; if (Prototype.Browser.IE) timeout = 250; } (function(){ this.prevLink.setStyle({ height: imgHeight + 'px' }); this.nextLink.setStyle({ height: imgHeight + 'px' }); this.imageDataContainer.setStyle({ width: widthNew + 'px' }); this.showImage(); }).bind(this).delay(timeout / 1000); }, // // showImage() // Display image and begin preloading neighbors. // showImage: function(){ this.loading.hide(); new Effect.Appear(this.lightboxImage, { duration: this.resizeDuration, queue: 'end', afterFinish: (function(){ this.updateDetails(); }).bind(this) }); this.preloadNeighborImages(); }, // // updateDetails() // Display caption, image number, and bottom nav. // updateDetails: function() { // if caption is not null if (this.imageArray[this.activeImage][1] != ""){ this.caption.update(this.imageArray[this.activeImage][1]).show(); } // if image is part of set display 'Image x of x' if (this.imageArray.length > 1){ this.numberDisplay.update( LightboxOptions.labelImage + ' ' + (this.activeImage + 1) + ' ' + LightboxOptions.labelOf + ' ' + this.imageArray.length).show(); } new Effect.Parallel( [ new Effect.SlideDown(this.imageDataContainer, { sync: true, duration: this.resizeDuration, from: 0.0, to: 1.0 }), new Effect.Appear(this.imageDataContainer, { sync: true, duration: this.resizeDuration }) ], { duration: this.resizeDuration, afterFinish: (function() { // update overlay size and update nav var arrayPageSize = this.getPageSize(); this.overlay.setStyle({ height: arrayPageSize[1] + 'px' }); this.updateNav(); }).bind(this) } ); }, // // updateNav() // Display appropriate previous and next hover navigation. // updateNav: function() { this.hoverNav.show(); // if not first image in set, display prev image button if (this.activeImage > 0) this.prevLink.show(); // if not last image in set, display next image button if (this.activeImage < (this.imageArray.length - 1)) this.nextLink.show(); this.enableKeyboardNav(); }, // // enableKeyboardNav() // enableKeyboardNav: function() { document.observe('keydown', this.keyboardAction); }, // // disableKeyboardNav() // disableKeyboardNav: function() { document.stopObserving('keydown', this.keyboardAction); }, // // keyboardAction() // keyboardAction: function(event) { var keycode = event.keyCode; var escapeKey; if (event.DOM_VK_ESCAPE) { // mozilla escapeKey = event.DOM_VK_ESCAPE; } else { // ie escapeKey = 27; } var key = String.fromCharCode(keycode).toLowerCase(); if (key.match(/x|o|c/) || (keycode == escapeKey)){ // close lightbox this.end(); } else if ((key == 'p') || (keycode == 37)){ // display previous image if (this.activeImage != 0){ this.disableKeyboardNav(); this.changeImage(this.activeImage - 1); } } else if ((key == 'n') || (keycode == 39)){ // display next image if (this.activeImage != (this.imageArray.length - 1)){ this.disableKeyboardNav(); this.changeImage(this.activeImage + 1); } } }, // // preloadNeighborImages() // Preload previous and next images. // preloadNeighborImages: function(){ var preloadNextImage, preloadPrevImage; if (this.imageArray.length > this.activeImage + 1){ preloadNextImage = new Image(); preloadNextImage.src = this.imageArray[this.activeImage + 1][0]; } if (this.activeImage > 0){ preloadPrevImage = new Image(); preloadPrevImage.src = this.imageArray[this.activeImage - 1][0]; } }, // // end() // end: function() { this.disableKeyboardNav(); this.lightbox.hide(); new Effect.Fade(this.overlay, { duration: this.overlayDuration }); $$('select', 'object', 'embed').each(function(node){ node.style.visibility = 'visible' }); }, // // getPageSize() // getPageSize: function() { var xScroll, yScroll; if (window.innerHeight && window.scrollMaxY) { xScroll = window.innerWidth + window.scrollMaxX; yScroll = window.innerHeight + window.scrollMaxY; } else if (document.body.scrollHeight > document.body.offsetHeight){ // all but Explorer Mac xScroll = document.body.scrollWidth; yScroll = document.body.scrollHeight; } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari xScroll = document.body.offsetWidth; yScroll = document.body.offsetHeight; } var windowWidth, windowHeight; if (self.innerHeight) { // all except Explorer if(document.documentElement.clientWidth){ windowWidth = document.documentElement.clientWidth; } else { windowWidth = self.innerWidth; } windowHeight = self.innerHeight; } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode windowWidth = document.documentElement.clientWidth; windowHeight = document.documentElement.clientHeight; } else if (document.body) { // other Explorers windowWidth = document.body.clientWidth; windowHeight = document.body.clientHeight; } // for small pages with total height less then height of the viewport if(yScroll < windowHeight){ pageHeight = windowHeight; } else { pageHeight = yScroll; } // for small pages with total width less then width of the viewport if(xScroll < windowWidth){ pageWidth = xScroll; } else { pageWidth = windowWidth; } return [pageWidth,pageHeight]; } } document.observe('dom:loaded', function () { new Lightbox(); });[/codebox] Será que tem haver com a linha window.LightboxOptions ? no inicio?

Pessoal, Queria saber se o lightbox aquele script que faz ampliar fotos do site com um efeito, tipo desse site http://www.agecefiba.com.br/index.asp (clique nas fotos passando no topo do site), é capaz de ampliar a foto que está dentro de um iframe para fora do iframe e não lá dentro do iframe? Pois estou com um site que tem um iframe com algumas fotos e ao clicar ela amplia dentro do iframe e não fora... tentei colocar target="_top" ... mas não funcionou, acho que deve ser algo na pasta do script... Alguém sabe como resolver? Conhece? Obrigado!

Mas tem alguma coisa errada.... primeiro o que é valor_escondido para ele? E como ele vai fazer um submit no form se só estou atualizando a página? esse valor_escondido = "<%=Request.Form("valor_escondido")%>" só funciona se há um submit do form... Você só estar carregando a função no body onload="Carrega()", mas o request.form só ira funcionar se ocorrer um submit do formulário, coisa que não acontece já que o formulário está na mesma página e no máximo há um carregamento da página, entendeu? O que quero é que quando entrar na páginas das abas, uma das abas já esteja ativa e as outras só ativa quando for clicando... Resolvir de uma maneira 'tosca"... descobrir qual o valor do form.valor_escondido.value para primeira aba e era imagem1 Então, fiz o seguinte: function Carrega() { valor_escondido = "imagem1" form.valor_escondido.value=valor_escondido mouseClick(valor_escondido) } E ela ficou com a aba apresentação, no caso, vermelha... mas isso não fez com que ativasse a ação da minha DIV, pois cada clique em uma aba chama uma div: Link da ABA <td id="colEndereco1" width="28" > <a href="java script:selTab('tabEndereco')" onMouseOver="mouseOver('imagem1')" onMouseOut="mouseOut('imagem1')" onClick="mouseClick('imagem1')"> <img border="0" src="img/apresentacao_vm.jpg" name="imagem1" id="imagem1"></a> </td> Veja que tenho um link: java script:selTab('tabEndereco')" que corresponde a minha div: <div name="tabEndereco" id="tabEndereco" style="display:none"> conteudo de apresentação... </div> Mas, preciso deixar essa div clicada também e não só a cor vermelha do botão... ninguém sabe como chamar uma DIV em função? <div name="tabEndereco" id="tabEndereco" style="display:none"> conteudo de apresentação... </div>

Não está dando nenhum efeito... é para a aba apresentação já ficar ativa, só desativar quando clicar em outras abas...

O que tenho é esse script que me serve para outras coisas... no caso ele fica passando as imagens horizontalmente automaticamente e tem zoom Veja ele rodando na prática nesse site: http://www.agecefiba.com.br/index.asp logo no topo da pagina passa umas fotos que foi usada com esse script abaixo, tem como adaptar para a nova versão que questionei aqui no forum? veja o codigo: <script type="text/javascript"> var sliderwidth="485px" var sliderheight="161px" var slidespeed=1 slidebgcolor="#F3E6BA" var leftrightslide=new Array() var finalslide='' <% n=1 do while not rsfotos.eof fotos= rsfotos("foto") %> leftrightslide[<%=n%>]='<a href="<%=fotos%>" rel="lightbox"><img src="<%=fotos%>" border=0 height="161"></a>' <% rsfotos.movenext n=n+1 loop %> var imagegap=" " var slideshowgap=10 var copyspeed=slidespeed leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>' var iedom=document.all||document.getElementById if (iedom) document.write('<span id="temp" style="visibility:hidden;position:absolute;top:-100px;left:-9000px">'+leftrightslide+'</span>') var actualwidth='' var cross_slide, ns_slide function fillup(){ if (iedom){ cross_slide=document.getElementById? document.getElementById("test2") : document.all.test2 cross_slide2=document.getElementById? document.getElementById("test3") : document.all.test3 cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide actualwidth=document.all? cross_slide.offsetWidth : document.getElementById("temp").offsetWidth cross_slide2.style.left=actualwidth+slideshowgap+"px" } else if (document.layers){ ns_slide=document.ns_slidemenu.document.ns_slidemenu2 ns_slide2=document.ns_slidemenu.document.ns_slidemenu3 ns_slide.document.write(leftrightslide) ns_slide.document.close() actualwidth=ns_slide.document.width ns_slide2.left=actualwidth+slideshowgap ns_slide2.document.write(leftrightslide) ns_slide2.document.close() } lefttime=setInterval("slideleft()",30) } window.onload=fillup function slideleft(){ if (iedom){ if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8)) cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+"px" else cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+"px" if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8)) cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+"px" else cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+"px" } else if (document.layers){ if (ns_slide.left>(actualwidth*(-1)+8)) ns_slide.left-=copyspeed else ns_slide.left=ns_slide2.left+actualwidth+slideshowgap if (ns_slide2.left>(actualwidth*(-1)+8)) ns_slide2.left-=copyspeed else ns_slide2.left=ns_slide.left+actualwidth+slideshowgap } } if (iedom||document.layers){ with (document){ document.write('<table border="0" cellspacing="0" cellpadding="0" width="100%"><td valign="top">') if (iedom){ write('<div style="position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden">') write('<div style="position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+'" onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed">') write('<div id="test2" style="position:absolute;left:0px;top:0px"></div>') write('<div id="test3" style="position:absolute;left:-1000px;top:0px"></div>') write('</div></div>') } else if (document.layers){ write('<ilayer width='+sliderwidth+' height='+sliderheight+' name="ns_slidemenu" bgColor='+slidebgcolor+'>') write('<layer name="ns_slidemenu2" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('<layer name="ns_slidemenu3" left=0 top=0 onMouseover="copyspeed=0" onMouseout="copyspeed=slidespeed"></layer>') write('</ilayer>') } document.write('</td></table>') } } </script>

Pessoal, tenho uma dúvida e queria tirar... Eu obtive vários script interessante para exibir figuras de um banco de dados... mas queria saber se há algo em script possível para exibir as fotos dessa forma: com duas setas para um lado e para o outro para que possam ir clicando e vendo o restante das fotos e com a opção de zoom, existe algo desse tipo? Eu tinha criado isso em flash, mas quero agora em javascript..., veja o exemplo: Obrigado!

Na verdade não mudou nada...Pois para o form seja reconhecido ele precisa de um submit... mesmo com o onload... acho

Eu não entendi... tem algum exemplo? Pois quem é responsável pelo clique fixo é essa função: function mouseClick(id) { for (i=0;i<clique.length;i++) { clique = false mouseOut('imagem'+eval(i+1)) } numero = eval(id.replace("imagem", "")-1) x = document.getElementById(id) x.src = imagens2[numero] clique[numero] = true } O que faz nessa função ficar clicado? pois ai eu poderia fazer um onload mouseClick... algo assim não? já com um valor de um clique...

ssa linha chama automaticamente a função "mouseOut" com todas as imagens (isso ocorre a partir do loop) Então é no "mouseOut" que estão as figuras originais, ou seja, a azul... pois é quando se tira o mouse da aba... ok Você usa alguma linguagem de lado servidor no site ?? Estou usando o ASP... mas você quer que eu envie que dado? Para deixar um certo botão clicado? vou avisar o javascript sobre isso? O que falo é que poderia ser a Aba apresentação sempre fixa, como se ela estivesse clicada... até que se clique em outra aba, entende? Aprendendo o código... Aqui pego as imagens vermelhas do array imagens 2 function mouseOver(id) { numero = eval(id.replace("imagem", "")-1) x = document.getElementById(id) x.src = imagens2[numero] } Aqui é uma função de clique que conserva a imagem 2, vermelha, fixa e ao mesmo tempo faz com que outras abas que tem imagens 2 volte ater o array de imagens que é azul, isso? function mouseClick(id) { for (i=0;i<clique.length;i++) { clique = false mouseOut('imagem'+eval(i+1)) } numero = eval(id.replace("imagem", "")-1) x = document.getElementById(id) x.src = imagens2[numero] clique[numero] = true } function mouseOut(id) { numero = eval(id.replace("imagem", "")-1) if (clique[numero]==false) { x = document.getElementById(id) x.src = imagens[numero] } }

É verdade! Falta era isso, funcionou bem! Não coloquei mas no ar lá não... acho que agora está ok! Muito obrigado mesmo! Essas abas vão quebrar um galho para monte de gente! Agora não entendi essa linha que você falou: mouseOut('imagem'+eval(i+1)) o que ele fala aí? Eu posso deixar umas das abas já selecionada quando carregar a página e depois a pessoa vai mudando?

Veja como está: http://www.ideiabiz.com/s.htm a mesma coisa... só mudou que ao passar o mouse não fixa mais... mas se clico em outra aba ele fixa e não fica azul de novo se eu clicar em outra aba... entendeu? só pode ficar vermelho a aba que foi clicada... se clico em outra aba a antiga fica azul e a aba atual fica vermelha...e assim vai Eu estava tentando adaptar como esse exemplo, veja que as cores muda e fica fixa sem deixar todas cores fixa http://conteudo.imasters.com.br/3286/20050601_abas.html

Jonathan... Você estava tentando algo dessa forma: <script language="JavaScript"> function stAba(menu,conteudo) { this.menu = menu; this.conteudo = conteudo; } var arAbas = new Array(); arAbas[0] = new stAba('td_cadastro','div_cadastro'); arAbas[1] = new stAba('td_consulta','div_consulta'); arAbas[2] = new stAba('td_manutencao','div_manutencao'); function AlternarAbas(menu,conteudo) { for (i=0;i<arAbas.length;i++) { m = document.getElementById(arAbas[i].menu); m.className = 'menu'; c = document.getElementById(arAbas[i].conteudo) c.style.display = 'none'; } m = document.getElementById(menu) m.className = 'menu-sel'; c = document.getElementById(conteudo) c.style.display = ''; } </script> onClick="AlternarAbas('td_cadastro','div_cadastro')"> </head> <body onLoad="AlternarAbas('td_cadastro','div_cadastro')"> Para que a cor fixada mude quando fixe outra cor de outra aba? Eu estava tentando adaptar como esse exemplo, veja que as cores muda e fica fixa sem deixar todas cores fixa http://conteudo.imasters.com.br/3286/20050601_abas.html

Para ver o problema na prática vejam esse link: http://www.ideiabiz.com/s.htm

valeu então!

Olá pessoal, porque toda vez que chamo uma DIV com um link, tipo: <a href="java script:selTab('tab')"><img border="0" src="img/imagens.jpg" name="imagem2" id="imagem2"></a> ele não chama a div tab, só chama a div tab se a div tab1 estiver abaixo e não acima da div tab... <div name="tab1" id="tab1" style="display:none"><%=lazer%></div> <div name="tab" id="tab" style="display:none">imagem</div> Por que? Obrigado

Pessoal, estava tendando essa condição if(imagens2[numero]=="img/apresentacao.jpg"){ for (i=0;i<clique.length;i++) { // Zera o array para salvar o novo valor que foi clicado clique[i] = false } } Mas não está ok... o que deve ser? Quero que ao clicar um botão 1, por exemplo, o 1 fique vermelho, se eu clicar o botão 2 o botão 2 fica vermelho e o 1 volta ficar azul... Se quiser, segue todo o codigo que ainda não está bom: <script type="text/javascript"> var clique = new Array(false, false, false, false, false, false, false) var imagens = new Array("img/apresentacao_vm.jpg", "img/imagens.jpg", "img/plantas.jpg", "img/ilustracoes.jpg", "img/videos.jpg", "img/imagens_vm.jpg", "apresentacao7.jpg") var imagens2 = new Array("img/apresentacao.jpg", "img/imagens_vm.jpg", "img/plantas_az.jpg", "img/ilustracoes_az.jpg", "img/videos_az.jpg", "6.jpg", "7.jpg") function mouseOver(id) { numero = eval(id.replace("imagem", "")-1) x = document.getElementById(id) x.src = imagens2[numero] } function mouseClick(id) { numero = eval(id.replace("imagem", "")-1) x = document.getElementById(id) //Muda a imagem para a que foi definida no array "imagem2" x.src = imagens2[numero] //Muda o valor do array "clique" para verdadeiro clique[numero] = true if(imagens2[numero]=="img/apresentacao.jpg"){ for (i=0;i<clique.length;i++) { // Zera o array para salvar o novo valor que foi clicado clique[i] = false } } } function mouseOut(id) { numero = eval(id.replace("imagem", "")-1) if (clique[numero]==false) { x = document.getElementById(id) //Muda a imagem para a definida no array "imagens" x.src = imagens[numero] } } </script> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="20%" id="AutoNumber2" height="1"> <tr> <td width="14%" height="1" > <a href="java script:selTab('tab')" onMouseOver="mouseOver('imagem1')" onMouseOut="mouseOut('imagem1')" onClick="mouseClick('imagem1')"> <img border="0" src="img/apresentacao_vm.jpg" name="imagem1" id="imagem1"></a></td>

Também tinha percebido isso, mas o array está zerando todos... ou seja, se clico em um botão ele fica vermelho e quando tira o clique ele fica azul... mas o certo é ficar vermelho e só ficar azul quando outro botão do lado for clicado para ficar vermelho também, entendeu? for (i=0;i<clique.length;i++) { // Zera o array para salvar o novo valor que foi clicado clique = false }

Oxi, não mudou nada.... function mouseOver(id) { numero = eval(id.replace("imagem", "")-1) x = document.getElementById(id) x.src = imagens2[numero] } function mouseClick(id) { numero = eval(id.replace("imagem", "")-1) x = document.getElementById(id) //Muda a imagem para a que foi definida no array "imagem2" x.src = imagens2[numero] //Muda o valor do array "clique" para verdadeiro clique[numero] = true } function mouseOut(id) { for (i=0;i<imagens.lenght;i++) { // Zera o array para salvar o novo valor que foi clicado clique[i] = false } numero = eval(id.replace("imagem", "")-1) if (clique[numero]==false) { x = document.getElementById(id) //Muda a imagem para a definida no array "imagens" x.src = imagens[numero] } } </script>

há ta... mas passo o mouse em " apresentação " o azul fica em vermelho e depois fica em azul, certo... ao clicar também em 'apresentação" ele fica vermelho fixo... Mas, quando vou clicar fixo em "imagens" também ele fica vermelho fixo como deve ser, já que foi clicado e não passou só o mouse... Contudo o botão 'apresentação" fica com vermelho ainda...em vez de voltar para azul já que estou clicando agora em "imagens" entende? há, aproveitando... se eu for criar o 3 link: <a href="java script:selTab('tab1')" onMouseOver="mouseOver('imagem2')" onMouseOut="mouseOut('imagem2')" onClick="mouseClick('imagem2')"> <img border="0" src="img/imagens.jpg" name="imagem2" id="imagem2"> </a> Terei que colocar imagem3? e colocar imagem3 no array tambem?

continua a mesma coisa... ao passar o mouse ele fica vermelho e não volta para azul... <script type="text/javascript"> var clique = new Array(false, false, false, false, false, false, false) var imagens = new Array("img/apresentacao_vm.jpg", "apresentacao2.jpg", "apresentacao3.jpg", "apresentacao4.jpg", "apresentacao5.jpg", "apresentacao6.jpg", "apresentacao7.jpg") var imagens2 = new Array("img/apresentacao.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg") function mouseOver(id) { numero = eval(id.replace("imagem", "")-1) x = document.getElementById(id) x.src = imagens2[numero] } function mouseClick(id) { numero = eval(id.replace("imagem", "")-1) x = document.getElementById(id) x.src = imagens2[numero] clique[numero] = true } function mouseOut(id) { numero = eval(id.replace("imagem", "")-1) if (clique[numero]==false) { x = document.getElementById(id) x.src = imagens2[numero] } } </script> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="20%" id="AutoNumber2" height="1"> <tr> <td width="14%" height="1" > <a href="java script:selTab('tabEndereco')" onMouseOver="mouseOver('imagem1')" onMouseOut="mouseOut('imagem1')" onClick="mouseClick('imagem1')"> <img border="0" src="img/apresentacao_vm.jpg" name="imagem1" id="imagem1"> </a> </td> Na variavel imagens fica os azuis e na imagens2 fica os vermelhos o qual aparece ao passar do mouse, isso?

já encontrei um problema... a cor muda quando passa o mouse, mas fica fixa a cor em vez de voltar a cor original... e antes mudava a cor e voltava para a cor original e só fixava era ao clicar...

Veja o exemplo: Correto, cliquei e ficou vermelho: Agora incorreto por dois motivos: primeiro porque o que já estava em vermelho "apresentação" deveria voltar a ficar azul, segundo porque o botão "imagens" ficou vermelho sem eu clicar, só porque passei o mouse nele para ver se ele muda a cor e volta... sendo assim mudou, mas não voltou a cor original que é a figura azul... E agora? <script type="text/javascript"> var click = 0; function mouseOver() { document.b1.src ="img/apresentacao.jpg" } function mouseClick() { document.b1.src ="img/apresentacao.jpg" click = 1; } function mouseOut() { if(click==0) document.b1.src ="img/apresentação_vm.jpg" } </script> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="20%" id="AutoNumber2" height="1"> <tr> <td id="colEndereco" width="14%" height="1" > <a href="java script:selTab('tabEndereco')" onMouseOver="mouseOver()" onMouseOut="mouseOut()" onClick="mouseClick()"><img border="0" src="img/apresentação_vm.jpg" name="b1"></a></td> <td width="14%" height="1"> <a href="java script:selTab('tabEndereco')" onMouseOver="mouseOver1()" onMouseOut="mouseOut1()" onClick="mouseClick1()"> <img border="0" src="img/imagens.jpg" name="b2"></a> </td> <td width="14%" height="1"><img border="0" src="img/plantas.jpg"></td> <td width="14%" height="1"><img border="0" src="img/ilustracoes.jpg"></td> <td width="14%" height="1"><img border="0" src="img/videos.jpg"></td> <td width="15%" height="1"><img border="0" src="img/localizacao.jpg"></td> <td width="15%" height="1"><img border="0" src="img/precos.jpg"></td> </tr> </table> a função: function selTab(tab) { //o elemento abaixo é div, porque as abas estão dentro de um div. tabs = document.getElementsByTagName("div"); //aqui cai no que eu já tinha dito: você poderá ter quantas abas quiser. Aqui simplesmente contará quantas abas você tem. for (n=0;n < tabs.length;n++) { //aqui vai comparar se o nome do id do seu div é igual a aba que você selecionou. Se for, ele vai mostrar o conteúdo da aba selecionada. Caso contrário, não exibe nada. if (tabs[n].id == tab) { tabs[n].style.display = "inline"; document.getElementById('col' + tab.substring(3,tab.length)).style.borderBottom = "none"; document.getElementById('col' + tab.substring(3,tab.length) + '1').style.borderBottom = "none"; } else { tabs[n].style.display = "none"; document.getElementById('col' + tabs[n].id.substring(3,tabs[n].id.length)).style.borderBottom = "black 1px solid"; document.getElementById('col' + tabs[n].id.substring(3,tabs[n].id.length) + '1').style.borderBottom = "black 1px solid"; } } }