Søg
Avatar billede pokpok Nybegynder
14. februar 2006 - 00:51 Der er 34 kommentarer og
1 løsning

popup billede ved mouseclick

Hej.. jeg har denne her kode som virker..
http://www.frolunde.dk/galleri.php

Nu vil jeg have at når man trykker på det lille billede, skal der komme et
størrebillede (1.jpg og ikke 1.jeg_small.jpg) frem i z-index:2 og med CSS id = stort billede..

gammel kode.

<img onmouseover="getElementById('big').src='img/1.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/1.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/2.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/2.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/3.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/3.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/4.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/4.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/5.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/5.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/7.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/7.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/8.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/8.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/9.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/9.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/10.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/10.jpg_small.jpg' /> <br /><img onmouseover="getElementById('big').src='img/11.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/11.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/12.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/12.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/13.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/13.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/14.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/14.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/15.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/15.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/16.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/16.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/17.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/17.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/18.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/18.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/19.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/19.jpg_small.jpg' /> <br /><img onmouseover="getElementById('big').src='img/20.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/20.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/21.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/21.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/22.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/22.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/23.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/23.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/24.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/24.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/25.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/25.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/26.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/26.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/27.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/27.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/28.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/28.jpg_small.jpg' /> <br /><img onmouseover="getElementById('big').src='img/29.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/29.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/30.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/30.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/31.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/31.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/32.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/32.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/33.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/33.jpg_small.jpg' /> <img onmouseover="getElementById('big').src='img/6.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/6.jpg_small.jpg' /> <br /><br />

<img id="big" src="img/1.jpg_smalljpg" alt="Kør over et billede, for at få det vist her" />
Avatar billede pokpok Nybegynder
14. februar 2006 - 00:52 #1
ups.. poster lige koden igen

<img onmouseover="getElementById('big').src='img/1.jpg_small.jpg';getElementById('besk').innerHTML='1';" style='width: 50px;height: 40px;border: 0;' src='img/1.jpg_small.jpg' />
<img id="big" src="img/1.jpg_smalljpg" alt="Kør over et billede, for at få det vist her" />


sådan.. lidt overskueligt igen
Avatar billede roenving Novice
14. februar 2006 - 12:04 #2
Tjah, alt kan lykkes i en glasovn !o]

-- jeg ville lægge det ud i en funktion, ca. sådan (og det er absolut utestet !-)

<script type="text/javascript">
function showBig(pic){
  var img = document.getElementById("stortBillede");
  img.src = pic.src.replace(/^.*?jpg_small\..*?$/,"");
  img.style.display = inline;
}
function showSmall(pic,num){
  document.getElementById('big').src=pic.src;
  document.getElementById('besk').firstChild.nodeValue = num;
}
</script>

<img onmouseover="showSmall(this,1);" onclick="showBig(this);" style='width: 50px;height: 40px;border: 0;' src='img/1.jpg_small.jpg' />

<img id="big" src="img/1.jpg_smalljpg" alt="Kør over et billede, for at få det vist her" />

<img id="stortBillede" src="" style="display:none;z-index:2;position:absolute;left:150px;top:300px;">

-- og så er det lidt morsomt, at du benytter dig af xhtml, når du samtidig skriver javascript, som bør få enhver rimelig ordentlig xhtml-fortolker til at gå ned med et hult drøn (.innerHTML giver ikke mening i et xml-koncept !-)
Avatar billede pokpok Nybegynder
14. februar 2006 - 23:09 #3
det er fordi jeg har lavet alt design og xhtml... men jeg kan ikke JS eller php...

og ham der har lavet det er på ferie..

jeg kigger på det lidt senere, men det ser godt ud i en funktion.. så er det også meget mere overskueligt..

mange tak for hjælpen indtil vidre...

hilsen Kristian
Avatar billede pokpok Nybegynder
15. februar 2006 - 00:03 #4
hej igen..
jeg kan ikke gennemskue det...
jeg skal have sat det ind i php osv..
jeg er ikke hej til programmering, kun til css og html

jeg har to dokumenter... det ene hedder galleri.php og ser sådan ud.
______________________________________________________________________________________________

<h1>Billedegalleri</h1><br />
<?
/*
Skriptet her, går ud fra at alle filer der skal vises er .jpg format.
Desuden skal billedernes navn, eks  "1.jpg" matche til tilhørende id nummer
i databasen.
*/

/*
MySQL indstillinger
*/
$mysql_ip = "localhost"; //MySQL serveren IP adresse.
$mysql_usr = "xxxxxxxxx"; //MySQL bruger.
$mysql_pwd = "xxxxxxxxx"; //MySQL kodeord.
$mysql_db = "xxxxxxxxxx"; //MySQL databasen som skal bruges.

/*
Mappe & Billede indstillinger
*/
$folder = "img/"; //Mappen hvor billederne ligger.
$width = "50px"; //Bredden på billederne der listes.
$height = "40px"; //Højden på billederne der listes.
$h_count = 9; //Hvor mange billeder der listes horisontalt før et linieskift.

//Forbinder til mySQL server
mysql_connect($mysql_ip, $mysql_usr, $mysql_pwd) or die(mysql_error());
mysql_select_db($mysql_db) or die(mysql_error());

$g_besk = mysql_query("SELECT beskrivelse FROM galleri WHERE id = '1'") or die(mysql_error());
$g_besk = mysql_fetch_array($g_besk);
?>
<?require("billeder.php");?>
<br /><br />
<img id="big" src="<?=$folder."1.jpg_smalljpg";?>" alt="Kør over et billede, for at få det vist her" />
<br />
<div id="besk">
<?=$g_besk["beskrivelse"];?>
</div>
________________________________________________________________________________________
og et der hedder billede.php der er således

<?
    $g_img = mysql_query("SELECT * FROM galleri") or die(mysql_error());
    while($img = mysql_fetch_array($g_img)){
        $i++;
        echo "<img onmouseover=\"getElementById('big').src='".$folder.$img["id"].".jpg_small.jpg';getElementById('besk').innerHTML='".$img["beskrivelse"]."';\" style='width: $width;height: $height;border: 0;' src='".$folder.$img["id"].".jpg_small.jpg' /> ";
        if($i==$h_count){
            $i = 0;
            echo "<br />";
        }
    }
?>
_____________________________________________________________________________________________
kan du ikke lave det om til det du har lavet til mig.. ???

så er du bare kanon!!!! :)
Avatar billede roenving Novice
15. februar 2006 - 00:11 #5
Scriptet skal du bare sætte ind, dog med en enkelt rettelse:

<script type="text/javascript">
function showBig(pic){
  var img = document.getElementById("stortBillede");
  img.src = pic.src.replace(/^.*?jpg_small\..*?$/,"");
  img.style.display = inline;
}
function showSmall(pic,desc){
  document.getElementById('big').src=pic.src;
  document.getElementById('besk').firstChild.nodeValue = desc;//må så ikke indeholde linjeskift osv.
}
</script>

-- og det ser ud til, at du har gelmt et punktum i src til det almindelige fremvisningsbillede:

<img id="big" src="<?=$folder."1.jpg_small.jpg";?>" alt="Kør over et billede, for at få det vist her" />
<br />

-- billeder.php skal så nok være sådan:

<?
    $g_img = mysql_query("SELECT * FROM galleri") or die(mysql_error());
    while($img = mysql_fetch_array($g_img)){
        $i++;
        echo "<img onmouseover=\"showSmall(this,'".$img["beskrivelse"]."');\" onclick='showBig(this);' style='width: $width;height: $height;border: 0;' src='".$folder.$img["id"].".jpg_small.jpg' /> ";
        if($i==$h_count){
            $i = 0;
            echo "<br />";
        }
    }
?>
Avatar billede roenving Novice
15. februar 2006 - 00:18 #6
Hov, det skal være:

function showBig(pic){
  var img = document.getElementById("stortBillede");
  img.src = pic.src.replace(/jpg_small\./,"");
  img.style.display = inline;
}
Avatar billede pokpok Nybegynder
15. februar 2006 - 00:25 #7
det virker ikke...

