Avatar billede thomaskramer Juniormester
14. april 2006 - 10:21 Der er 26 kommentarer og
1 løsning

mouse-over på billede-galleri - en påskeudfordring

Hej

Jeg vil gerne lave et billedegalleri.

I sig selv ikke så svært!

Der er 18 billeder, fordelt på 3 kolonner og 6 rækker.

Disse billeder har en størrelse på 180x120 pixels.

Det jeg gerne vil have er at når man kører musen hen over et af disse små billeder, så dukker et større billede op i et layer (skal ikke partout være et layer - bare sådan som jeg tænker det). Dette billede skal f.eks. være dobbelt så stort som det lille billede.

Det store billedet skal følge musen, så længe denne er over det lille billede. Altså skal muse-pointeren altid være i øverste venstre hjørne af det store billedet - det store billede skal så følge musen indenfor det lille billede, og så forsvinde hvis man kører væk fra det lille billede.

Er der nogen der kan sådan noget?

Der er selvfølgelig både point og påskeæg på højkant!
Avatar billede ckh Nybegynder
14. april 2006 - 10:38 #1
Det skulle kunne lade sig gøre med overlib vil jeg mene. Prøv at lur lidt på det her:

http://www.bosrup.com/web/overlib/
Avatar billede thomaskramer Juniormester
14. april 2006 - 11:29 #2
Jeg må tilstå at det ikke er nogen hjælp for mig...

Jeg er programmerings-mongol og kan ikke lige lure noget i den retning.

Nogen der har et konkret bud - eller flere?
Avatar billede mapoulsen Nybegynder
14. april 2006 - 12:15 #3
Der er lige kommet en Typo3-extension som kan lave et sådan billedegalleri. Denne kan du jo gå ind og lade dig inspirere lidt af. Du kan læse om den her:
http://typo3.org/documentation/document-library/extension-manuals/bahag_photogallery/0.9.1/view/toc/0/

Og du kan se hvordan det virker her:
http://www.srijan.in/photo_gallery.html

Mvh. Martin
Avatar billede webstuff Nybegynder
14. april 2006 - 15:05 #4
Har lige prøvet at lave det her:
www.webstuff.dk/case011
Avatar billede webstuff Nybegynder
14. april 2006 - 15:25 #5
#mapoulsen: Hvis han som han selv siger er "programmerings-mongol" så kunne jeg godt forestille mig han ville have lidt svært ved at plukke det ud af en Typo3 extension :-)
God påske!
Avatar billede thomaskramer Juniormester
14. april 2006 - 17:22 #6
webstuff - tak fordi du opfattede mit "programmerings-mongol" helt korrekt.

Ind i mellem tror folk at det bare er for sjov at man skriver sådan - det er det på ingen måde i mit tilfælde :-)
Avatar billede thomaskramer Juniormester
14. april 2006 - 17:25 #7
og så til sagen...

WEBSTUFF - du er en sand helt!!!

Det er lige præcist sådan at jeg gerne vil have det til at være!!

tak for hjælpen og tillykke med pointene
Avatar billede thomaskramer Juniormester
14. april 2006 - 17:34 #8
skal det være png-billeder man bruger??
Avatar billede webstuff Nybegynder
14. april 2006 - 18:03 #9
thomaskramer - Selv tak for det :-D

Jamen, jeg er jo det man i folkemunde kalder en gentlemann ;o)
Tak for point og god påske. ;D

Nej det skal ikke være png billeder man bruger, du skal bare huske at ændre filnavnene 2 steder..
Både i "src" og i funktionen ved "OnMouseMove" :-)
Avatar billede webstuff Nybegynder
14. april 2006 - 19:23 #10
Til fremtidige læsere så er scriptet flyttet til.
www.cases.hotserv.dk (www.cases.hotserv.dk/javascript/case011)
Avatar billede thomaskramer Juniormester
14. april 2006 - 22:45 #11
Eneste minus er at dit nye link ikke virker :-(

Giver du lige lyd når det virker - eller evt. paste scriptet ind her på siden.
Avatar billede thomaskramer Juniormester
15. april 2006 - 10:33 #12
Webstuff - det store billede bliver loadet igen og igen og igen, når man holder musen over det lille billede. Det er lidt underligt - kan man få den til at lade være med det??

Desuden varierer det store billedes placering i forhold til muse-pointeren. Hvis det lille billede er i bunden af skærmen så dukker det store billede op ét sted - hvis billederne er i toppen af skærmen så dukker det store billede op et andet sted.

Er det noget man kan lave om på??
Avatar billede webstuff Nybegynder
15. april 2006 - 11:42 #13
Der ligger en modificeret udgave på www.webstuff.dk/case011 nu - den vil blive flyttet til www.cases.hotserv.dk så snart den er oppe igen.
Den nye burde ikke reloade billederne hver gang :-)

Men forstår ikke helt hvad du mener med at de bliver vist anderledes hvis billedet er i bunden af skærmen?
Avatar billede webstuff Nybegynder
15. april 2006 - 11:43 #14
Her er den nye kode:
----------------------------------------------------------
<html>
<head>
<script type="text/javascript">
function ShowBigImage(image){
    var BigImage = document.getElementById("BigImage");
    BigImage.innerHTML = "<img src='"+image+"'>";
}
function MoveBigImage(x, y){
    var BigImage = document.getElementById("BigImage");
    BigImage.style.display = "block";
    BigImage.style.left = (x+15) + "px";
    BigImage.style.top = (y+15) + "px";
}
function HideBigImage(){
    document.getElementById("BigImage").style.display = "none";
}
</script>
</head>
<body>
<center>
<h1>Udskift Billede Ved MouseOver</h1>
    <div id="BigImage" style="border:1px solid #000;width:100px;height:100px;display:none;position:absolute;">
        &nbsp;
    </div>
    <br /><br />

    <img src="billede1.png" onMouseOver="ShowBigImage('billede1.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
    <img src="billede2.png" onMouseOver="ShowBigImage('billede2.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
    <img src="billede3.png" onMouseOver="ShowBigImage('billede3.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
    <img src="billede4.png" onMouseOver="ShowBigImage('billede4.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
    <img src="billede5.png" onMouseOver="ShowBigImage('billede5.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
</center>
</body>
</html>
Avatar billede thomaskramer Juniormester
15. april 2006 - 21:12 #15
TAK :-)

Nu opdaterer den ikke billedet hele tiden.

Det jeg mener med billedet i bunden af skærmen er:

Når de billeder jeg bruger dit script på er nederst på siden (nederst på skærmen), så er muse-pointeren i øverste venstre hjørne i det store billede.

Hvis jeg så scroller ned på siden...så billeder kommer højere op på skærmen (i skærmbilledet), så er muse-pointeren pludseligt i nederste venstre hjørne af det store billede.

Det er en lille detalje - men det undrer mig alligevel :-)
Avatar billede webstuff Nybegynder
16. april 2006 - 10:57 #16
Hmm.. Det undrer også mig ;o)
Har du evt. et link til det? :-)
Avatar billede mclemens Nybegynder
18. april 2006 - 01:17 #17
Webstuff prøv at indsætte en masse <br> mellem body og billederne som her:
(billedet bliver ikke relativt placeret i IE som den den gør i FF fordi IE måler på cursorens relative placering i forhold til vinduet...) - kommer lige med et script der virker på samme måde i begge browsere(har en muse tracker som jeg lavede til min dropdown tingest af samme årsag :P )

