Avatar billede betz Nybegynder
30. juli 2007 - 00:25 Der er 8 kommentarer

Hover problem på billede

Hey..

Har problemer med denne kode:

<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+1) + "px";
    BigImage.style.top = (y-1) + "px";
}
function HideBigImage(){
    document.getElementById("BigImage").style.display = "none";
}
</script>

<img src="http://www.laegekurser.dk/images/btCrsView.gif" border="0" onMouseOver="ShowBigImage('http://www.domæne.dk/upload/.$row[id].jpg');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">

    <div id="BigImage" style="border:medium none display;position:absolute; left:10px; top:10px">
        &nbsp;
    </div>


Når man har tilføjer mange billeder, scroller ned og holder musen over. vises billedet uden for skærmen.

er det muligt at rette denne irriterende ting?
Avatar billede kalp Novice
30. juli 2007 - 00:31 #1
det er vel dette i dit style som gør det.
position:absolute
Avatar billede betz Nybegynder
30. juli 2007 - 00:36 #2
nææ for det er meningen at billedet som følge med pilen.

Det virker fint indtil man begynder at scrolle.
Avatar billede olebole Juniormester
30. juli 2007 - 01:18 #3
<ole>

Undgå såvidt muligt innerHTML:

<script type="text/javascript">
function ShowBigImage(image){
    bigImage.setAttribute("src", image);
}
function MoveBigImage(x, y){
    bigImage.style.left = (x+document.documentElement.scrollLeft) + "px";
    bigImage.style.top = (y+document.documentElement.scrollTop) + "px";
    bigImage.style.display = "block";
}
function HideBigImage(){
    bigImage.style.display = "none";
}

var bigImage = null;
window.onload = function() {
    bigImage = document.getElementById("BigImage");
}
</script>

<img src="http://www.laegekurser.dk/images/btCrsView.gif" border="0" onMouseOver="ShowBigImage('http://www.domæne.dk/upload/.$row[id].jpg');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">

<img src="" id="BigImage" style="display:none;position:absolute;left:10px;top:10px">


/mvh
</bole>
Avatar billede olebole Juniormester
30. juli 2007 - 01:22 #4
- og dette er nok lidt fiksere:

<script type="text/javascript">
function ShowBigImage(image,e){
    bigImage.setAttribute("src", image);
    MoveBigImage(e);
}
function MoveBigImage(e){
    bigImage.style.left = (e.clientX+document.documentElement.scrollLeft) + "px";
    bigImage.style.top = (e.clientY+document.documentElement.scrollTop) + "px";
    bigImage.style.display = "block";
}
function HideBigImage(){
    bigImage.style.display = "none";
}

var bigImage = null;
window.onload = function() {
    bigImage = document.getElementById("BigImage");
}
</script>

<img src="http://www.laegekurser.dk/images/btCrsView.gif" border="0" onMouseOver="ShowBigImage('http://www.domæne.dk/upload/.$row[id].jpg', event);" onMouseMove="MoveBigImage(event);" onMouseOut="HideBigImage();">

<img src="" id="BigImage" style="display:none;position:absolute;left:10px;top:10px">
Avatar billede betz Nybegynder
30. juli 2007 - 14:38 #5
http://mb-design.dk/eksperten.php

Billedets placering ændres stadig når man scroller ned.
Avatar billede olebole Juniormester
30. juli 2007 - 14:50 #6
Prøv det nu i et HTML-dokument i stedet. Det dér sjusk burde slet ikke kunne vises i en browser!
Avatar billede betz Nybegynder
30. juli 2007 - 14:59 #7
Det jo bare for at vise dig at koden ikke virker når man scroller..

Har også prøvet i et html dokument.
Avatar billede olebole Juniormester
30. juli 2007 - 15:08 #8
"Det jo bare for at vise dig at koden ikke virker når man scroller.."

Jamen, det virker jo kun i et validt HTML-dokument. Du kan ikke forvente noget somhelst virker i den slags kode, du viser mig.

Prøv i et korrekt HTML-dokument. Så virker det ... og det ved jeg objektivt  ;o)
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