Aumentar imagem ao passar o mouse

[Alex_DTP 0]

Pessoal,

 

Alguém sabe como fazer ou conhece uma extensão para o dreamweaver, para aumentar a imagem ao passar o mouse, como neste site: http://www.sxc.hu/category/1050.

 

Achei uma extensão (dynamic image preview), mas não é free. Se alguém puder indicar uma free...

 

Quero aplicar numa lista com imagens chamadas através de um recorset. Estou usando DW+PHP+MySQL

 

Agradeço desde já,

 

Alex

[fnatic 0]

Eu saberia esse codigo em html :(

[alebae 0]

Extensão desconheço, mas existe esse tutorial com HTML + JS que pode te auxiliar:

CLIQUE AQUI

[Alex_DTP 0]

Extensão desconheço, mas existe esse tutorial com HTML + JS que pode te auxiliar:

CLIQUE AQUI

É até interessante, mas já tinha testado e a imagem aumenta dentro da página, no mesmo lugar, empurrando os elementos em volta. Talvez se pudesse ser inserido numa div, e desse para controlar a posição... Só que não sei como fazer. Se puderem me ajudar, agradeço.

 

Alex

[alebae 0]

Aproveitando este código, somente coloquei a imagem dentro de uma Layer (Camada). Funcionou da maneira que você quer. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Alex_DTP 0]

Aproveitando este código, somente coloquei a imagem dentro de uma Layer (Camada). Funcionou da maneira que você quer. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Ainda não é isso que eu estou querendo. Dê uma olhada neste site: http://www.sxc.hu/category/1050

 

De qualquer forma valeu.

 

Alex

[By@zinha 0]

Aproveitando este código, somente coloquei a imagem dentro de uma Layer (Camada). Funcionou da maneira que você quer. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

Ainda não é isso que eu estou querendo. Dê uma olhada neste site: http://www.sxc.hu/category/1050

 

De qualquer forma valeu.

 

Alex

 

Se voce fizer como foi sugerido, colocando a imagem maior em uma nova layer da certo

veja se é mais ou menos isso aki

http://dreambrasil.portaldabya.com.br/drea...bum/21album.htm

[alebae 0]

Bom, acho que já entendi o efeito pretendido.

Veja este site:

CLIQUE AQUI

Passe o mouse em cima de Link 1 ou Link 2, que você verá o efeito!

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

[Alex_DTP 0]

Bom, acho que já entendi o efeito pretendido.

Veja este site:

CLIQUE AQUI

Passe o mouse em cima de Link 1 ou Link 2, que você verá o efeito!

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

Alebae,

 

É isso aí mesmo! Vou testar depois posto.

 

Valeu,

 

Alex

[Alex_DTP 0]

Bom, acho que já entendi o efeito pretendido.

Veja este site:

CLIQUE AQUI

Passe o mouse em cima de Link 1 ou Link 2, que você verá o efeito!

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

Alebae,

É isso aí mesmo! Vou testar depois posto.

Valeu,

Alex

 

Mais uma ajudinha aí!

 

Sou iniciante em programação e tô fazendo um portalzinho de notícias com ajuda de um curso que adquiri aqui no iMasters do Leandro Vieira (Dreamweaver + PHP + MySQL - 2), muito bom e estou começando a gostar de programação, mas ainda estou engatinhando. Mas já aprendi muito neste forum com a ajuda de vocês. Agora, conforme eu vou fazendo meu portalzinho, vou incrementando com uma coisa ou outra e está ficando muito bom. O problema é que me deparo as vezes com dúvidas principiantes de como fazer.

 

Vamo lá.

Não consegui entender direito como usar este código (estou me referindo ao código indicado pelo Alebae). Lí num artigo aqui no iMaster que deve-se evitar misturar código js nas páginas e sim colocá-lo numa pg separada. Assim fiz. Agora não ficou muito claro para mim a história da div. Onde devo colocar o código e a div que ira conter a foto grande? Como vou chamar a função na pág tooltip.js onde coloquei o código? (coloquei a linha <script type="text/javascript" src="tooltip.js"></script> entre as tags head)

 

O link da foto ficou assim:

 

<div id="corpo_esq">

<img src="/portal/images/esculturas/<?php echo str_replace( '.jpg', '.thumb.jpg', $row_rsEsculturas['NomeDoArquivo']); ?>" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"/>

...

...

</div>

 

Enquanto aguardo uma resposta não tô parado. Vô batendo cabeça e pesquisando...

 

Valeu por enquanto

[alebae 0]

Olá Alex_DTP, ficaria mais ou menos assim:

<html>
<head>
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="tooltip.js">
</script>
</head>

<body>
<a href="#" onmouseover="doTooltip(event,0)" onmouseout="hideTip()"><img src="CAMINHO DA IMAGEM" /></a><br />
<a href="#" onmouseover="doTooltip(event,1)" onmouseout="hideTip()"><img src="CAMINHO DA IMAGEM" /></a>
</body>
</html>