<html>
<head>
<script type="text/javascript">
function ShowBigImage(image){
    var BigImage = document.getElementById("BigImage");
    BigImage.innerHTML = "<img src='"+image+"'>";
}
function MoveBigImage(x, y){
    var BigImage = document.getElementById("BigImage");
    BigImage.style.display = "block";
    BigImage.style.left = (x+15) + "px";
    BigImage.style.top = (y+15) + "px";
}
function HideBigImage(){
    document.getElementById("BigImage").style.display = "none";
}
</script>
</head>
<body>
<center>
<h1>Udskift Billede Ved MouseOver</h1>
    <div id="BigImage" style="border:1px solid #000;width:100px;height:100px;display:none;position:absolute;">
        &nbsp;
    </div>
    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />    <br /><br />

    <img src="billede1.png" onMouseOver="ShowBigImage('billede1.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
    <img src="billede2.png" onMouseOver="ShowBigImage('billede2.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
    <img src="billede3.png" onMouseOver="ShowBigImage('billede3.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
    <img src="billede4.png" onMouseOver="ShowBigImage('billede4.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
    <img src="billede5.png" onMouseOver="ShowBigImage('billede5.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">
</center>
</body>
</html>
Avatar billede mclemens Nybegynder
18. april 2006 - 01:20 #18
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html;

charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">
function ShowBigImage(image){
    var BigImage = document.getElementById("BigImage");
    BigImage.innerHTML = "<img src='"+image+"'>";
}
function MoveBigImage(x, y){
    var BigImage = document.getElementById("BigImage");
    BigImage.style.display ="block";

if(document.all){
y=(tmenu=document.documentElement.scrollTop)?tmenu+y:document.body.scrollTop+y;
x=(lmenu=document.documentElement.scrollLeft)?lmenu+x:document.body.scrollLeft+x;
}
    BigImage.style.left = (x+15) + "px";
    BigImage.style.top = (y+15) + "px";
}
function HideBigImage(){
    document.getElementById("BigImage").style.display = "none";
}
</script></head>

<body>

<center>
<h1>Udskift Billede Ved MouseOver</h1>
    <div id="BigImage" style="border: 1px solid rgb(0, 0, 0); width: 100px; height: 100px;

display: none; position: absolute; left: 294px; top: 150px;"><img

src="case011_files/billede2.png"></div>
    <br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
    <img src="case011_files/billede1.png" onmouseover="ShowBigImage('billede1.png');"

onmousemove="MoveBigImage(event.clientX, event.clientY);" onmouseout="HideBigImage();">
    <img src="case011_files/billede2.png" onmouseover="ShowBigImage('billede2.png');"

onmousemove="MoveBigImage(event.clientX, event.clientY);" onmouseout="HideBigImage();">
    <img src="case011_files/billede3.png" onmouseover="ShowBigImage('billede3.png');"

onmousemove="MoveBigImage(event.clientX, event.clientY);" onmouseout="HideBigImage();">
    <img src="case011_files/billede4.png" onmouseover="ShowBigImage('billede4.png');"

onmousemove="MoveBigImage(event.clientX, event.clientY);" onmouseout="HideBigImage();">
    <img src="case011_files/billede5.png" onmouseover="ShowBigImage('billede5.png');"

onmousemove="MoveBigImage(event.clientX, event.clientY);" onmouseout="HideBigImage();">
</center>

</body></html>
Avatar billede mclemens Nybegynder
18. april 2006 - 01:25 #19
øv ombrudt... nåh, ret den lige manuelt...
det er sådan set bare 2/4 linjer her, der skal tilføjes :)

Disse 2/4 linjer indsættes lige

if(document.all){
  y=(tmenu=document.documentElement.scrollTop)?tmenu+y:document.body.scrollTop+y;
  x=(lmenu=document.documentElement.scrollLeft)?lmenu+x:document.body.scrollLeft+x;
}

før disse to linjer i scriptet

    BigImage.style.left = (x+15) + "px";
    BigImage.style.top = (y+15) + "px";
Avatar billede mclemens Nybegynder
18. april 2006 - 01:56 #20
hmm, den virkede ikke i firefox :/ ... her er en moddet udgave til at modellere videre på den viser billedet i samme relative position til musen i både ie og ff selvom man indsætter mange <br>'s... mulighed for indstilling af sti til de store billeder, extension og standard billede filnavn...

