Avatar billede pvtsommer Nybegynder
19. februar 2006 - 16:41 Der er 8 kommentarer og
1 løsning

En lille billedfremviser.

Hej! :o)

Jeg håber igen på at I kan hjælpe mig herinde, som I nu engang altid kan.

Dette er såvidt jeg kan forstå noget simpelt javascript, men jeg har nu lidt problemer med det. Jeg fandt et template, som har en DIV-kasse, som så vha. en onMouseOver og en onMouseOut sætter sig fast til cursoren så længe den er over det givne billede. Det er såmendt også et super nok script, MEN! Det virker ikke i FF!

Eksemplet er at vi har "billede1.jpg". Det er minimeret til 100x100px's og når musen føres over kommer der så en boks (DIV) ved musen, som forstørrer billedet i den seperate kasse (DIV'en).

Jeg vil altså have at jeg kan indsætte et billede som følger:

<img src="billede_thumb.jpg" onMouseOver="toolTip('billede.jpg')" onMouseOut="toolTip()">

og så kommer der en kasse frem ved cursoren, som viser billedet i den oprindelige størrelse når musen er over, og når musen er væk fra billedet, forsvinder boksen.

Mit problem er at templated kun virker i IE, og ikke FF. :( - Nogen der kan hjælpe mig med et nyt script?

Der må meget gerne kunne være andet indhold end et billede. Se fx følgende side:

http://partyworm.dk/?show=forum&fid=8&tid=1285&page=0 og hold musen over et navn i forummet.

Nogen som kan hjælpe?
Avatar billede roenving Novice
24. februar 2006 - 17:16 #1
F.eks. sådan:

<script language="javascript" type="text/javascript">
function getPos(elm) {
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}

function aabnStort(elm){
//alert(elm.src);
fil = elm.src;//.substring(0,elm.src.indexOf("."))+"_stor.jpg";
document.getElementById("storBillede").src = fil;
bdiv = document.getElementById("stortBillede");
bdiv.style.top = getPos(elm).y+2;
bdiv.style.left = getPos(elm).x+2;
bdiv.style.display='block';
}

function lukStort(){
document.getElementById("stortBillede").style.display='none';
}
</script>

<div id="stortBillede" style="position:absolute;z-index:5;display:none;" onmouseout="this.style.display='none';"><img id="storBillede" src="" width="500"></div>

Og så dine små billeder:
<img src="../billede.jpg" width="100" onmouseover="aabnStort(this);">
Avatar billede pvtsommer Nybegynder
24. februar 2006 - 20:21 #2
Hmm... den virker ej heller i Firefox. Den placeres bare ude i siden, men virker fint nok i IE.

Dog endnu et problem. Min billede sti er et PHP-dokument faktisk.

Fx er showImage.php?pic=28&rand=<?= time(); ?> et thumbnail
og showImage.php?pic=28&maxMeasure=200 er billede 28 med en bredde på 200 pixels.

Når man holder musen over det første, vises billede 2. Jeg har forsøgt at rode lidt med dit script, men kan simpelthen ikke få liv i det udover i IE, samt "halvt" i Firefox.

Desværre :(
Avatar billede roenving Novice
25. februar 2006 - 15:11 #3
Så prøv følgende, som i hvert fald virker med mine blleder (som jo ikke indeholder get-parametre som dine, men det burde replacen klare !-)

<script language="javascript" type="text/javascript">
function getPos(elm) {
    for(var zx=zy=0;elm!=null;zx+=elm.offsetLeft,zy+=elm.offsetTop,elm=elm.offsetParent);
    return {x:zx,y:zy}
}

function aabnStort(elm){
  var bdiv = document.getElementById("stortBillede");
  bdiv.firstChild.src = elm.src.replace(/rand=\d+/,"maxMeasure=200");
  var pos = getPos(elm);
  bdiv.style.top = pos.y+2;
  bdiv.style.left = pos.x+2;
  bdiv.style.display='block';
}

function lukStort(){
  document.getElementById("stortBillede").style.display='none';
}
</script>

<div id="stortBillede" style="position:absolute;z-index:5;display:none;" onmouseout="this.style.display='none';"><img id="storBillede" src="" width="500"></div>

Og så dine små billeder:
<img src="../billede.jpg" width="100" onmouseover="aabnStort(this);">
Avatar billede roenving Novice
25. februar 2006 - 15:12 #4
PS. Virker uden problemer i mine browsere, og alle nyere browsere burde æde den uden problemer !-)
Avatar billede pvtsommer Nybegynder
27. februar 2006 - 11:33 #5
Hmm... altså det virker PERFEKT i IE! Men problemet er simpelthen Firefox. Der placeres billedet HELT forkert :( - Det placeres øverst til venstre i min content div.

Link: http://www.azureus.dk/showRegion.php?area=1

I IE gør den PRÆCIS som den skal. Men desværre ikke her :(

Jeg tænkte at det kunne være fordi den ikke kunne finde x og y på bileldet i firefox af en eller anden grund, men  alert(pos.y); alert(pos.x); giver de præcise koordinater.

Jeg har ændret ganske lidt i koden, blandt andet fjernet +2 så den bare passer ovenpå. Men den vil ganske simpelt ikke som jeg vil. Vil du kigge engang til?

På forhånd tak :o)
Avatar billede roenving Novice
27. februar 2006 - 22:16 #6
Argh, jeg havde jo også overset, at der produceres en ugyldig css-længde ,-(

Længder i css _skal_ have enhed på, hvis de overhovedt må fortolkes ifølge css-standarden, så faktisk er det en fejl, at der overhovedet findes browsere, der viser det korrekt ...

...
  var pos = getPos(elm);
  bdiv.style.top = pos.y+"px";
  bdiv.style.left = pos.x+"px";
  bdiv.style.display='block';
...
Avatar billede pvtsommer Nybegynder
28. februar 2006 - 13:14 #7
Tusinde tak! Smid svar og du får point...
Avatar billede roenving Novice
25. marts 2006 - 15:17 #8
Velbekomme '-)
Avatar billede roenving Novice
25. marts 2006 - 15:32 #9
-- og tak for point ;~}
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