se www.frolunde.dk/sites/galleri.php
Avatar billede pokpok Nybegynder
15. februar 2006 - 00:25 #8
prøver lige
Avatar billede roenving Novice
15. februar 2006 - 00:29 #9
Det ser ud til at du mangler det illede, der hedder stortBillede ?-)

-- og ufff, der var endnu en brøler:

function showBig(pic){
  var img = document.getElementById("stortBillede");
  img.src = pic.src.replace(/jpg_small\./,"");
  img.style.display = 'inline';
}
Avatar billede pokpok Nybegynder
15. februar 2006 - 00:29 #10
nej.. det virker ikke endnu.. desværre
Avatar billede pokpok Nybegynder
15. februar 2006 - 00:31 #11
hehe.. ja.. jeg prøver lige at oploade dem :D
Avatar billede roenving Novice
15. februar 2006 - 00:34 #12
-- du skal også have denne med:

<img id="stortBillede" src="" style="display:none;z-index:2;position:absolute;left:150px;top:300px;">
Avatar billede roenving Novice
15. februar 2006 - 00:36 #13
-- måske med disse tilføjelser:

<img id="stortBillede" src="" style="display:none;z-index:2;position:absolute;left:150px;top:300px;" title="Klik for at lukke" onclick="this.style.display='none';">
Avatar billede pokpok Nybegynder
15. februar 2006 - 00:53 #14
den der skal komme frem skal ikke hedde x.jpg men x.jpg_big.jpg.... hvor skal jeg lave det om...
Avatar billede roenving Novice
15. februar 2006 - 00:55 #15
img.src = pic.src.replace(/jpg_small\./,"jpg_big.");
Avatar billede pokpok Nybegynder
15. februar 2006 - 01:00 #16
Jeg ligger lidt ekstra points hvis du yderliger kan løse denher...


Det lille billede (nu = x.jpg_small.jpg) skal være et nyt billede der hedder (x.jpg_thomb.jpb).

så der i alt er 3 billeder.. et mini, et "small" og et "big"
Avatar billede roenving Novice
15. februar 2006 - 01:03 #17
<script type="text/javascript">
function showBig(pic){
  var img = document.getElementById("stortBillede");
  img.src = pic.src.replace(/jpg_thumb\./,"jpg_big.");
  img.style.display = 'inline';
}
function showSmall(pic,desc){
  document.getElementById('big').src = pic.src.replace(/jpg_thumb\./,"jpg_small.");
  document.getElementById('besk').firstChild.nodeValue = desc;//må så ikke indeholde linjeskift osv.
}
</script>
Avatar billede pokpok Nybegynder
15. februar 2006 - 01:27 #18
der er noget der ikke virker...

www.frolunde.dk/galleri.php <-- nu har jeg oploaded de rigtige billeder..

http://www.frolunde.dk/img/1.jpg_thomb.jpg
http://www.frolunde.dk/img/1.jpg_small.jpg
http://www.frolunde.dk/img/1.jpg_big.jpg
Avatar billede roenving Novice
15. februar 2006 - 01:31 #19
Hov, jeg har jo også stavet til thumb, som det staves på engelsk (thumbnail = tommelfingernegl !-)
Avatar billede pokpok Nybegynder
15. februar 2006 - 01:37 #20
det er bare mig der ikke kan stave... :D

_______

nu er der bare en ny fejl..
Avatar billede pokpok Nybegynder
15. februar 2006 - 01:38 #21
<?
    $g_img = mysql_query("SELECT * FROM galleri") or die(mysql_error());
    while($img = mysql_fetch_array($g_img)){
        $i++;
        echo "<img onmouseover=\"showSmall(this,'".$img["beskrivelse"]."');\" onclick='showBig(this);' style='width: $width;height: $height;border: 0;' src='".$folder.$img["id"].".jpg_small.jpg' /> ";  <----------------------------------------HER...
        if($i==$h_count){
            $i = 0;
            echo "<br />";
        }
    }
?>
Avatar billede pokpok Nybegynder
15. februar 2006 - 01:39 #22
hvis jeg ændre .jpg_small.jpg' />      til      folder.$img["id"].".jpg_thomb.jpg' />

