Notifikationer

Markér alle som læst Log ud

sobr Nybegynder

20. april 2009 - 23:34 Der er 7 kommentarer og
1 løsning

Onmouseover funktion

Hvordan laves den onmouseover funktion de bruger på www.sxc.hu, hvor billedet flytter sig i forhold til, hvor der er plads til det ?

Jeg synes den er lidt elegant at se på ;-)

Synes godt om

mjdigital Nybegynder

20. april 2009 - 23:45 #1

Hejsa sobr :)

Kiggede hurtigt i deres Source kode :) du kan da lige få den

http://www.sxc.hu/inc/tooltip.js
http://www.sxc.hu/inc/common.js
http://www.sxc.hu/inc/menu.js
http://www.sxc.hu/inc/ajax.js

Værsgo det er alt java den side benytter sig af :)

og her er den kædet sammen med et link og selve billede

<a href="photo/602085" onmouseover="showtrail(300,225,'pic/m/h/ho/hortongrou/602085_beautiful_lake_-_view_from_the_dock.jpg');" onmouseout="hidetrail();"><img src="pic/s/h/ho/hortongrou/602085_beautiful_lake_-_view_from_the_dock.jpg" width="100" height="75" style="padding-top:23px;" /></a>

Så kan du vidst godt tage den derfra :) Håber det hjalp dig på vej.

Synes godt om

mjdigital Nybegynder

21. april 2009 - 00:16 #2

Hvis du er i tvivl om hvilke Java kode de bruger eller hvilke fil så har jeg den her til dig :)

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"

}
}

Synes godt om

mjdigital Nybegynder

21. april 2009 - 00:20 #3

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

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"

}

}

så der manglede lidt :) værsgo

Synes godt om

sobr Nybegynder

21. april 2009 - 00:29 #4

Du skal lige vide, at jeg ikke har begreb om js, så...

det du lige smed i de 2 sidste - hvor placerer jeg det?

jeg har bare prøvet, at føje de 4 filer til et dokument + linket som du viser i det første svar - men den viser ikke det store billede...

Synes godt om

sobr Nybegynder

21. april 2009 - 00:41 #5

Det vil sige at det er tooltip.js jeg skal bruge - men det vil ikke fungere - hjælp

Jeg har min kode her:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>onmouseover</title>
<meta name="Description" content="">
<meta name="Keywords" content="">
<meta name="Revisit-after" content="7">
<meta name="Generator" content="Stone's WebWriter 4">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script src="js/ajax.js" type="text/javascript"></script>
<script href="js/menu.js" type="text/javascript"></script>
<script href="js/common.js" type="text/javascript"></script>
<script href="js/tooltip.js" type="text/javascript"></script>
<style type="text/css">
body {
margin:0px;
}
#centrer {
width:900px;
height:600px;
margin:0 auto;
padding:0px;
color:#000000;
font-size:11px;
border:1px solid #000000;
font-family:'Arial',sans-serif;
}
</style>
</head>
<body>
<br><br>
<div id="centrer">

<a href="images/015.jpg" target="_blank" onmouseover="showtrail(525,394,'images/015.jpg');" onmouseout="hidetrail();"><img src="thumbs/015.jpg" width="165" height="124" border="0" style="padding-top:23px;"></a>

</div>
</body>
</html>

Synes godt om

sobr Nybegynder

21. april 2009 - 02:35 #6

Ja, jeg ved ikke hvad der skete, men det virker nu - Stones blev ramt af en fejl og lukkede ned - måske det var genstarten der hjalp... ?

Du får mange tak for hjælpen >> mjdigital

Synes godt om

sobr Nybegynder

21. april 2009 - 02:37 #7

Super ;-D

Synes godt om

mjdigital Nybegynder

21. april 2009 - 09:05 #8

Godt det virker sobr :) glad for det virkede..

Synes godt om

Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra JavaScript kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
problem med download i <a href=" " download> tag i JavaScript Af Peer i JavaScript	5	27/04/202620:09	21/08/202610:41
Validering af filnavn i formular Af Strawberry i JavaScript	8	14/04/202610:11	20/04/202611:14
Mangler et JavaScript til htm side med iframe i Joomla5 Af Peder Lund Nielsen i JavaScript	2	03/02/202614:19	04/04/202616:02
Åbne en PDF fil fra en mappe Af mbl i JavaScript	9	18/04/202516:52	22/04/202512:33
Spørgsmål til cookies Af Mads i JavaScript	2	14/02/202511:47	27/06/202514:34

Se alle spørgsmål i kategorien Opret spørgsmål

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS