Avatar billede ballegaarden Nybegynder
16. oktober 2008 - 23:42 Der er 14 kommentarer og
3 løsninger

mouseover script på billede

Jeg har et mouseover script på mine små billeder, der viser ved en popup lige ved siden af billedet, et større billede af det lille. Jeg har så det problem da det store billede viser sig på højre side og forsvinder ud af siden, når musen kommer over de billeder der ligger i højre side og nederst på siden.
Er det noget i "style="position" ved billedet jeg kan skrive, for at det store billede ligger sig til venstre og oven for musen?
Jeg har også et andet, noget længere script, men der er problemet også det samme.
Det har jeg noget med:
BigImage.style.display = "block";
BigImage.style.left = (x+15)+ "px";
BigImage.style.top = (y+15)+ "px";

SCRIPT NR: 1
  <script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script></script>
  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
  <title>mouseover3</title>
  <meta content="Inge Damsgaard" name="author">
</head>
<body>
<script type="text/javascript" language="javascript">
function ShowImg(imgsmall,imglarge){
var imglarge=document.getElementById(imglarge);
imglarge.style.top=imgsmall.offsetTop;
imglarge.style.left=imgsmall.offsetLeft+imgsmall.offsetWidth+10;
imglarge.style.display="inline"
}
function HideImg(id){
document.getElementById(id).style.display="none"
}
</script>



<img
src="image/lille/LC200_01.jpg"
onmouseover="ShowImg(this,'img2')" onmouseout="HideImg('img2')"><img
id="img2" src="image/LC200_01.jpg"
style="position: absolute; display: none;">
Avatar billede w13 Novice
17. oktober 2008 - 00:17 #1
BigImage.style.display = "block";
BigImage.style.left = (x+15)+ "px";
BigImage.style.top = (y+15)+ "px";

skal så bare være:

var iBigImageWidth = 200; // Billedets bredde
var iBigImageHeight = 300; // Billedets højde
BigImage.style.display = "block";
BigImage.style.left = (x-iBigImageHeight-15)+ "px";
BigImage.style.top = (y-iBigImageHeight-15)+ "px";

Så skal du bare rette højde og bredde til.
Avatar billede ballegaarden Nybegynder
17. oktober 2008 - 12:29 #2
Jeg fandt tilfældigt et tilsvarende spørgsmål her i forumet:
http://www.eksperten.dk/spm/789495?Esession=b3221c50872de9cdba7424e6d6ea1ce8
Der skriver "olebole" at det er et dårlig script, vil i foreslå den første i stedet (nr1) Det skulle da helt virke i alle browser.
Mit største problem er at billedet forsvinder ud til højre i skærmen.
Avatar billede olebole Juniormester
17. oktober 2008 - 12:36 #3
<ole>

Hvorfor bruger du ikke bare det, w13 har vist dig? Så er der ikke noget, der forsvinder nogen steder hen, med mindre du laver andre fejl.
Læg evt. et link, så vi kan se, hvor fejlen(e) ligger

/mvh
</bole>
Avatar billede ballegaarden Nybegynder
17. oktober 2008 - 12:36 #4
Det var mærkeligt, den sidste kommentar jeg skrev kom ikke med.
Jeg helt ny her, så jeg har sikkert gjort noget forkert, så bær over mig :-)
Jeg svarede "w13" at det ikke virkede.
Og jeg tilføjede lige mit andet script:
SCRIPT NR.2: (og det er den jeg skriver om lige oven over)

<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 w13 Novice
17. oktober 2008 - 12:36 #5
Koden i det andet spørgsmål er ikke helt som dit. Det bruger innerHTML, og det gør dine scripts ikke.

Nu har jeg jo foreslået en rettelse, som burde løse dit problem, så det kunne jo være, du skulle prøve det først. =)

Der udover så giver denne del vist ikke meget mening:

  <script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script><endnote><head>
<script></script>

Hvis du vil bruge script nr. 2, så ret til:

  <meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
  <title>mouseover3</title>
  <meta content="Inge Damsgaard" name="author">
