Notifikationer

Markér alle som læst Log ud

stonejunkie Nybegynder

25. november 2005 - 13:46 Der er 9 kommentarer og
1 løsning

Vis thumb ved siden af musemarkører ved onMouseOver på filnavn.

Jeg har en php side som gennemløber og viser en liste med filnavne på billeder. Mit ønske er at når man fører musen over et filnavn så vises det tilhørende thumb af billedet. Thumb-billedet skal vises ved siden af musemarkøren.

Da jeg bestemt ikke er en javascript haj så håber jeg der er nogen der kan hjælpe.

Synes godt om

dotcom1 Nybegynder

25. november 2005 - 14:10 #1

Noget i den her stil?: http://evoluted.net/archives/2005/08/directory_listi_2.php Prøv demoen.

Synes godt om

stonejunkie Nybegynder

25. november 2005 - 15:04 #2

Tak for linket dotcom1. Det er lige hvad jeg leder efter. Nu har jeg downloadet det og har siddet og rodet med det. Jeg kan simpelthen ikke gennemskue hvor i koden at billedet bliver vist. Jeg er ikke interesseret i at generere thumbs, kun lige det at få dem vist som scriptet så fint gør det.

Synes godt om

dotcom1 Nybegynder

25. november 2005 - 15:08 #3

Det kan jeg vist ikke hjælpe dig med, sorry. :)

Synes godt om

johan.o Nybegynder

25. november 2005 - 15:18 #4

Noget alá :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
<style type="text/css">

.oDiv {
position: absolute;
left: 100px;
top: 100px;
width: 100px; }

.css_thumbcontainer {
position: absolute;
top: 200px;
left: 100px;
padding: 5px;
border: 1px solid #000000;
background-color: #C0C0C0;
display: none;
z-index: 100; }

</style>
<script type="text/javascript">

function showThumb(thumbSrc, oEvent) {
myLeft=oEvent.clientX+"px";
myTop=oEvent.clientY+"px";

oCon=document.getElementById("thumbCon");

oCon.style.left=myLeft;
oCon.style.top=myTop;

preLoad = new Image();

preLoad.onload=function() {
ratio=preLoad.height/preLoad.width;
if(preLoad.width>preLoad.height) {
preLoad.width=200;
preLoad.height=200*ratio; }
else {
preLoad.height=200;
preLoad.width=200/ratio; }

oCon=document.getElementById("thumbCon");
oThumb=document.getElementById("thumb");

oThumb.src=preLoad.src;
oThumb.height=preLoad.height;
oThumb.width=preLoad.width;

oCon.style.display="block"; }

preLoad.src= thumbSrc; }

</script>
</head>

<body>

<div id="thumbCon" class="css_thumbcontainer"><img id="thumb" src=""></div>

<div class="oDiv" onmouseover="showThumb('..path til dit billede..', event);" onmouseout="document.getElementById('thumbCon').style.display='none';">Link</div>

</body>
</html>

Har ikke kigget på om det overholder 'strict' dtd'en men lad mig høre om du evt. kan bruge princippet, så kan vi fintune det :)

Mvh. Johan

Synes godt om

johan.o Nybegynder

25. november 2005 - 15:20 #5

Husk at ændre i <div class="oDiv" onmouseover="showThumb('..path til dit billede..', således at du udskifter ..path til dit billede.. med f.eks. pic.jpg, så ligger billedet i samme folder som du gemmer ovenstående i.

Mvh. Johan

Synes godt om

stonejunkie Nybegynder

25. november 2005 - 19:23 #6

Hej Johan,
Super det var lige hvad jeg havde brug for. Jeg har slettet lidt for at få det til at passe mine behov, og nu kører det bare :)

