Combinando ações.

ticarp · Novembro 16, 2003

Olá pessoal... gostaria de saber se isso é possível...É mais ou menos o seguinte...Ao passar o mouse sobre uma imagem ira aparecer uma tooltip para o usuario com a descrição da mesma... ao tirar o mouse dela a tooltip some... beleza...Ao clicar na imagem ela é exibida numa outra layer através de um JS.Acontece q ao clicar a layer com imagem grande é exibida normalmente mas o usuario ainda continua com o mouse sobre a imagem pequena, logo a tooltip tb esta visivel... queria q a ação "onclick" tb fizesse a tootilp desaparecer.... aí está o codigo:<a href="#" target="_blank" onmouseover="doTooltip(event,0)" onmouseout="hideTip()" onClick="return enlarge('design/desc/sites_suicidal.gif',event, 'center', 130, 19)"><img src="works/web/site04.jpg" width="54" height="54" border="0"></a> Será que dá??Abração, Tiago.

void · Novembro 16, 2003

complicado hein! por favor!

<a href="#" target="_blank" onmouseover="doTooltip(event,0)" onmouseout="hideTip()" onClick="return enlarge('design/desc/sites_suicidal.gif',event, 'center', 130, 19);hideTip();"><img src="works/web/site04.jpg" width="54" height="54" border="0"></a>

<_<

the void

ticarp · Novembro 16, 2003

Minha dúvida era justamente como separar as ações, com "," ou com ";"...Mas olha Void... dessa forma continua sem funcionar a tooltip continua sem sumir...Me diz uma coisa... o site: www.thevoid.co.uk é seu?Tiago.

void · Novembro 16, 2003

cara agora eu ñ sei coloca o código ai pra eu ver ai posso te dizer oq q ta acontecendo!o site ñ é meu ñ.the void

ticarp · Novembro 16, 2003

Coloquei em negrito a parte em questão!

<html>

<head>

#showimage{

position:absolute;

visibility:hidden;

border: 1px solid gray;

z-index: 55;

}

#dragbar{

cursor: hand;

cursor: pointer;

background-color: #EFEFEF;

font-family: verdana;

font-size: 8pt;

min-width: 100px; /*NS6 style to overcome bug*/

}

#dragbar #closetext{

margin-right: 1px;

padding-right: 2px;

}

</style>

var ie=document.all

var ns6=document.getElementById&&!document.all

function ietruebody(){

return (document.compatMode!="BackCompat")? document.documentElement : document.body

}

function enlarge(which, e, position, imgwidth, imgheight){

if (ie||ns6){

crossobj=document.getElementById? document.getElementById("showimage") : document.all.showimage

if (position=="center"){

pgyoffset=ns6? parseInt(pageYOffset) : parseInt(ietruebody().scrollTop)

horzpos=ns6? pageXOffset+window.innerWidth/2-imgwidth/2 : ietruebody().scrollLeft+ietruebody().clientWidth/2-imgwidth/2

vertpos=ns6? pgyoffset+window.innerHeight/5-imgheight/5 : pgyoffset+ietruebody().clientHeight/5-imgheight/5

if (window.opera && window.innerHeight) //compensate for Opera toolbar

vertpos=pgyoffset+window.innerHeight/3-imgheight/3

vertpos=Math.max(pgyoffset, vertpos)

}

else{

var horzpos=ns6? pageXOffset+e.clientX : ietruebody().scrollLeft+event.clientX

var vertpos=ns6? pageYOffset+e.clientY : ietruebody().scrollTop+event.clientY

}

crossobj.style.left=horzpos+"px"

crossobj.style.top=vertpos+"px"

crossobj.innerHTML='<div align="right" id="dragbar"><span id="closetext" onClick="closepreview()">Fechar</span> </div><img src="'+which+'">'

crossobj.style.visibility="visible"

return false

}

else //if NOT IE 4+ or NS 6+, simply display image in full browser window

return true

}

function closepreview(){

crossobj.style.visibility="hidden"

}

function drag_drop(e){

if (ie&&dragapproved){

crossobj.style.left=tempx+event.clientX-offsetx+"px"

crossobj.style.top=tempy+event.clientY-offsety+"px"

}

else if (ns6&&dragapproved){

crossobj.style.left=tempx+e.clientX-offsetx+"px"

crossobj.style.top=tempy+e.clientY-offsety+"px"

}

return false

}