</head>
<body>
<script type="text/javascript">
function ShowImg(imgsmall, imglarge) {
  var imglarge=document.getElementById(imglarge);
  imglarge.style.position="absolute";
  imglarge.style.top=imgsmall.offsetTop+"px";
  imglarge.style.left=imgsmall.offsetLeft+imgsmall.offsetWidth+10+"px";
  imglarge.style.display="inline";
}
function HideImg(sID) {
  document.getElementById(sID).style.display="none";
}
</script>

<img src="image/lille/LC200_01.jpg" onmouseover="ShowImg(this, 'img2')" onmouseout="HideImg('img2')">
<img id="img2" src="image/LC200_01.jpg" style="display: none">
Avatar billede w13 Novice
17. oktober 2008 - 12:37 #6
Jeg prøver lige at rette dit script til. 2 sekunder, så poster jeg det.
Avatar billede w13 Novice
17. oktober 2008 - 12:47 #7
Denne her er testet og virker i IE 5.01 - 7, FF, Safari og Opera:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Mouseovertest</title>

<script type="text/javascript">

function ShowBigImage(image) {

    var BigImage = document.getElementById("BigImage");

    BigImage.setAttribute("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>

<style type="text/css">
#BigImage{
    display:none;
    position:absolute;
    width:100px;
    height:100px;
    border:1px solid #000;
}
</style>

</head>
<body>

<div style="text-align:center">

    <h1>Udskift billede ved MouseOver</h1>

    <img id="BigImage" alt="Stort billede" src="">

    <img alt="Billede 1" src="billede1.png" onmouseover="ShowBigImage('billede1.png')" onmousemove="MoveBigImage(event.clientX, event.clientY)" onmouseout="HideBigImage()">

    <img alt="Billede 2" src="billede2.png" onmouseover="ShowBigImage('billede2.png')" onmousemove="MoveBigImage(event.clientX, event.clientY)" onmouseout="HideBigImage()">

    <img alt="Billede 3" src="billede3.png" onmouseover="ShowBigImage('billede3.png')" onmousemove="MoveBigImage(event.clientX, event.clientY)" onmouseout="HideBigImage()">

    <img alt="Billede 4" src="billede4.png" onmouseover="ShowBigImage('billede4.png')" onmousemove="MoveBigImage(event.clientX, event.clientY)" onmouseout="HideBigImage()">

    <img alt="Billede 5" src="billede5.png" onmouseover="ShowBigImage('billede5.png')" onmousemove="MoveBigImage(event.clientX, event.clientY)" onmouseout="HideBigImage()">

</div>

</body>
</html>
Avatar billede w13 Novice
17. oktober 2008 - 12:50 #8
Der var dog mange fejl i koden:

Der var ingen doctype i dokumentet (se øverste linje nu). Derudover brugte du XHTML-koder, hvilket slet ikke går.

Der var et <center>-tag, hvilket er forældet og jeg har i stedet brugt <div style="text-align:center">.

JavaScript-koden brugte innerHTML, hvilket ikke er en valid kode i nogen JavaScript-standard.

Der var ingen alt-attributter på nogle af billederne.

Language="javascript" er forældet.

Osv. :)
Avatar billede ballegaarden Nybegynder
17. oktober 2008 - 13:24 #9
Holdt da op en smørre, supert - det er vist her jeg skal søge i stedet for andre steder på nettet, for man vil jo gerne have sin side til at virke så mange steder som muligt.
Nu har jeg prøvet at oploade min prøveside, for at du kan se mit problem:
http://www.ballegaarden.com/mouseover3.html
Jeg har bare sat en masse ens billeder ind og problemet opstår med de billeder der er i højre side, de forsvinder.
Og det med størrelsen (width:100px; height:100px;) dur' heller ikke, da mine billeder nogle gange ligger ned eller står op.
Avatar billede w13 Novice
17. oktober 2008 - 13:26 #10
Bare fjern:

    width:100px;
    height:100px;

så finder den selv billedets størrelse.

Men du har jo lidt af et problem her; hvis man holder musen over et billede i højre side, forsvinder billeder ud til højre. Men hvis vi nu lægger billedet til højre for musen, vil det forsvinde ud til venstre, når man holder musen over billeder i venstre side.