Som sagt er jeg ikke en skarp til javascript, men jeg vil gerne lære så jeg har et spørgsmål til din kode. Hvad gør denne linje (preLoad.onload=function() { )? Det ligner ikke en normal funktion?

Igen tak for hjælpen. Hvis du smider et svar så skal du få dine point.

Her er hvad jeg endte med, hvis det har interesse.

<style type="text/css">

.css_thumbcontainer {
position: absolute;
top: 200px;
left: 100px;
border: 1px solid #000000;
display: none;
z-index: 100; }

</style>
<script type="text/javascript">
<!--
function showThumb(thumbSrc, oEvent) {

myLeft=" 16px";
myTop=oEvent.clientY+16+"px";

oCon=document.getElementById("thumbCon");

oCon.style.left=myLeft;
oCon.style.top=myTop;

preLoad = new Image();

preLoad.onload=function() {

oCon=document.getElementById("thumbCon");
oThumb=document.getElementById("thumb");

oThumb.src=preLoad.src;

oCon.style.display="block"; }

preLoad.src= thumbSrc; }

Synes godt om

johan.o Nybegynder

25. november 2005 - 20:06 #7

preLoad.onload=function() { ...kode... } -->

Når preLoad, som er billedet, er færdigloadet så aktiveres de linjer som er skrevet imellem { og }. Grunden til at det er lavet som en function der først aktiveres når billedet er færdig loaded, er at der i min originale version blev foretaget beregninger af billedets dimensioner, og hvis disse bliver lavet før billedet er loaded så kendes de jo ikke. Det er måske ikke det store problem med de hurtige forbindelser 'alle' har idag, men hvis der sidder en stakkel og bruger en langsom forbindelse så kan der opstå komplikationer. Men i den version du har lavet her over er der vist ingen grund til at bruge en .onload funktion.

Men jeg vil da gerne se alt din kode, for at se forbindelsen du bruger det i, så er det lidt nemmere at hjælpe. :)

Mvh. Johan

Synes godt om

johan.o Nybegynder

26. november 2005 - 00:51 #8

Prøv at kigge på dette også :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
<style type="text/css">

.oDiv {
position: absolute;
left: 100px;
top: 100px;
width: 60px;
cursor: pointer;
border: 1px solid #AAA898;
background-color: #FEFEFE; }

.css_thumbcontainer {
position: absolute;
top: 0px;
left: 0px;
padding: 5px;
border: 1px solid #000000;
background-color: #C0C0C0;
display: none;
z-index: 100; }

</style>
<script type="text/javascript">

function showThumb(thumbSrc, oObject) {
oCon=document.getElementById("thumbCon");
oThumb=document.getElementById("thumb");

oCon.style.left=(oObject.offsetLeft+65)+"px";
oCon.style.top=oObject.offsetTop+"px";

preLoad = new Image();

preLoad.onload=function() {
ratio=preLoad.height/preLoad.width;
if(preLoad.width>preLoad.height) {
preLoad.width=100;
preLoad.height=100*ratio; }
else {
preLoad.height=100;
preLoad.width=100/ratio; }

oThumb.src=preLoad.src;
oThumb.height=preLoad.height;
oThumb.width=preLoad.width;

oCon.style.display="block"; }

preLoad.src= thumbSrc; }

</script>
</head>

<body>

<div id="thumbCon" class="css_thumbcontainer"><img id="thumb" src=""></div>

<div class="oDiv" onmouseover="showThumb('party.jpg',event.target?event.target:event.srcElement);" onmouseout="document.getElementById('thumbCon').style.display='none';">Link</div>

</body>
</html>

Det ligner det andet, men med denne version, står billedet altid samme sted i forhold til den <div> der aktiverer billedet. Derudover er der lidt design forbedring og så er javascript koden lidt mindre.

Jeg vil nok anbefale dig at bevare en eller form for .onload funktion hvis de billeder du vil vise har en anden original størrelse end den thumb du vil vise, ellers er der brugere der vil opleve at de kun kan se en lille del af billedet i thumbCon.

Mvh. Johan

Synes godt om

stonejunkie Nybegynder

12. april 2007 - 08:33 #9

Johan.o Sorry jeg har helt glemt at vende tilbage med respons på dit forslag. Men jeg kan sige at det hjalp, så hvis du smider et svar så skal du få dine velfortjente point, efter lang ventetid.

Synes godt om

johan.o Nybegynder

12. april 2007 - 18:32 #10

He he...alle gode ting til dem der venter :)...Jamen jeg smider et svar, det er faktisk lidt pudsigt, fordi jeg har været væk fra eksperten det sidste års tid :)

Mvh. Johan

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	03/05/202613:59
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