Avatar billede amd Nybegynder
21. januar 2006 - 16:36 Der er 8 kommentarer og
1 løsning

Billede vises i stor når musen er over

Hej kloge hoveder :)

Jeg mangler et script, som gør at når jeg holder hånden over et lille billede, vises det i stor hen over en del af siden, hvis I forstår.
Er det noget I kan hjælpe med ?
Avatar billede Keld Nielsen Professor
21. januar 2006 - 16:44 #1
Som på min ...ikke færdige side, www.prolight.dk, under produkter ....?
Avatar billede Keld Nielsen Professor
21. januar 2006 - 16:48 #2
Du kan selv se koden, ellers har jeg trukket det vigtigste ud her:

<script language="JavaScript">
<!-- hide this script from non-javascript-enabled browsers

Person_tekst = new Array();
Person_Img = new Array();
Browser    = null;

BName = navigator.appName;
BVersion = parseInt(navigator.appVersion);

if(BName == "Microsoft Internet Explorer" && BVersion >= 4) {
  Browser = "IE";
}
else if(BName == "Netscape" && BVersion >= 4) {
  Browser = "NS";
}
else {
  Browser = null;
}

TilfojPerson(00, null, null);

TilfojPerson(01, 'images/accoat-1.jpg');
TilfojPerson(02, 'images/accoat-2.jpg');
TilfojPerson(03, 'images/accoat-3.jpg');
TilfojPerson(04, 'images/accoat-4.jpg');
TilfojPerson(05, 'images/accoat-5.jpg');
function TilfojPerson(i, img) {
   
  Person_Img[i] = new Image();
    Person_Img[i].src = img;
}

function BITekstSkift(i) {
  document['coverimg'].src = Person_Img[i].src
 
}
// stop hiding -->
</script>

------------

<a onMouseOver="window.status=''; BITekstSkift(04); return true;" onMouseOut="window.status=''; return true;" href="#"><img src="images/thumbs/th_accoat-4.jpg" alt="" width="70" height="70" border="0" onMouseOver="this.style.borderColor='#f00';" onMouseOut="this.style.borderColor='';"></a>
Avatar billede amd Nybegynder
21. januar 2006 - 17:08 #3
Det er ikke helt det jeg efterlyser...
Det skal komme ved siden af billedet som are lapper hen over siden, og forsvinder når musen fjernes hvis du forstår ?
Avatar billede amd Nybegynder
21. januar 2006 - 17:10 #4
Avatar billede johan.o Nybegynder
22. januar 2006 - 00:03 #5
Noget ala det her måske :

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/REC-html40/strict.dtd">
<html>
<head>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">
<title>Test.</title>
<style type="text/css">

.oPicCon {
position: absolute;
top: 0px;
left: 0px;
display: none; }

</style>
<script type="text/javascript">

function showPic(oImg) {
oCon=document.getElementById("picCon");

oCon.style.left=(oImg.offsetLeft+oImg.width+5)+"px";
oCon.style.top=oImg.offsetTop+"px";

document.getElementById("oPic").src=oImg.src;
oCon.style.display="block"; }

</script>
</head>

<body>

<div id="picCon" class="oPicCon"><img id="oPic" src=""></div>

<img src="pic.jpg" style="height: 100px; width: 50px;" onmouseover="showPic(this);" onmouseout="document.getElementById('picCon').style.display='none';">

</body>
</html>

I det ovenstående går jeg ud fra at den thumbnail du fører musen over er det originale billede der blot er resized til et lille thumbnail. Hvis du reelt har lavet et lille thumbnail med sit eget filnavn skal scriptet rettes til...(bliver lidt større)..men lad mig høre.

Mvh. Johan
Avatar billede amd Nybegynder
22. januar 2006 - 14:49 #6
Den er lige i øjet - smit et svar :)
Avatar billede johan.o Nybegynder
22. januar 2006 - 18:44 #7
Værsgo - og velbekomme :)

Mvh. Johan
Avatar billede amd Nybegynder
22. januar 2006 - 19:49 #8
- lige et spørgsmål mere.
Når jeg scroller ned på siden så kan jeg ikke se billedet af varen, fordi det kun er helt oppe i toppen det er.
Er det muligt at gøre så det følger efter, eller vises i forhold til billedets position ?
Avatar billede johan.o Nybegynder
22. januar 2006 - 21:09 #9
Ja, der er vist en ting jeg ikke lige fik med. At skifte denne linje :

<img src="pic.jpg" style="height: 100px; width: 50px;" onmouseover="showPic(this);" onmouseout="document.getElementById('picCon').style.display='none';">

Ud med denne :

<img src="pic.jpg" style="position: relative; height: 100px; width: 50px;" onmouseover="showPic(this);" onmouseout="document.getElementById('picCon').style.display='none';">

Mvh. Johan
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