Det skulle derfor nok løses ved at aflæse, om det forsvinder ud til højre, og i så fald placere det til højre for musen.
Men det er bestemt ikke helt ligetil. =)
Avatar billede w13 Novice
17. oktober 2008 - 13:27 #11
*og i så fald placere det til venstre for musen.
Avatar billede w13 Novice
17. oktober 2008 - 13:37 #12
Denne rettelse kunne godt gøre tricket:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>

<title>Mouseovertest</title>

<script type="text/javascript">

function ShowBigImage(image) {

    var BigImage = document.getElementById("BigImage");

    BigImage.setAttribute("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";

    if (BigImage.offsetLeft + BigImage.offsetWidth > document.getElementsByTagName("body")[0].offsetWidth) {

        BigImage.style.left = BigImage.offsetLeft - BigImage.offsetWidth + "px";

    }

}

function HideBigImage() {

    document.getElementById("BigImage").style.display = "none";

}

</script>

<style type="text/css">
#BigImage{
    display:none;
    position:absolute;
    width:100px;
    height:100px;
    border:1px solid #000;
}
</style>

</head>
<body>

<div style="text-align:right">

    <h1>Udskift billede ved MouseOver</h1>

    <img id="BigImage" alt="Stort billede" src="">

    <img alt="Billede 1" src="billede1.png" onmouseover="ShowBigImage('billede1.png')" onmousemove="MoveBigImage(event.clientX, event.clientY)" onmouseout="HideBigImage()">

    <img alt="Billede 2" src="billede2.png" onmouseover="ShowBigImage('billede2.png')" onmousemove="MoveBigImage(event.clientX, event.clientY)" onmouseout="HideBigImage()">

    <img alt="Billede 3" src="billede3.png" onmouseover="ShowBigImage('billede3.png')" onmousemove="MoveBigImage(event.clientX, event.clientY)" onmouseout="HideBigImage()">

    <img alt="Billede 4" src="billede4.png" onmouseover="ShowBigImage('billede4.png')" onmousemove="MoveBigImage(event.clientX, event.clientY)" onmouseout="HideBigImage()">

    <img alt="Billede 5" src="billede5.png" onmouseover="ShowBigImage('billede5.png')" onmousemove="MoveBigImage(event.clientX, event.clientY)" onmouseout="HideBigImage()">

</div>

</body>
</html>
Avatar billede ballegaarden Nybegynder
17. oktober 2008 - 13:59 #13
Vau - du kan bare det der. Det er lige det jeg har søgt overalt på nettet og ikke kunne finde.
(har oploadet den nye prøve)
Så ved du sikkert godt, at får man noget vil man have mere :-)

Er det meget svært at få det at fungerer op og ned også ?
For som du kan se på en af mine sider, så har jeg en masse billeder:
http://www.ballegaarden.com/lightcap300-billeder.html
Avatar billede w13 Novice
17. oktober 2008 - 14:07 #14
Ikke ligeså let nej, desværre.

I øvrigt frygter jeg lidt, at noget af koden ikke vil virke, fordi du bruger tabeller, men det får vi se.
Avatar billede w13 Novice
17. oktober 2008 - 14:17 #15
Det kunne være (hvis du bare vil undgå den der popup, der er det nu), at du skulle tage et kig på lightbox i stedet: http://www.lokeshdhakar.com/projects/lightbox2
Avatar billede ballegaarden Nybegynder
17. oktober 2008 - 14:38 #16
Hvis du er i tvivl om at det vil virke, når jeg har tabeller, så skal du ikke bruge krudt på det. Det var rigtige flotte former for billede visning, jeg tror jeg vil prøve at arbejde lidt med dette og om det er til at gå til.
Jeg vil så se om billede visningen ikke kan foregå lidt hurtigere, for ellers vil jeg tage dit foreslag og prøve at sætte det ind i mine tabeller. tak for hjælpen
Avatar billede w13 Novice
17. oktober 2008 - 14:41 #17
Og tak for points! :)
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