CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

sjovhilsen Nybegynder

05. oktober 2008 - 13:30 Der er 4 kommentarer

Billed popup ved at lade musen køre over billed

Hej, jeg kunne godt tænke mig at få et billed til at poppe up blot ved at lade musen kører over et "mini" billed, men hvordan gør jeg det.

Det er på denne side, hvor jeg ud for hvert navn kunne tænke mig at der skal vises et billed blot ved at lade musen kører over teksten eller en billed ved siden af teksten.

http://www.sjovhilsen.dk/pakkekalender-drenge-3-5-aar.html

Billedet fx ved det første link ligger på denne adresse

http://www.sjovhilsen.dk/dyr-der-kan-traekkes-stoerre/popup_image/dyr-der-kan-traekkes-stoerre.jpg

men det er jo alt for stort, kan man ved koden få det til at være fx 60 x 60 pixel?

Hvad med trafikken, hvilken indflydelse vil det have hver gang du loader siden, vil det så skulle hente samtlige billeder hver gang?

Håber i kan hjælpe

Jimmy

Synes godt om

w13 Novice

05. oktober 2008 - 13:35 #1

Det skal laves med JavaScript, og nej, det vil ikke loade, når siden loades, medmindre du sætter den til det. Det loades først, når det vises.

I øvrigt bør du skalere billede og gemme det i den nye størrelse, så det store billede ikke skal hentes af browseren og derefter skaleres. Det er rimelig resurse-spild, og nogle browsere er rigtig dårlige til at skalere.

I øvrigt afhænger JavaScript-koden meget af, hvordan du vil have det store billede vist. Hvis det skal vises, der hvor musen er, vil koden f.eks. blive noget mere avanceret.

Synes godt om

sjovhilsen Nybegynder

05. oktober 2008 - 14:00 #2

Har du et eksempel på sådan en kode? Det ville været ret smart hvis det blev loaded der hvor musen var, hvor ville det elles komme?

Jimmy

Synes godt om

w13 Novice

05. oktober 2008 - 14:02 #3

Der hvor du ville placere det på siden. =) Og nej, desværre.

Synes godt om

w13 Novice

05. oktober 2008 - 14:29 #4

Jo, jeg har faktisk denne her, kan jeg se:

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

<script type="text/javascript">
var bIE=document.all?true:false;
if(!bIE)document.captureEvents(Event.MOUSEMOVE);

document.onmousemove=getMouseXY;

var iX = iY = 0;

function getMouseXY(e){
if(bIE){
iX = event.clientX + document.body.scrollLeft;
iY = event.clientY + document.body.scrollTop;
}else{
iX = e.pageX;
iY = e.pageY;
}
if(iX<0)iX=0;
if(iY<0)iY=0;
return true;
}

function imgTooltip(sSrc,iXPadding,iYPadding){
var oElement = document.createElement("img");
oElement.setAttribute("id","imgTooltip");
oElement.setAttribute("src",sSrc);
oElement.style.cssText = "position:absolute;top:"+parseInt(parseInt(iY)+parseInt(iYPadding))+"px;left:"+parseInt(parseInt(iX)+parseInt(iXPadding))+"px";
document.getElementsByTagName("body")[0].appendChild(oElement);
}

function imgTooltipHide(){
var oElement = document.getElementById("imgTooltip");
oElement.parentNode.removeChild(oElement);
}
</script>

<img src="billede1.jpg" onmouseover="imgTooltip(this.getAttribute('src'),20,20)" onmouseout="imgTooltipHide()">

</body>
</html>

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 PHP kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hent array key Af nemlig i PHP	3	17/05/202415:22	17/05/202416:30
iCal-feed og import til google kalender driller Af nemlig i PHP	11	09/05/202417:49	10/05/202421:28
Adgang til vandaflæsningsdata Af nemlig i PHP	4	22/04/202422:04	30/04/202421:08
Vælg post rækkefølge Af Mojo_dk i PHP	3	06/04/202418:40	07/04/202412:20
Hjælp til PHP Af Friis77 i PHP	5	11/02/202419:58	12/02/202407:55

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