Hjælpeforum til Ludvigs Hjørne

af **ballegaarden** » ons okt 15, 2008 22:23

Er der en her inde der kan hjælpe mig med et mouseover projekt.
Jeg har en del små billeder, som ved et klik på dem, popper op i et lille selvstændigt billede, uden menu, kun med det røde kryds. Som så skal lukkes.
Jeg kunne godt tænke mig at have en mouse over funktion, at der ikke skulle klikkes, men kun når musen er over det lille billede, popper der et stort billede op og når musen fjernes lukker dig selv.
Ja jeg må desværre tilstå, da jeg så en funktion som denne:
http://www.kenjan.dk/default.asp?ID=5&s ... 206&page=1
(klik på halsbåndene), så blev jeg forelsket, for det var guf, smukt og stilret ikke, men det er mig helt umuligt at finde koderne, imellem alle de scripts der er på den side. øv

af **Kim Ludvigsen** » ons okt 15, 2008 22:38

I min Firefox virker den funktion først, når der klikkes på billedet. Jeg har set den samme funktion mange andre steder, så det må være muligt at finde et færdigt JavaScript med en forklaring et eller andet sted. Jeg ved desværre ikke hvor.

Hvis du vil have en automatisk popop - altså uden klik - så taget et kig på overLIB, tjek denne tråd:
viewtopic.php?f=2&t=6824074&p=4953

af **ballegaarden** » tors okt 16, 2008 10:01

Utroligt, jeg havde ellers søgt i dette her forum med den funktion og ikke fundet det - tak.

Jeg syntes ellers jeg er meget rundt på nettet og det er første gang jeg har mødt denne funktion.
Du har vel ikke en side du kan ryste ud af ærmet, som ikke er så omfattende som den jeg linkede til.
Den side er nemlig fyldt med scripts og jeg kan sempelthen ikke skille dem fra hinanden.

af **Kim Ludvigsen** » tors okt 16, 2008 11:05

Funktionen bruges fx på Mozillas tilføjelsesside, når du vil se et skærmbillede. Du kan fx se den på udvidelsen Web Developers side:
https://addons.mozilla.org/da/firefox/addon/60
(Web Developer er et meget stærkt udviklingsværktøj, når man laver hjemmesider)

af **ballegaarden** » tors okt 16, 2008 11:53

OK det kan godt være jeg skal holde mig fra dette i første omgang, ind til jeg bliver mere rutineret.
Så jeg nøjes med at lege lidt med de der popup billeder i stedet for.

af **ballegaarden** » tors okt 16, 2008 12:32

Nu fandt jeg tilfældigt lige det jeg lige ville have, men kan du hjælpe mig til at lave om på de værdier der hedder x+15 og y+15.
Det virker fint når det lille billede, der blivet forstørret ligger opp og til venstre på siden, men de billeder der ligger nederst og helt ude til højre, kan ikke ses.
Det må kunne laves så den er variabel, alt efter hvor de små billeder ligger.
Håber du kan hjælpe, så bliver jeg meget glad.

<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;">

 

</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>

af **Kim Ludvigsen** » tors okt 16, 2008 13:48

ballegaarden skrev: <img src="billede1.png" onMouseOver="ShowBigImage('billede1.png');" onMouseMove="MoveBigImage(event.clientX, event.clientY);" onMouseOut="HideBigImage();">

Mit kendskab til JavaScript er yderst ringe. Men jeg ville nok prøve at eksperimentere med at angive en fast placering i ovenstående. Så vidt jeg kan se, så hentes placeringen på det lille billede, og der tillægges derefter 15px til visningen af det store billede (i funktionen MoveBigImage(x,y)).

Hvis du udskifter:
MoveBigImage(event.clientX, event.clientY)
på de problematiske billeder med fx:
MoveBigImage(200, 200)
så vil jeg tro, at billedet placeres 215px fra toppen og 215px fra venstre side. Det største problem ved at angive en fast placering er, at ikke alle bruger samme vinduesstørrelse. Der findes sikkert en meget bedre løsning ude på det store internet.

af **ballegaarden** » tors okt 16, 2008 14:04

Jeg har prøvet at ændre lidt på værdierne i x+15 og y+15, og de står for at det forstørrede billede (som kommer op i org størrelse) beliggendhed i forhold til det lille. Så er det at det går galt, når det lille billede, der ligger helt til højre bliver peget på, så vil det forstørrede billede ligge sig uden for skærmen. Det store billede følger billedet der peges på.
Jeg fandt også et andet noget mindre script, men der er problemet det samme.

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

Hjælpeforum til Ludvigs Hjørne

mouse over projekt

mouse over projekt

Re: mouse over projekt

Re: mouse over projekt

Re: mouse over projekt

Re: mouse over projekt

Re: mouse over projekt

Re: mouse over projekt

Re: mouse over projekt

Hvem er online