så er det ikke kun de små billeder der bliver til thomb, men også dem som skulle være small og vises ved mouse over..


www.frolunde.dk/galleri.php <.-- kan du se deT0
Avatar billede roenving Novice
15. februar 2006 - 01:41 #23
Hvilken fejl ?-)

-- skal du ikke bare ændre _small til _thomb ?o]
Avatar billede roenving Novice
15. februar 2006 - 01:42 #24
document.getElementById('big').src = pic.src.replace(/jpg_thomb\./,"jpg_small.");
Avatar billede pokpok Nybegynder
15. februar 2006 - 01:53 #25
right... det virkede...
Avatar billede pokpok Nybegynder
15. februar 2006 - 01:53 #26
så lige den sidste ting.. giver op til 100 points i alt hvis du gider
Avatar billede pokpok Nybegynder
15. februar 2006 - 01:56 #27
når man trykker på et lille billede kommer der, som der skal et big billede frem..

når man så trykker på det forsvinder det igen, som der skal.


når man så trykker på et andet lille billede, ser man det forrige big billede, indtil det andet billede (big) er loaded...

kan man ikke lave så når billede(big) loades  skal der komme et andet billede frem (loading-logo)

hvis du forstår?
Avatar billede roenving Novice
15. februar 2006 - 02:01 #28
Vi kan jo bare sætte src til noget tilfældigt onclick:

<img id="stortBillede" src="" style="display:none;z-index:2;position:absolute;left:150px;top:300px;" title="Klik for at lukke" onclick="this.style.display='none';this.src='loading_logo_her.gif';">

Velbekomme '-)
Avatar billede roenving Novice
15. februar 2006 - 02:30 #29
-- og tak for point ;~}
Avatar billede pokpok Nybegynder
15. februar 2006 - 02:41 #30
hey igen.. der ser fedt ud.. du er kanon til JS


når man klikker på det lille billede første gang får man ikke loading_logo.gif med.

det er vel fordi at loading_logo.gif ikke er loaded først.

kan man ikke på loading_logo.gif til at være loaded ved Hentning af hjemmesiden...
Avatar billede roenving Novice
15. februar 2006 - 02:46 #31
-- jo, sæt det ind i src-attributten på billedet !o]

-- og så kan man, såvidt jeg husker, endda gøre scriptet en anelse mere generisk:

<img id="stortBillede" src="css/img/loading_logo.gif" style="display:none;z-index:2;position:absolute;left:150px;top:300px;" title="Klik for at lukke" onclick="this.style.display='none';this.src=this.defaultSrc;">
Avatar billede pokpok Nybegynder
15. februar 2006 - 02:58 #32
nu er det kun den første gang at billede loades der vises loading_logo.gif
Avatar billede pokpok Nybegynder
15. februar 2006 - 02:58 #33
:''-(
Avatar billede roenving Novice
15. februar 2006 - 03:06 #34
Tjah, jeg havde fat i en masse default-ting den anden dag, det har jeg nok forvekslet:

<img id="stortBillede" src="css/img/loading_logo.gif" style="display:none;z-index:2;position:absolute;left:5px;top:5px;" title="Klik for at lukke" onclick="this.style.display='none';this.src='css/img/loading_logo.gif';">
Avatar billede pokpok Nybegynder
15. februar 2006 - 03:10 #35
nice.. nu er det total lir og ser nice ude...

www.frolunde.dk <-- hvad synes du? om det hele?
Avatar billede 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.

Loading billede Opret Preview
Kategori
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.

Opret Log ind

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten
Seneste spørgsmål Seneste aktivitet
I dag 13:08 overføre internet til gæstehus Af Malm i Andet hardware
I går 19:53 Hotspot problemer på Samsung mobil med 2 SIM kort Af Gamba i Mobilnetværk
11/0722:40 Nye toldregler = nye svindelmuligheder Af nu_igen i Andet software
09/0715:37 Et wifi net til en kolonihave uden wifi Af Andershoegh i Andet hardware
09/0714:29 IIS Kan ikke Redirecte til anden side Af bsn i Webservere
White papers
Flere white papers »