Com o tooltip.js apontando para o código Javascript (sem o <script></script) da função. http://forum.imasters.com.br/public/style_emoticons/default/thumbsup.gif

[Alex_DTP 0]

Mais uma ajudinha

 

Tenho uma galeria de imagens chamada assim com repeat region:

 

<img src="/portal/images/esculturas/<?php echo str_replace( '.jpg', '.thumb.jpg', $row_rsEsculturas['NomeDoArquivo']); ?>

 

Como faço com que o tooltip exiba a imagem?

 

Segue o código do tooltip:

 

CODE

/***********************************************

* Image w/ description tooltip- By Dynamic Web Coding (www.dyn-web.com)

* Copyright 2002-2007 by Sharon Paine

* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code

***********************************************/

 

/* IMPORTANT: Put script after tooltip div or

put tooltip div just before </BODY>. */

 

var dom = (document.getElementById) ? true : false;

var ns5 = (!document.all && dom || window.opera) ? true: false;

var ie5 = ((navigator.userAgent.indexOf("MSIE")>-1) && dom) ? true : false;

var ie4 = (document.all && !dom) ? true : false;

var nodyn = (!ns5 && !ie4 && !ie5 && !dom) ? true : false;

 

var origWidth, origHeight;

 

// avoid error of passing event object in older browsers

if (nodyn) { event = "nope" }

 

/////////////////////// CUSTOMIZE HERE ////////////////////

// settings for tooltip

// Do you want tip to move when mouse moves over link?

var tipFollowMouse= true;

// Be sure to set tipWidth wide enough for widest image

var tipWidth= 160;

var offX= 20; // how far from mouse to show tip

var offY= 12;

var tipFontFamily= "Verdana, arial, helvetica, sans-serif";

var tipFontSize= "8pt";

// set default text color and background color for tooltip here

// individual tooltips can have their own (set in messages arrays)

// but don't have to

var tipFontColor= "#000000";

var tipBgColor= "#DDECFF";

var tipBorderColor= "#000080";

var tipBorderWidth= 3;

var tipBorderStyle= "ridge";

var tipPadding= 4;

 

// tooltip content goes here (image, description, optional bgColor, optional textcolor)

var messages = new Array();

// multi-dimensional arrays containing:

// image and text for tooltip

// optional: bgColor and color to be sent to tooltip

// messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");

messages[0] = new Array('red_balloon.gif','Here is a red balloon on a white background',"#FFFFFF");

messages[1] = new Array('duck2.gif','Here is a duck on a light blue background.',"#DDECFF");

messages[2] = new Array('test.gif','Test description','black','white');

 

//////////////////// END OF CUSTOMIZATION AREA ///////////////////

 

// preload images that are to appear in tooltip

// from arrays above

if (document.images) {

var theImgs = new Array();

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

theImgs = new Image();

theImgs.src = messages[0];

}

}

 

// to layout image and text, 2-row table, image centered in top cell

// these go in var tip in doTooltip function

// startStr goes before image, midStr goes between image and text

var startStr = '<table width="' + tipWidth + '"><tr><td align="center" width="100%"><img src="';

var midStr = '" border="0"></td></tr><tr><td valign="top">';

var endStr = '</td></tr></table>';

 

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

// initTip - initialization for tooltip.

// Global variables for tooltip.

// Set styles

// Set up mousemove capture if tipFollowMouse set true.

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

var tooltip, tipcss;

function initTip() {

if (nodyn) return;

tooltip = (ie4)? document.all['tipDiv']: (ie5||ns5)? document.getElementById('tipDiv'): null;

tipcss = tooltip.style;

if (ie4||ie5||ns5) { // ns4 would lose all this on rewrites

tipcss.width = tipWidth+"px";

tipcss.fontFamily = tipFontFamily;

tipcss.fontSize = tipFontSize;

tipcss.color = tipFontColor;

tipcss.backgroundColor = tipBgColor;

tipcss.borderColor = tipBorderColor;

tipcss.borderWidth = tipBorderWidth+"px";

tipcss.padding = tipPadding+"px";

tipcss.borderStyle = tipBorderStyle;

}

if (tooltip&&tipFollowMouse) {

document.onmousemove = trackMouse;

}

}

 

window.onload = initTip;

 

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

// doTooltip function

// Assembles content for tooltip and writes

// it to tipDiv

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

var t1,t2; // for setTimeouts

var tipOn = false; // check if over tooltip link

function doTooltip(evt,num) {

if (!tooltip) return;

if (t1) clearTimeout(t1); if (t2) clearTimeout(t2);

tipOn = true;

// set colors if included in messages array

if (messages[num][2]) var curBgColor = messages[num][2];

else curBgColor = tipBgColor;

if (messages[num][3]) var curFontColor = messages[num][3];

else curFontColor = tipFontColor;

if (ie4||ie5||ns5) {

var tip = startStr + messages[num][0] + midStr + '<span style="font-family:' + tipFontFamily + '; font-size:' + tipFontSize + '; color:' + curFontColor + ';">' + messages[num][1] + '</span>' + endStr;

tipcss.backgroundColor = curBgColor;

tooltip.innerHTML = tip;

}

if (!tipFollowMouse) positionTip(evt);

else t1=setTimeout("tipcss.visibility='visible'",100);

}

 