function initializedrag(e){

if (ie&&event.srcElement.id=="dragbar"||ns6&&e.target.id=="dragbar"){

offsetx=ie? event.clientX : e.clientX

offsety=ie? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)

tempy=parseInt(crossobj.style.top)

dragapproved=true

document.onmousemove=drag_drop

}

document.onmousedown=initializedrag

document.onmouseup=new Function("dragapproved=false")

</script>

<!--

function MM_reloadPage(init) { //reloads the window if Nav4 resized

if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {

document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}

else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();

}

MM_reloadPage(true);

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[n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers.document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_showHideLayers() { //v6.0

var i,p,v,obj,args=MM_showHideLayers.arguments;

for (i=0; i<(args.length-2); i+=3) if ((obj=MM_findObj(args))!=null) { v=args[i+2];

if (obj.style) { obj=obj.style; v=(v=='show')?'visible':(v=='hide')?'hidden':v; }

obj.visibility=v; }

}

//-->

</script>

<script type="text/javascript">

var messages = new Array();

messages[0] = ['design/desc/sites_suicidal.gif', 130, 19, '<div><b> Ferramentas:</b><br> Fireworks MX</br> Dreamweaver 4.0<br><b> Status</b><br> Online - Mar/2002</div>', 130];

messages[1] = ['images/dot-com-btn.gif', 176, 30, 'The regular tooltip can display images too.', 190];

// an example with no text

messages[2] = ['images/balloon.gif', 106, 131, , 120];

//////////////////////////////////////////////////////////////////////////////////////////////////

// Code for preloading images

// If you don't want to preload your images you can remove or comment out this section

// or just put all your messages arrays below it

if (document.images) {

var image_list = new Array();

for (var message_counter=0; message_counter < messages.length; message_counter++) {

image_list[message_counter] = new Image();

image_list[message_counter].src = messages[message_counter][0];

}

// end preload code

////////////////////////////////////////////////////////////////////////////////////////////////////////

// leave in page for way to customize layout of tooltip

// and avoid errors if onmouseovers/outs before page completely loaded

function doTooltip(e, num) {

if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;

var cntnt = wrapTipContent(num);

var tip = document.getElementById( Tooltip.tipID );

if ( messages[num][4] ) tip.style.width = messages[num][4] + "px";

Tooltip.show(e, cntnt);

}

function hideTip() {

if ( typeof Tooltip == "undefined" || !Tooltip.ready ) return;

Tooltip.hide();

}

function wrapTipContent(num) {

var cntnt = '<div class="img"><img src="' + messages[num][0] + '" width="' +

messages[num][1] + '" height="' + messages[num][2] + '" border="0"></div>';

if ( messages[num][3] ) cntnt += '<div class="msg">' + messages[num][3] + '</div>';

return cntnt;

}

</script>

<link href="estilo.css" rel="stylesheet" type="text/css">

</head>

<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" style="border:0xp">

<div id="showimage"></div>

<div id="titulo" style="position:absolute; left:13px; top:13px; width:115px; height:26px; z-index:1"><img src="design/titulo.gif" width="343" height="25"></div>

<div id="brasil" style="position:absolute; left:390px; top:27px; width:82px; height:82px; z-index:2"><img src="design/brasil.gif" width="95" height="88"></div>

<div id="caixaesq" style="position:absolute; left:381px; top:166px; width:62px; height:142px; z-index:3"><img src="design/caixa_esq.gif" width="116" height="260"></div>

<div id="circulos" style="position:absolute; left:395px; top:445px; width:75px; height:74px; z-index:4"><img src="design/circulos.gif" width="93" height="75"></div>

<div id="summer" style="position:absolute; left:382px; top:149px; width:71px; height:9px; z-index:5"><img src="design/summer.jpg" width="117" height="20"></div>

<div id="submenu" style="position:absolute; left:17px; top:242px; width:16px; height:125px; z-index:6; overflow: hidden;"><img src="design/sub_credito.jpg" width="21" height="48"><br>

<img src="design/sub_links.jpg" width="21" height="28"><br>

<a href="index2.htm"><img src="design/sub_home.jpg" width="21" height="38" border="0"></a></div>

<div id="versao" style="position:absolute; left:403px; top:1px; width:98px; height:12px; z-index:7; overflow: hidden;"><img src="design/versao.jpg" width="96" height="14"></div>

<div id="menuweb" style="position:absolute; left:127px; top:551px; width:113px; height:14px; z-index:8"><img src="design/b_web1.jpg" width="110" height="22"></div>

<div id="conteudoweb" style="position:absolute; left:116px; top:55px; width:256px; height:265px; z-index:14;">

<p align="center"><img src="design/sec_web_sites.jpg" width="255" height="21">

<img src="works/web/site03.jpg" width="54" height="54"> <img src="works/web/site02.jpg" width="54" height="54">

<img src="works/web/site05.jpg" width="54" height="54"></p>

<p align="center"> <img src="design/sec_web_templates.jpg" width="252" height="34"><br>

<img src="works/web/site01.jpg" width="54" height="54"> </p>

<p><img src="design/sec_web_banners.jpg" width="252" height="21"></p>

</div>

<div id="iconeweb" style="position:absolute; left:402px; top:339px; width:53px; height:60px; z-index:15; visibility: visible;"><img src="design/icone_web.gif" width="73" height="63"></div>

<img src="design/fundo1024.gif" width="502" height="602">

<div id="iconearte" style="position:absolute; left:403px; top:333px; width:52px; height:53px; z-index:43; visibility: hidden;"><img src="design/icone_arte.gif" width="70" height="70"></div>

<div id="iconequem" style="position:absolute; left:403px; top:332px; width:45px; height:50px; z-index:47; visibility: hidden;"><img src="design/icone_quem.gif" width="70" height="70"></div>

<div id="iconefoto" style="position:absolute; left:403px; top:332px; width:44px; height:48px; z-index:45; visibility: hidden;"><img src="design/icone_foto.gif" width="70" height="70"></div>

<div id="iconedesign" style="position:absolute; left:404px; top:333px; width:57px; height:56px; z-index:44; visibility: hidden;"><img src="design/icone_design.gif" width="70" height="70"></div>

<div id="submenuweb" style="position:absolute; left:153px; top:575px; width:66px; height:13px; z-index:36; visibility: visible;"><img src="design/b_web2.jpg" width="86" height="26"></div>

<div id="submenugrafias" style="position:absolute; left:209px; top:574px; width:61px; height:21px; z-index:37; visibility: hidden;"><img src="design/b_foto2.jpg" width="89" height="26"></div>

<div id="submenugrafico" style="position:absolute; left:279px; top:573px; width:51px; height:23px; z-index:39; visibility: hidden;"><img src="design/b_design2.jpg" width="91" height="26"></div>

<div id="submenudigital" style="position:absolute; left:372px; top:574px; width:83px; height:26px; z-index:40; visibility: hidden;"><img src="design/b_arte2.jpg" width="84" height="27"></div>

<div id="submenusou" style="position:absolute; left:437px; top:574px; width:50px; height:25px; z-index:41; visibility: hidden;"><img src="design/b_quem2.jpg" width="63" height="27"></div>

<div id="space1" style="position:absolute; left:183px; top:552px; width:14px; height:25px; z-index:51; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;"></div>

<div id="space2" style="position:absolute; left:249px; top:551px; width:12px; height:23px; z-index:52; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;"></div>

<div id="space3" style="position:absolute; left:346px; top:551px; width:12px; height:28px; z-index:53; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;"></div>

<div id="space4" style="position:absolute; left:411px; top:551px; width:11px; height:25px; z-index:54; background-color: #FFFFFF; layer-background-color: #FFFFFF; border: 1px none #000000;"></div>

<script src="js/dw_event.js" type="text/javascript"></script>

<script src="js/dw_viewport.js" type="text/javascript"></script>

<script src="js/dw_tooltip.js" type="text/javascript"></script>

</body>

</html>

void · Novembro 16, 2003

coloca isso!

<a href="#" target="_blank" onmouseover="doTooltip(event,0)" onmouseout="hideTip()" onClick="enlarge('design/desc/sites_suicidal.gif',event, 'center', 130, 19);hideTip();"><img src="works/web/site04.jpg" width="54" height="54" border="0"></a>

me diz c funciona!

the void

ticarp · Novembro 16, 2003

Na mosca cara!!Pra funcionar beleza, tem que tirar o "target=_blank"... ;)

Entrar

Arquivado

Combinando ações.

Recommended Posts

ticarp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

void 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

ticarp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

void 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

ticarp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

void 1

Compartilhar este post

Link para o post

Compartilhar em outros sites

ticarp 0

Compartilhar este post

Link para o post

Compartilhar em outros sites

Fixar div até atingir uma certa altura

Ajuda com Extends e envio para o banco

PHP+Codeginiter - Orientação para Impressão

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante