Notifikationer

Markér alle som læst Log ud

13thsky Nybegynder

14. februar 2008 - 14:56 Der er 10 kommentarer og
1 løsning

vise billede on mouse over

Jeg skal bruge et SUPER simpelt eksempel på at billeder kommer frem i stort og i uden at det øvrige indhold på hjemmesiden rykker sig.
I stil med dette:
http://www.sxc.hu/browse.phtml?f=search&txt=chat&w=1
- eller som når man holder musen over kamera ikonet på billede annoncerne på dba.dk

/13

Synes godt om

w13 Novice

14. februar 2008 - 15:06 #1

Følgende er testet og virker:
-----------------------------------------------------
<html>
<head>
<script type="text/javascript" language="javascript">
function ShowImg(imgsmall,imglarge){
var imglarge=document.getElementById(imglarge);
imglarge.style.top=imgsmall.offsetTop+(imgsmall.offsetHeight/2);
imglarge.style.left=imgsmall.offsetLeft+(imgsmall.offsetWidth/2);
imglarge.style.display="inline"
}
function HideImg(id){
document.getElementById(id).style.display="none"
}
</script>
</head>
<body>

<img src="img1.jpg" onmouseover="ShowImg(this,'img2')" onmouseout="HideImg('img2')">
<img id="img2" src="img2.jpg" style="position:absolute;display:none"

</body>
</html>
-----------------------------------------------------
For at holde koden simpel, som du jo beder om, vises billedet ikke der hvor musen er placeret, det vises bare ca. midt på det lille billede.

Synes godt om

roenving Novice

15. februar 2008 - 14:15 #2

-- og der mangler vist lige en > ...

<img src="img1.jpg" onmouseover="ShowImg(this,'img2')" onmouseout="HideImg('img2')">
<img id="img2" src="img2.jpg" style="position:absolute;display:none">

</body>

Synes godt om

w13 Novice

15. februar 2008 - 14:51 #3

Jaeh. :)

Synes godt om

13thsky Nybegynder

15. februar 2008 - 22:19 #4

jamen, jeg skal faktisk bruge det script hvor den følger musen, eller måske blot bliver vist lige ved siden af det lille billede.

Synes godt om

w13 Novice

15. februar 2008 - 22:57 #5

Så bliver det ikke super simpelt. :)

Ved siden af billedet, så retter du bare:

imglarge.style.top=imgsmall.offsetTop+(imgsmall.offsetHeight/2);
imglarge.style.left=imgsmall.offsetLeft+(imgsmall.offsetWidth/2);

til:

imglarge.style.top=imgsmall.offsetTop+imgsmall.offsetHeight+10;
imglarge.style.left=imgsmall.offsetLeft+imgsmall.offsetWidth+10;

Synes godt om

13thsky Nybegynder

16. februar 2008 - 17:52 #6

Det virker stadig ikke. Altså scriptet sætter jeg på en række billeder som er listen under hinanden. Jeg kan se at det store billede har rykket sig, men det kommer aldig frm ved siden af det lille.

/13

Synes godt om

w13 Novice

16. februar 2008 - 18:29 #7

Nej, det bør så bare være:

imglarge.style.top=imgsmall.offsetTop;
imglarge.style.left=imgsmall.offsetLeft+imgsmall.offsetWidth+10;

Synes godt om

13thsky Nybegynder

16. februar 2008 - 18:49 #8

billedet kommer stadig ikke ferm ved siden af det lille billede. Det kommer frem helt oppe i hjørnet. og altdi det samme sted, ligegyldigt hvilket lille billede jeg holde musen over.

Synes godt om

13thsky Nybegynder

16. februar 2008 - 18:53 #9

kan man ikke indskrive i koden at billedet fremkommer til højre for musen f.eks.?

Synes godt om

w13 Novice

16. februar 2008 - 22:07 #10

Jamen så bliver det bestemt ikke simpelt, og det ville du jo have. :) Og jeg må indrømme, at jeg lige p.t. ikke er interesseret i at lave et større script, som følger musen.

Når jeg kører følgende kode, fungerer det ligesom det var ment:
--------------------------------------------
<html>
<head>
<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>
</head>
<body>

<p>hej</p>

<img src="img1.jpg" onmouseover="ShowImg(this,'img2')" onmouseout="HideImg('img2')">
<img id="img2" src="img2.jpg" style="position:absolute;display:none">
<img src="img1.jpg" onmouseover="ShowImg(this,'img2')" onmouseout="HideImg('img2')">
<img id="img2" src="img2.jpg" style="position:absolute;display:none">

</body>
</html>

Synes godt om

13thsky Nybegynder

19. februar 2008 - 12:01 #11

Jeg arbejder lidt på det. Takker.

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

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	4	27/04/202620:09	30/04/202622:36
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.

Du kan også logge ind via nedenstående tjenester

Alle kategorier på Eksperten

Seneste artiklerRSS