var mouseX, mouseY;

function trackMouse(evt) {

standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes

mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;

mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;

if (tipOn) positionTip(evt);

}

 

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

// positionTip function

// If tipFollowMouse set false, so trackMouse function

// not being used, get position of mouseover event.

// Calculations use mouseover event position,

// offset amounts and tooltip width to position

// tooltip within window.

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

function positionTip(evt) {

if (!tipFollowMouse) {

standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body

mouseX = (ns5)? evt.pageX: window.event.clientX + standardbody.scrollLeft;

mouseY = (ns5)? evt.pageY: window.event.clientY + standardbody.scrollTop;

}

// tooltip width and height

var tpWd = (ie4||ie5)? tooltip.clientWidth: tooltip.offsetWidth;

var tpHt = (ie4||ie5)? tooltip.clientHeight: tooltip.offsetHeight;

// document area in view (subtract scrollbar width for ns)

var winWd = (ns5)? window.innerWidth-20+window.pageXOffset: standardbody.clientWidth+standardbody.scrollLeft;

var winHt = (ns5)? window.innerHeight-20+window.pageYOffset: standardbody.clientHeight+standardbody.scrollTop;

// check mouse position against tip and window dimensions

// and position the tooltip

if ((mouseX+offX+tpWd)>winWd)

tipcss.left = mouseX-(tpWd+offX)+"px";

else tipcss.left = mouseX+offX+"px";

if ((mouseY+offY+tpHt)>winHt)

tipcss.top = winHt-(tpHt+offY)+"px";

else tipcss.top = mouseY+offY+"px";

if (!tipFollowMouse) t1=setTimeout("tipcss.visibility='visible'",100);

}

 

function hideTip() {

if (!tooltip) return;

t2=setTimeout("tipcss.visibility='hidden'",100);

tipOn = false;

}

 

document.write('<div id="tipDiv" style="position:absolute; visibility:hidden; z-index:100"></div>')

[Alex_DTP 0]

C O N S E G U I I I I I ! ! ! !

 

Ficou bacana!

 

Usei o script do tooltip deste site:

 

http://www.walterzorn.com/tooltip/tooltip_e.htm

 

Ficou assim:

 

Coloquei a chamada da pg do js dentro da body da minha página, como orienta o site:

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

 

 

E o link ficou asssim:

<a href="/portal/escultura.php?idObra=<?php echo $row_rsEsculturas['idObra']; ?>"

onmouseover="Tip('<img src=\'/portal/images/esculturas/<?php echo $row_rsEsculturas['NomeDoArquivo']; ?>\' />');"

onmouseout="UnTip()">

 

obs.: não pode usar aspas duplas. No logar tem que usar \'

 

Obrigado a todos que me ajudaram a chegar a solução!

 

Alex

[Morpheus#2005 1]

Hum....assim tbm rola ...rsss

 

Coloque entre as Tag´s [Head] - [/Head]

 

<script language="javascript">
<!--
function aumenta(obj){
	obj.height=obj.height*2;
   obj.width=obj.width*2;
}

function diminui(obj){
   obj.height=obj.height/2;
   obj.width=obj.width/2;
}
//-->
</script>

E para chamar o JS, faça assim ::

 

<img src="sua_imagem.gif"  width="50" height="50" border="0" onMouseOver="aumenta(this)" onMouseOut="diminui(this)"/>

Good Luck !!! Simples e prático

[Thiago Barraviera 0]

galera estou com um problema, tipo o codigo funcionou beleza só ke a imagem grande aparece muito lá embaixo e nao to conseguindo alterar isso

 

to usando esse tooltip.js

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

 

 

 

 

http://magistralpharma.comoj.com/magistral...ex.php?local=02

 

se alguem souber me de uma luz por favor

 

vlwssss

[Alex_DTP 0]

galera estou com um problema, tipo o codigo funcionou beleza só ke a imagem grande aparece muito lá embaixo e nao to conseguindo alterar isso

 

to usando esse tooltip.js

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

 

 

 

 

http://magistralpharma.comoj.com/magistral...ex.php?local=02

 

se alguem souber me de uma luz por favor

 

vlwssss

O tootip é este?

 

http://www.walterzorn.com/tooltip/tooltip_e.htm

 

Estou usando este tooltip que é muito bom. Dá para personalizar a posição e outras cisas mais. Se não for este que você está usando poste o script que fica mais fácil analisar.

 

A próposito como você está usando este efeito das imagens em camada e flash neste site que você postou?

 

Alex