CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

crapmaster Nybegynder

25. november 2005 - 21:05 Der er 38 kommentarer og
1 løsning

Muse over og billede

Hej allesammen

Jeg kunne godt tænke mig at, når jeg føre min mus hen over min dvdliste dukker der et cover på af filmen,

Det er denne jeg bruger fra db`s af,
$data[dvdinfos_cover]

Dette er linket som skal vise coveret.
echo " <a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."'><img src=".$data[dvdinfos_cover]." width='80' height='110'> </a>\n";

Skriv vis i ikke forstå mig....fnis

Synes godt om

skovenborg Nybegynder

26. november 2005 - 15:06 #1

hvor skal coveret dukke op henne? Henne ved linket i en lille fin boks eller et bestemt sted på siden?

Hvis det er det sidste kan det nemt ordnes:
<img src="" id="cover"> 

<img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover="document.getElementById('cover').src = this.src;" onmouseout="document.getElementById('cover').src = '';">

Den anden mulighed kræver lidt mere arbejde, men kan også ordnes :-)

Synes godt om

crapmaster Nybegynder

26. november 2005 - 16:05 #2

Billedet kommer da frem, men det stå der bare heletiden.....æv

Ellers en anden måde at gøre det på ?

Synes godt om

skovenborg Nybegynder

26. november 2005 - 16:20 #3

også når du flytter musen væk fra billedet? Har lige testet det og det burde ellers virke fint nok...

Men du kan evt. udvide det med denne funktion:
function showhide(imgSrc) {
var elm = document.getElementById("cover");
if (elm.style.display == "none") {
elm.style.display = "inline";
elm.src = imgSrc;
}
else {
elm.style.display = "none";
}
}

<img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover="showhide(this.src);" onmouseout="showhide('');">

<img src="" id="cover" style="display:none;">

Så skjuler den også selve img-elementet. Så burde du i hvert fald slippe for det bøvl (og det røde kryds IE laver ;-)

Synes godt om

crapmaster Nybegynder

26. november 2005 - 16:22 #4

Arrr jeg smider lige koden til dig min ven, hvor skal den indsættes henne....

KODE:::::

tablebreak();

$rows2show = 25;
if(!isset($rowstart)) $rowstart = 0;
$result = dbquery("SELECT * FROM ".$db_prefix."dvdinfos, ".$db_prefix."dvdinfos_cats where dvdinfos_cat=dvdinfos_cat_id");
$numrows = dbrows($result);

opentable(DVD_417);
$result = dbquery("SELECT * FROM ".$db_prefix."dvdinfos, ".$db_prefix."dvdinfos_cats where dvdinfos_cat=dvdinfos_cat_id ORDER BY dvdinfos_nr ASC LIMIT ".$rowstart.", ".$rows2show);
if(dbrows($result)!=0){

echo "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">";

while($data=dbarray($result)){

//HER LAVES LINKET TIL DEN SIDE DER VISER SELVE FILM INFOÈN
echo "<tr><td class=\"small\" align=\"left\">
<a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."'>".$data['dvdinfos_name']."</b></a></td>";

//Hvis det er det sidste kan det nemt ordnes:
// 

// <img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover="document.getElementById('cover').src = this.src;" onmouseout="document.getElementById('cover').src = '';">

//ORG
//echo "<tr>\n<td class=\"small\" align=\"left\"><a href='viewpage.php?page_id=10?dvdinfos_id=".$data['dvdinfos_id']."'><b>".$data['dvdinfos_name']."</b></a></td>\n";

//echo "<tr>\n<td class=\"small\" align=\"left\"><a href=\"java script:PopUp('$PHP_SELF?cat_id=$cat_id&dvdinfos_id=".$data['dvdinfos_id']."','Bild','200','280','0','0','0','0')\"><b>".$data['dvdinfos_name']."</b></a></td>\n";

echo "<td class=\"small\" align=\"left\">".trimlink($data[dvdinfos_alter], 30)."</td>\n";
echo "<td class=\"small\" align=\"left\">$data[dvdinfos_cat_name]</td>\n";
echo "<td class=\"small\" align=\"right\">$data[dvdinfos_count]</td>\n</tr>\n";
/*Mig der leger med en skuespillerliste*/

/*".$data['dvdinfos_name']."*/

Synes godt om

skovenborg Nybegynder

26. november 2005 - 17:13 #5

uha, det va en ordentlig smøre ;-)

Nu vil jeg nok opfordre til at bruge den funktion jeg viste i min sidste kommentar (showhide). Så derfor skal du skrive:
<img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover="showhide(this.src);" onmouseout="showhide('');">
istedet for det tidligere:
<img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover="document.getElementById('cover').src = this.src;" onmouseout="document.getElementById('cover').src = '';">

Billedet kan som sagt placere hvor du vil ;-)
Det sidste er så at indsætte funktionen. Dette gøres enten mellem to script-tags:
<script type="text/javascript">
function showhide(imgSrc) {
....
}
</script>
og placere det oppe i head-sektionen (altså mellem <head> og </head>). Du kan også placere funktionen inde i en .js-fil vel at mærke ud <script>-tagsene. Den kan du så inkludere på denne måde:
<script type="text/javascript" src="javascriptFilnavnet.js"></script>

Håber det var nok til at kunne implementere det selv...ellers spørger du bare løs ;-)

Synes godt om

crapmaster Nybegynder

26. november 2005 - 17:24 #6

Nu ser koden sådan her ud, men det er det samme som før, jeg kan stædig se billedet på siden uden musen gør noget.

KODE lige nu.....

echo "<table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\">";

while($data=dbarray($result)){

//HER LAVES LINKET TIL DEN SIDE DER VISER SELVE FILM INFOÈN
echo "<tr><td class=\"small\" align=\"left\">
<img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover='showhide(this.src);' onmouseout='showhide('');'>
<a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."'>".$data['dvdinfos_name']."</b></a></td>";

Synes godt om

skovenborg Nybegynder

26. november 2005 - 17:29 #7

hov, du skal lige passe på med anførselstegnene:
onmouseout=\"showhide('');\">

Synes godt om

crapmaster Nybegynder

26. november 2005 - 17:37 #8

UPS ja, men det hjælp ikke meget Øv øv :-(

Synes godt om

skovenborg Nybegynder

26. november 2005 - 17:53 #9

Der er et eller andet mærkeligt der går galt. Har du mulighed for at vise siden via et link? Det ville være nemmere hvis man så selve outputtet istedet for PHP-koden, hvis man skal finde sådan nogle fejl.

Synes godt om

crapmaster Nybegynder

26. november 2005 - 17:57 #10

Ja da min ven

http://www.dvddatabasen.dk/infusions/dvdinfos_system/dvdinfos.php

Det er under ( Hele dvd listen )

Synes godt om

skovenborg Nybegynder

26. november 2005 - 18:21 #11

hovsa, du har jo skrevet lidt for direkte af ;-)

Du skal først og fremmest slette dette fra starten:
<head>
<script type="text/javascript">
function showhide(imgSrc) {
....
}
</script>
</head>

Nu har du jo en anden javascript-fil (jscript.js), så put dette ind i den:
function showhide(imgSrc) {
var elm = document.getElementById("cover");
if (elm.style.display == "none") {
elm.style.display = "inline";
elm.src = imgSrc;
}
else {
elm.style.display = "none";
}
}

Nu skulle du da i det mindste have defineret funktionen, så den er klar til brug. Du mangler dog (så vidt jeg kan se) billedet til at vise coveret i:
<img src="" id="cover" style="display:none;">

Jeg kan godt nok ikke sige hvor du skal placere det (det er jo helt valgfrit), men det er i hvert fald påkrævet for at scriptet skal virke. Håber det hjælper bedre nu ;-)

Synes godt om

crapmaster Nybegynder

26. november 2005 - 18:49 #12

Nu kommer der fejl på siden, :-(
FEJL PÅ LINE 118

Parse error: parse error, unexpected T_STRING, expecting ',' or ';' in /hsphere/local/home/dvddata/dvddatabasen.dk/infusions/dvdinfos_system/dvdinfos.php on line 118

KODEN

//HER LAVES LINKET TIL DEN SIDE DER VISER SELVE FILM INFOÈN
//DETTE ER LINE 118

echo "<tr><td class='small' align='left'><img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover="showhide(this.src);" onmouseout=\"showhide('');\"><a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."'>".$data['dvdinfos_name']."</b></a><img src=\"\" id='cover' style=\"display:none;\"></td>";

Synes godt om

skovenborg Nybegynder

26. november 2005 - 18:58 #13

ja, den er gal med anførselstegnene igen (missede den før :-o ):
echo "<tr><td class='small' align='left'><img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover=\"showhide(this.src);\" onmouseout=\"showhide('');\"><a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."'>".$data['dvdinfos_name']."</b></a><img src=\"\" id='cover' style=\"display:none;\"></td>";

Synes godt om

crapmaster Nybegynder

26. november 2005 - 19:10 #14

Liner det samme som før

Synes godt om

skovenborg Nybegynder

26. november 2005 - 19:13 #15

ja, med den undtagelse at jeg har "escapet" anførselstegnene før og efter showhide(this.src):
onmouseover=\"showhide(this.src);\"

Det er en lille ting, men vigtigt at huske, da PHP ellers ikke opfatter du bare vil skrive et par gåseøjne, og ikke afslutte strengen.

Synes godt om

crapmaster Nybegynder

26. november 2005 - 19:16 #16

ok, kan det være den måde jeg har lavet jscript.js

KODEN

function showhide(imgSrc) {
var elm = document.getElementById("cover");
if (elm.style.display == "none") {
elm.style.display = "inline";
elm.src = imgSrc;
}
else {
elm.style.display = "none";
}
}

Og hvordan skal det indsættes i en php side. ?

Synes godt om

skovenborg Nybegynder

26. november 2005 - 19:31 #17

Altså, funktionen showhide skal du indsætte i den jscript.js-fil du allerede har, altså:
http://www.dvddatabasen.dk/includes/jscript.js

Dette skridt kræver ikke noget af din php-kode, da du allerede indsætter den fil i head-sektionen:
<script type='text/javascript' src='../../includes/jscript.js'></script>

Jeg kan se du har indsat billedet med id="cover". Men jeg tror nu vi kommer til at løbe ind i problemmer senere hen. Der er jo kun et sted hvor dine covers vil blive vist, netop i <img src="" id='cover' style="display:none;">. Du kunne så lave et billede ud fra hver enkel film, men så kan du ikke bruge funktionen showhide mere (ikke uden et par ændringer). Jeg ved heller ikke om du har taget højde for hvordan designet vil rykke sig når coveret bliver vist i fuld størrelse?!? Hvis du er uheldig kommer det til at se lidt fjollet ud ;-)

Så måske vi skulle prøve en ny metode hvis du er frisk på det? Den går ud på, at når du holder musen over det lille billede, vises det store billede ved siden af (eller ud fra musens position). På den måde undgår du de problemmer jeg nævnte, og det kommer da også til at se lidt mere smart ud ;-)

Synes godt om

crapmaster Nybegynder

26. november 2005 - 19:55 #18

Jo tak den er jeg med på.....? Fortæl fortæl

Synes godt om

skovenborg Nybegynder

26. november 2005 - 20:42 #19

Okay, jeg skulle lige finde ud af hvordan ;-)

Jeg vil ikke lige forklare hvordan det fungerer, ud over at det ikke er den pæneste kode. Kopierede nok lidt for meget fra tidligere scripts jeg havde lavet ;-)

Nåja, bare det virker. Okay, først og fremmest skal du fjerne det tidligere vi har lavet - bare så du ikke bliver i tvivl om hvad der skal blive stående og hvad der skal ud.

Bagefter sætter du dette ind i din jscript.js-fil:
function getPos(elm) {
for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
return {x:zx,y:zy}
}

var coverElm;
function showhide(imgSrc) {
coverElm = document.getElementById("cover");
if (coverElm.style.display == "none") {
coverElm.style.display = "inline";
coverElm.src = imgSrc;

}
else {
coverElm.style.display = "none";
}
}

function moveCoverImage(elm,e) {
e = (e) ? e : event;
var posY = 0;
if (typeof e.pageY == "number") {
posY = e.pageY;
posY -= Math.max(0,(elm.offsetHeight+posY)-(window.innerHeight+window.scrollY));
}
else if (typeof e.offsetY == "number") {
posY = e.offsetY+getPos(elm).y;
}
if (coverElm) {
coverElm.style.left = e.clientX+10+"px";
coverElm.style.top = posY+10+"px";
}
}

Og husk ogs at fjerne den tidligere showhide-funktion. Den bruger vi ikke længere.

Så skal du sætte det billede ind vi gerne vil bruge til visning af de forskellige covers:
<img src="" id="cover" style="position:absolute;display:none">
Dette skal sættes ind helt til slut i filen (lige før </body>).

Til sidst skal alle dine små cover-billeder se sådan ud:
echo "<tr><td class='small' align='left'><img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover="showhide(this.src)" onmouseout="showhide('');" onmousemove="moveCoverImage(this,event);"><a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."'>".$data['dvdinfos_name']."</b></a><img src=\"\" id='cover' style=\"display:none;\"></td>";

Håber dette virker tilfredsstillende. Jeg har testet det i Mozilla og IE, hvor resultatet var ret godt. Opera har jeg indtil videre i hvert fald ikke haft tid til at ordne helt... men kan være jeg ser på det senere hen :-)

Synes godt om

crapmaster Nybegynder

26. november 2005 - 20:49 #20

Fejl

Parse error: parse error, unexpected T_STRING, expecting ',' or ';' in /hsphere/local/home/dvddata/dvddatabasen.dk/infusions/dvdinfos_system/dvdinfos.php on line 121

>>>>LINE 121<<<<<

echo "<tr><td class='small' align='left'><img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover="showhide(this.src)" onmouseout="showhide('');" onmousemove="moveCoverImage(this,event);"><a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."'>".$data['dvdinfos_name']."</b></a><img src=\"\" id='cover' style=\"display:none;\"></td>";

Synes godt om

skovenborg Nybegynder

26. november 2005 - 20:52 #21

aargh, glemte igen anførselstegnene...sorry :-S
echo "<tr><td class='small' align='left'><img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover=\"showhide(this.src)\" onmouseout=\"showhide('');\" onmousemove=\"moveCoverImage(this,event);\"><a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."'>".$data['dvdinfos_name']."</b></a><img src=\"\" id='cover' style=\"display:none;\"></td>";

Synes godt om

skovenborg Nybegynder

26. november 2005 - 20:53 #22

hov, glemte lige at fjerne noget:
echo "<tr><td class='small' align='left'><img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover="showhide(this.src)" onmouseout="showhide('');" onmousemove="moveCoverImage(this,event);"><a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."'>".$data['dvdinfos_name']."</b></a></td>";

Synes godt om

crapmaster Nybegynder

26. november 2005 - 21:20 #23

Den laver den samme fejl igen....Trals
Skal jeg smide hele koden så du kan se den ?

Synes godt om

crapmaster Nybegynder

26. november 2005 - 22:05 #24

Er du gådet iseng...? ;-)

Synes godt om

skovenborg Nybegynder

26. november 2005 - 22:07 #25

nejnej, holdt bare en lille pause ;-)

Tror jeg har kommet til at kopiere noget forkert kode. Det var sådan her jeg skulle ha' skrevet:
echo "<tr><td class='small' align='left'><img src=".$data[dvdinfos_cover]." width='80' height='110' onmouseover=\"showhide(this.src)\" onmouseout=\"showhide('');\" onmousemove=\"moveCoverImage(this,event);\"><a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."'>".$data['dvdinfos_name']."</b></a></td>";

Synes godt om

crapmaster Nybegynder

26. november 2005 - 22:13 #26

Ja det ser fedt ud, MEN??????

Der skal jo ikke være både cover og text på....Kun texten, når man så peger med musen på texten skal coveret komme frem....

Synes godt om

skovenborg Nybegynder

26. november 2005 - 22:18 #27

Hmm, dvs. hvis jeg fx flytter musen over teksten "Mickey Blue Eyes" så kommer coveret frem?

Synes godt om

crapmaster Nybegynder

26. november 2005 - 22:19 #28

ja, men vis du ser den nu, er der et cover i venster side, det skal ikke være der !?

Synes godt om

skovenborg Nybegynder

26. november 2005 - 22:23 #29

okay, det kunne løses sådan her:
echo "<tr><td class='small' align='left'><img src=".$data[dvdinfos_cover]." width='80' height='110'><a href='".BASEDIR."viewpage.php?page_id=10&dvdinfos_id=".$data['dvdinfos_id']."' onmouseover=\"showhide('".$data[dvdinfos_cover]."')\" onmouseout=\"showhide('');\" onmousemove=\"moveCoverImage(this,event);\">".$data['dvdinfos_name']."</b></a></td>";

Bemærk dog, at hvis du fjerner det lille billede så er coveret ikke mere gemt i hukommelsen/cachen, så det hurtigt kan hentes frem ligesom før. Det betyder altså, at der kommer til at gå lidt tid før billedet bliver vist ud fra teksten - medmindre du preloader det på forhånd.

Synes godt om

crapmaster Nybegynder

26. november 2005 - 22:25 #30

Yes, nu er den kommet over på texten, men cover i venster side er der stædig ?

Synes godt om

skovenborg Nybegynder

26. november 2005 - 22:27 #31

det fjerner du bare. Scriptet vil stadig virke :-)

Synes godt om

skovenborg Nybegynder

26. november 2005 - 22:29 #32

Du skal forresten også fjerne følgende som står helt i toppen:
<head>
<script type='text/javascript' src='../../includes/jscript.js'></script>
</head>
<body>

Synes godt om

crapmaster Nybegynder

26. november 2005 - 22:32 #33

Sådan så ser den ud til at virke....

Lige et par ting før jeg lukker,

1: Vis jeg kunne hente andet en et billede ind i den. ? Exp. omtale
2: kan jeg gøre coveret minder

Synes godt om

skovenborg Nybegynder

26. november 2005 - 22:43 #34

1: Det kan du godt, men det kræver en del ændringer i koden - og når teksten er genereret via PHP kan der godt opstå lidt problemmer, hvis teksten indeholder linjeskift. Der må nemlig ikke være linjeskift i tekststrenge i javascript.

Personligt synes jeg måske også du skulle holde dig til enkelte info når musen holdes over teksten. Det andet bliver lidt for forvirrende, hvis for meget information popper frem på én gang.

2: Ja, du skal bare definere en højde og bredde på billedet med id'en "cover", fx:
<img src="" id="cover" style="position:absolute;display:none;width:80px;height:110px">

Synes godt om

crapmaster Nybegynder

26. november 2005 - 22:53 #35

Jeg takker mangegange for din tid, kan du hjælpe mig med et andet spm, ang. at sætte info på siden, det er til den side man kommer til med info om filmen. den skal inde holde de skuespiller der er med i filmen.

så laver jeg et nyt spm til det, skal det også være her under ( JavaScript )

Synes godt om

crapmaster Nybegynder

26. november 2005 - 22:53 #36

Smid lige et svar...

Synes godt om

skovenborg Nybegynder

26. november 2005 - 23:01 #37

værgsågod :-)

Jeg tror du hellere må smutte over i PHP med det nye spm. I hvert fald hvis jeg har forstået det korrekt ;-) Jeg kigger måske forbi, dog nok ikke lige i dag... men ellers er der jo masser derinde som kan hjælpe :-)

Synes godt om

crapmaster Nybegynder

26. november 2005 - 23:05 #38

Jo tak, takker for alt din hjælp....Thx

Synes godt om

skovenborg Nybegynder

26. november 2005 - 23:07 #39

det var så lidt - og tak for points :-)

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
Sæt vindue størrelse Af poulmadsen i JavaScript	1	08/10/202417:18	13/10/202412:33
Opgavestyring Af ingeman i JavaScript	1	15/09/202416:06	15/09/202420:40
Returner ikke alt Af ingeman i JavaScript	13	26/06/202414:40	01/07/202417:00
Vis og skjul sektioner - virker kun på den første sektion Af nemlig i JavaScript	4	24/06/202422:50	26/06/202420:33
Hente og gemme Cookies like this. Af DanishBear i JavaScript	6	04/06/202416:23	05/06/202414:23

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