Ir para conteúdo

POWERED BY:

Arquivado

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

Free-ee

Mouse Over Dinâmico

Recommended Posts

É o seguinte galera.Estou montado um sistema onde o usuário passa o mouse por cima de uma foto e ele aparece grande na mesma página.Gostaria de saber se alguém sabe como faço pra montar um esquema onde:Terei 5 registros mostrando numa página.Dependendo de qual o cara passar o mouse o detalhe dessa foto aparecerá....Alguém pode me ajudar,ValewFree

Compartilhar este post


Link para o post
Compartilhar em outros sites

<%'set up dsnless connection

mydsn="DRIVER={Microsoft Access Driver (*.mdb)}; DBQ=" & Server.MapPath(".") & "\db\database_photos.mdb"

'setup database objects

set rs=server.createobject("adodb.recordset")

rs.CursorLocation = 3

rs.CursorType = 3

function getLineBreaks(str)

'take care of null values

on error resume next

'this displays carriage returns!

getLineBreaks=replace(str,chr(10),"<br>")

end function

%>

 

<html>

<head>

<title>Photos</title>

 

<!-- inicio do codigo para trocar photos feito com o dreamweaver -->

<script language="JavaScript" type="text/JavaScript">

<!--

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

 

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)

if (a.indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a;}}

}

 

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_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

}

//-->

</script>

<!-- final do codigo para trocar photos feito com o dreamweaver -->

 

</head>

<body>

 

<%'buscar registos!

strsql="select * from [Photos]"

rs.open strsql,mydsn

if rs.eof and rs.bof then%>

No records!

 

<%else

'fazer a paginação onde temos como pagesize 5

If request.querystring("page") = "" Then

pageno = 1

Else

pageno = request.querystring("page")

End If

rs.pagesize = 5

totalpages = CInt(rs.pagecount)

 

'com que página vamos trabalhar

rs.absolutepage = pageno

If totalpages > 1 Then

 

'botões avançar e retroceder

If pageno > 1 Then

response.write "<A href=Photoslist.asp?page=" & pageno - 1 & ">Anterior</a> "

End If

 

'ver se estamos na ultima página

If int(pageno) < int(totalpages) Then

response.write "<A href=Photoslist.asp?page=" & pageno + 1 & ">Próxima</a> "

End If

response.write("<BR>")

 

'escrever o número des páginas

For A = 1 To totalpages

 

'escrever a vermelho a página corrente

If Int(A) = Int(pageno) Then

Response.write "<font color=red>" & A & "</font> "

Else

 

Response.write "<A href=Photoslist.asp?page=" & A & ">" & A & "</font></a> "

End If

Next

End If %>

 

<br>

<br>

 

<%x=0

 

'mostrar os registos atenção em 1 To 5

bg=0

For x = 1 To 5

bg=bg+1

If rs.EOF Then

 

'final

Exit For

Else

 

'mais á frente deve-se trocar as sources dos files

'a imagem grande e a pequena têm o mesmo nome

'somente estão em pastas diferentes

'aqui dá-se a ordem para trocar a imagem lá em baixo que tem o name=target

'optei por colocar como imagem inicial o logotipo da empresa

 

'fazer a lista %>

 

<a href="<%=rs("Link")%>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('target','','photos/max/<%=rs("Image")%>.jpg',0)"><img src="photos/mini/<%=rs("Image")%>.jpg"></a>

 

<%end if

rs.movenext

next

end if%>

 

<%'limpar

rs.close

set rs=nothing%>

 

<br>

<br>

 

<img src="photos/logo.jpg" name=target>

 

</body></html>

 

 

***********

 

É só ocupar espaço... heheh

 

Qualquer dúvida contactem, ou então peçam o *.rar disto por mail.

Um pedacito daqui outro dacolá mais umas novidades e uns ajustes e em 10 minutos tens o script.

 

Precisas de duas pastas onde tens as imagens High e Low resolution com o mesmo nome.

Um Logotipo se quiseres, tem piada.

E uma base de dados com três campos:

 

Id

Link

Image

Compartilhar este post


Link para o post
Compartilhar em outros sites

Ups!!

 

O ficheiro ASP chama-se 'PhotosList.asp'.

Se decidires trocar o nome dele Procura no código o nome -->'PhotosList.asp'<-- e troca lá também.

Se não quiseres que a imagem desapareça no mouseOut apaga do script do dreamweaver o seguinte:

 

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a)&&x.oSrc;i++) x.src=x.oSrc;

}

 

e onde se lê:

 

<a href="<%=rs("Link")%>" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage('target','','photos/max/<%=rs("Image")%>.jpg',0)"><img src="photos/mini/<%=rs("Image")%>.jpg"></a>

 

deverá passar a constar:

 

<a href="<%=rs("Link")%>" onMouseOver="MM_swapImage('target','','photos/max/<%=rs("Image")%>.jpg',0)"><img src="photos/mini/<%=rs("Image")%>.jpg"></a>

 

*********************

 

Tenho a sensação de que me esqueci algo...

Mas testa o script e depois vê-se.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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