undskyld de mange post :)


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><head><meta http-equiv="content-type" content="text/html; charset=iso-8859-1"><title>Ingen titel</title>

<script type="text/javascript">

var dmcy=0;
var dmcx=0;

var IE=document.all?true:false;
if(!IE)document.captureEvents(Event.mousemove);

bi=false;

window.onload=function(){
bi=document.getElementById("BigImage");
}

document.onmousemove=function (e){
if(IE){
  dmcst=(tmenu=document.documentElement.scrollTop)?tmenu:document.body.scrollTop;
  dmcsl=(lmenu=document.documentElement.scrollLeft)?tmenu:document.body.scrollLeft;
  dmcy=event.clientY+dmcst;
  dmcx=event.clientX+dmcsl;
}else{
  dmcst=0;
  dmcsl=0;
  dmcy=e.pageY;
  dmcx=e.pageX;
}
if(bi)bi.style.left=dmcx+15+"px";
if(bi)bi.style.top=dmcy+15+"px";
}

sbist="./";
sbisf="billede";
sbisx=".png";

function sbi(tn,pic){
document.getElementById("bigimage1").src=sbist+sbisf+pic+sbisx;
if(bi)bi.style.display="block";
}

function hbi(){
if(bi)bi.style.display="none";
}

</script></head>

<body>

<center>
<h1>Udskift Billede Ved MouseOver</h1>
    <div id="BigImage" style="border: 1px solid rgb(0, 0, 0); width: 100px; height: 100px; display: none; position: absolute; left: 0px; top: 0px;"><img id="bigimage1" src="./billede1.png"></div>
    <img src="billede1.png" onmouseover="sbi(this,'1');" onmouseout="hbi();">
    <img src="billede2.png" onmouseover="sbi(this,'2');" onmouseout="hbi();">
    <img src="billede3.png" onmouseover="sbi(this,'3');" onmouseout="hbi();">
    <img src="billede4.png" onmouseover="sbi(this,'4');" onmouseout="hbi();">
    <img src="billede5.png" onmouseover="sbi(this,'5');" onmouseout="hbi();">
</center>

</body></html>
Avatar billede mclemens Nybegynder
18. april 2006 - 03:32 #21
4 overflødigheds linjer:

var dmcy=0;
var dmcx=0;

og længere nede

  dmcst=0;
  dmcsl=0;
Avatar billede thomaskramer Juniormester
04. september 2006 - 22:54 #22
Det virker super!! :-)
Avatar billede mclemens Nybegynder
04. september 2006 - 23:00 #23
Velbekom ;)
Avatar billede thomaskramer Juniormester
04. september 2006 - 23:03 #24
er du generelt skrap til sådan nogle herlige opgaver?

Jeg har en liggende inde under JAVASCRIPT som ingen åbenbart vil røre med en ildtang.

http://www.eksperten.dk/spm/730075

Var det noget? :-)
Avatar billede mclemens Nybegynder
04. september 2006 - 23:21 #25
Uhm, har ikke lavet noget i den stil endnu ...
- men hæng ud et par dage ... der skal sikkert
nok komme lidt respons på spørgsmålet ... :)
Avatar billede thomaskramer Juniormester
02. oktober 2006 - 16:46 #26
Kan man ændre på billedets placering i forhold til pointeren?

Så det store billede f.eks. vises til venstre over pointeren, istedet for til højre under pointeren?
Avatar billede roenving Novice
05. oktober 2006 - 03:31 #27
Ændr disse linjer, så det passer til dit behov:

if(bi)bi.style.left=dmcx+15+"px";
if(bi)bi.style.top=dmcy+15+"px";

-- f.eks.

if(bi)bi.style.left=dmcx-85+"px";
if(bi)bi.style.top=dmcy-115+"px";
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
Vi tilbyder markedets bedste kurser inden for webudvikling

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