Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Douglas Tropiano

[Resolvido] Ampliar imagem dentro de uma Div

Por , em Javascript

Recommended Posts

Douglas Tropiano    0

Douglas Tropiano
Postado

Olá a todos.

 

Gostaria de saber como colocar este código de forma que a imagem que será ampliada fique numa div para que ao expandir não "empurre" a página.

 


<!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">
<head>
<script language="javascript">
<!--
function aumenta(obj){
    obj.height=obj.height*3;
	obj.width=obj.width*3;
}

function diminui(obj){
	obj.height=obj.height/3;
	obj.width=obj.width/3;
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Aumentar o tamanho de uma imagem ao passar o mouse</title>
</head>

<body><center>
<p><img src="http://www.boletimesportivo.net/images/noticias/819/Sao-PauloFC-LogoW.jpg" width="200" height="200" alt="SPFC" onMouseOver="aumenta(this)" onMouseOut="diminui(this)" />
</center>
</body>
</html>

Desde já agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Retondar    18

Thiago Retondar
Postado

Não tem como, cara. Se vai expandir, o browser vai ajustar o conteúdo e vai empurrar.

 

O que você pode fazer é criar uma div com a altura que quer e colocar overlow para a pessoa ver a imagem ampliada com scrollbar.

 

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Tropiano    0

Douglas Tropiano
Postado

Oi Thiago.

 

Você conhece alguma maneira de tornar a DIV (ou outra tag) "flutuante"?

 

Bom, para melhor interpretação, tenho um exemplo neste Site de Banco de Imagens. Fiz uma busca por "internet" e ele puxa as imagens. Note que ao passar o mouse em cima da miniatura, ele abre uma janela flutuante com ela ampliada.

 

Queria fazer parecido a este..

 

Valeu pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Douglas Tropiano    0

Douglas Tropiano
Postado

[RESOLVIDO]

 

Graças à sua dica consegui alcançar o que precisava.

 

Segue o código-fonte para quem quiser utilizar também.

 

<script>

var w=1
var h=1

if (document.getElementById || document.all)
document.write('<div id="trailimageid" style="position:absolute;visibility:hidden;left:0px;top:-1000px;width:1px;height:1px;border:1px solid #888888;background:#DDDDDD;"><img id="ttimg" src="img/s.gif" /></div>')

function gettrailobj()
{
    if (document.getElementById) return document.getElementById("trailimageid").style
    else if (document.all) return document.all.trailimagid.style
}

function truebody()
{
    return (!window.opera && document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
}

function hidetrail()
{
    document.onmousemove=""
    document.getElementById('ttimg').src='/img/s.gif'
    gettrailobj().visibility="hidden"
    gettrailobj().left=-1000
    gettrailobj().top=0
}


function showtrail(width,height,file)
{
    if(navigator.userAgent.toLowerCase().indexOf('opera') == -1)
    {
        w=width
        h=height
       
        // followmouse()
   
        document.getElementById('ttimg').src=file
        document.onmousemove=followmouse
        gettrailobj().visibility="visible"
        gettrailobj().width=w+"px"
        gettrailobj().height=h+"px"


    }
}


function followmouse(e)
{

    if(navigator.userAgent.toLowerCase().indexOf('opera') == -1)
    {

        var xcoord=20
        var ycoord=20

        if (typeof e != "undefined")
        {
            xcoord+=e.pageX
            ycoord+=e.pageY
        }
        else if (typeof window.event !="undefined")
        {
            xcoord+=truebody().scrollLeft+event.clientX
            ycoord+=truebody().scrollTop+event.clientY
        }

        var docwidth=document.all? truebody().scrollLeft+truebody().clientWidth : pageXOffset+window.innerWidth-15
        var docheight=document.all? Math.max(truebody().scrollHeight, truebody().clientHeight) : Math.max(document.body.offsetHeight, window.innerHeight)

        if (xcoord+w+3>docwidth)
        xcoord=xcoord-w-(20*2)

        if (ycoord-truebody().scrollTop+h>truebody().clientHeight)
        ycoord=ycoord-h-20;

        gettrailobj().left=xcoord+"px"
        gettrailobj().top=ycoord+"px"

    }

}
</script>


<div class="thumb_img">
<!-- o campo 225,300 é o tamanho da div. Configure-o para o tamanho da imagem real -->
    <span onmouseover="showtrail(225,300,'nomedaimagem.jpg');" onmouseout="hidetrail();">
        <img src="nomedaimagem.jpg" border='0' />
<!-- Não esqueça de adicionar Height e Width para fazê-la miniatura -->
    </span>
</div>

<!-- Para acrescentar mais uma imagem é só copiar uma div inteira e modificar o caminho da imagem -->

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito